diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 853c516dad689..7b8cb59f31cd8 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -86,7 +86,7 @@ OverflowSet/  @micahgodbolt
 # Overlay/
 # Panel/
 # Persona/
-Persona/PersonaCoin.tsx @mtennoe @jakob101
+Persona/PersonaCoin/ @mtennoe @jakob101
 Persona/PersonaConsts.tsx @mtennoe @jakob101
 pickers/  @joschect
 # Pivot/
@@ -105,4 +105,59 @@ TeachingBubble/   @micahgodbolt
 Toggle/  @phkuo
 Tooltip/  @micahgodbolt
 
+## Docs
+# ActivityItem/docs/
+# Breadcrumb/docs/
+# Button/docs/
+Calendar/docs/   @lorejoh12 @sathi23
+Callout/docs/  @joschect
+# Check/docs/
+# Checkbox/docs/
+ChoiceGroup/docs/   @srideshpande
+# ColorPicker/docs/
+# ComboBox/docs/
+CommandBar/docs/   @micahgodbolt
+ContextualMenu/docs/  @joschect
+DatePicker/docs/   @lorejoh12 @sathi23
+# DetailsList/docs/
+# Dialog/docs/
+DocumentCard/docs/ @yiminwu @mikewheaton
+# Dropdown/docs/
+# Fabric/docs/
+# FacePile/docs/
+# FocusTrapZone/docs/
+# FocusZone/docs/
+GroupedList/docs/  @aditima
+HoverCard/docs/   @atneik @Jahnp
+# Icon/docs/
+# Image/docs/
+# Label/docs/
+Layer/docs/  @ThomasMichon
+# Link/docs/
+List/docs/  @cschleiden
+# MarqueeSelection/docs/
+# MessageBar/docs/
+# Modal/docs/
+# Nav/docs/
+OverflowSet/docs/  @micahgodbolt
+# Overlay/docs/
+# Panel/docs/
+# Persona/docs/
+pickers/docs/  @joschect
+# Pivot/docs/
+# Popup/docs/
+# ProgressIndicator/docs/
+Rating/docs/  @cschleiden
+ResizeGroup/docs/  @micahgodbolt
+# SearchBox/docs/
+# Slider/docs/
+# SpinButton/docs/
+# Spinner/docs/
+# SwatchColorPicker/docs/
+TeachingBubble/docs/   @micahgodbolt
+# TextField/docs/
+# Theme/docs/
+Toggle/docs/  @phkuo
+Tooltip/docs/  @micahgodbolt
+
 
diff --git a/.npm-version b/.npm-version
index ad98597185fb2..4cc0e35cb30cf 100644
--- a/.npm-version
+++ b/.npm-version
@@ -1 +1 @@
-2.x
\ No newline at end of file
+5.6.0
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
index 03a88d5329b50..37768f45f9542 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -7,4 +7,4 @@ script:
     fi
   - npm run buildfast
   - npm run bundlesize
-  - npm run vrtest
+  - npm run vrtest
\ No newline at end of file
diff --git a/README.md b/README.md
index 756d6f9893cc3..e353e806ae318 100644
--- a/README.md
+++ b/README.md
@@ -127,7 +127,7 @@ In Jest:
 
 For advanced usage including info about module vs. path-based imports, using an AMD bundler like Require, and deployment features, see our [advanced documentation](./ghdocs/BestPractices/Advanced.md).
 
-## Contribute to Office UI Fabric React
+## Contribute to Fabric React
 
 Please take a look at our [contribution guidelines](./ghdocs/Contributing/Contributing.md) for more info. Also read [Contribute Bug fixes](./ghdocs/Contributing/BugFixes.md) and [Contribute New component](./ghdocs/Contributing/NewComponent.md).
 
diff --git a/apps/fabric-website/CHANGELOG.json b/apps/fabric-website/CHANGELOG.json
index ec6015e7ba8ae..549326a38cd41 100644
--- a/apps/fabric-website/CHANGELOG.json
+++ b/apps/fabric-website/CHANGELOG.json
@@ -1,6 +1,44 @@
 {
   "name": "@uifabric/fabric-website",
   "entries": [
+    {
+      "version": "5.7.0",
+      "tag": "@uifabric/fabric-website_v5.7.0",
+      "date": "Tue, 17 Apr 2018 18:47:11 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "8829b1fde1bbe2e6920b5e619727835184a15b45",
+            "comment": "GetStarted page: Give titles links to their corresponding pages."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.82.1 <6.0.0` to `>=5.82.2 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.6.1",
+      "tag": "@uifabric/fabric-website_v5.6.1",
+      "date": "Mon, 16 Apr 2018 10:23:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e",
+            "comment": "Updating build to React 16.3.1."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.81.1 <6.0.0` to `>=5.82.0 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.6.0",
       "tag": "@uifabric/fabric-website_v5.6.0",
diff --git a/apps/fabric-website/CHANGELOG.md b/apps/fabric-website/CHANGELOG.md
index d9d87e339be9d..2cb7da3dab9aa 100644
--- a/apps/fabric-website/CHANGELOG.md
+++ b/apps/fabric-website/CHANGELOG.md
@@ -1,6 +1,20 @@
 # Change Log - @uifabric/fabric-website
 
-This log was last generated on Thu, 05 Apr 2018 10:15:39 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Apr 2018 18:47:11 GMT and should not be manually modified.
+
+## 5.7.0
+Tue, 17 Apr 2018 18:47:11 GMT
+
+### Minor changes
+
+- GetStarted page: Give titles links to their corresponding pages.
+
+## 5.6.1
+Mon, 16 Apr 2018 10:23:26 GMT
+
+### Patches
+
+- Updating build to React 16.3.1.
 
 ## 5.6.0
 Thu, 05 Apr 2018 10:15:39 GMT
diff --git a/apps/fabric-website/index.html b/apps/fabric-website/index.html
index 4a0ec3a93ccfa..9d6ea18b80e52 100644
--- a/apps/fabric-website/index.html
+++ b/apps/fabric-website/index.html
@@ -45,8 +45,8 @@
     }
 
     var scripts = [
-      '//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js',
-      '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js',
+      '//cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js',
+      '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js',
       '/fabric-sitev5.js'
     ];
 
diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json
index 9cf173dfe5965..a0bad07864595 100644
--- a/apps/fabric-website/package.json
+++ b/apps/fabric-website/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/fabric-website",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -22,16 +22,16 @@
     "@types/node": "8.0.26",
     "@types/prop-types": "15.5.2",
     "@types/resemblejs": "~1.3.28",
-    "@types/react": "16.0.25",
-    "@types/react-dom": "16.0.3",
+    "@types/react": "16.3.10",
+    "@types/react-dom": "16.0.5",
     "@types/webpack-env": "1.13.0",
     "es6-promise": "^4.1.0",
     "es6-weak-map": "^2.0.2",
     "highlight.js": "^9.12.0",
     "office-ui-fabric-core": ">=9.0.0 <10.0.0",
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
     "react-highlight": "^0.10.0",
     "write-file-webpack-plugin": "^4.1.0"
   },
@@ -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.81.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.85.0 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/apps/fabric-website/src/components/App/App.tsx b/apps/fabric-website/src/components/App/App.tsx
index 38b5c98c5e03a..103875380d1d9 100644
--- a/apps/fabric-website/src/components/App/App.tsx
+++ b/apps/fabric-website/src/components/App/App.tsx
@@ -27,7 +27,7 @@ export class App extends React.Component<IAppProps, any> {
     };
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     window.addEventListener('scroll', this._handleNavPositioning);
     window.addEventListener('resize', this._handleNavPositioning);
 
@@ -35,12 +35,12 @@ export class App extends React.Component<IAppProps, any> {
     this._handleNavPositioning();
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     window.removeEventListener('scroll', this._handleNavPositioning);
     window.removeEventListener('resize', this._handleNavPositioning);
   }
 
-  public render() {
+  public render(): JSX.Element {
     let { navHeight } = this.state;
     let navPosition: 'fixed' | 'absolute' = this.state.isAttached ? 'fixed' : 'absolute';
     let navStyle = {
diff --git a/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx b/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx
index e5d8ce6a6f775..4856de58c4112 100644
--- a/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx
+++ b/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx
@@ -49,7 +49,7 @@ export class CodeBlock extends React.Component<ICodeBlockProps, ICodeBlockState>
     this._onToggleClicked = this._onToggleClicked.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
     let { language, isCollapsible, isLightTheme, children } = this.props;
     let { isOpen } = this.state;
 
diff --git a/apps/fabric-website/src/components/ColorTable/ColorTable.tsx b/apps/fabric-website/src/components/ColorTable/ColorTable.tsx
index ed7c3d59482b0..c8668c67451a7 100644
--- a/apps/fabric-website/src/components/ColorTable/ColorTable.tsx
+++ b/apps/fabric-website/src/components/ColorTable/ColorTable.tsx
@@ -14,7 +14,7 @@ export interface IColorTableState {
 }
 
 export class ColorTable extends React.Component<IColorTableProps, IColorTableState> {
-  public render() {
+  public render(): JSX.Element {
     let { content } = this.props;
 
     return (
diff --git a/apps/fabric-website/src/components/DOIcon/DOIcon.tsx b/apps/fabric-website/src/components/DOIcon/DOIcon.tsx
index e212f0f6c8a38..631ad9ced549a 100644
--- a/apps/fabric-website/src/components/DOIcon/DOIcon.tsx
+++ b/apps/fabric-website/src/components/DOIcon/DOIcon.tsx
@@ -12,7 +12,7 @@ export class DOIcon extends React.Component<IDOIconProps, {}> {
     ariaHidden: true
   };
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <i
         className={ 'od-Icon od-Icon--' + this.props.iconClass + ' ms-bgColor-' + this.props.bgColor }
diff --git a/apps/fabric-website/src/components/DONavigation/DONavigation.tsx b/apps/fabric-website/src/components/DONavigation/DONavigation.tsx
index 509c060ff1885..89e546370bbc4 100644
--- a/apps/fabric-website/src/components/DONavigation/DONavigation.tsx
+++ b/apps/fabric-website/src/components/DONavigation/DONavigation.tsx
@@ -31,7 +31,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
   private headerel;
   private navcontainerel;
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     let currentButton;
     let submenu;
     let currentContainer;
@@ -76,7 +76,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     this._processResize();
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='od-Navigation'>
         <div className='od-Navigation-searchContainer'>
@@ -174,7 +174,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     return linkElements;
   }
 
-  private _mouseMoveHandler(e) {
+  private _mouseMoveHandler(e): void {
     let linkContainer = document.querySelector(this.OPEN_LINK_CONTAINER);
     let subMenuContainer;
     let targetHeight;
@@ -240,7 +240,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     }
   }
 
-  private _processHamburger(e, isKeyEvent?: boolean) {
+  private _processHamburger(e, isKeyEvent?: boolean): void {
     let linkEL: HTMLElement;
     if (!this.hbuttonel.classList.contains(this.HAMBURGER_OPEN_STATE)) {
       this.hbuttonel.classList.add(this.HAMBURGER_OPEN_STATE);
@@ -256,7 +256,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     }
   }
 
-  private _closeDropdownHandler(e) {
+  private _closeDropdownHandler(e): void {
     if (!this._isDescendant(this.headerel, document.activeElement)) {
       this._removeDropdown();
     }
@@ -278,7 +278,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     }
   }
 
-  private _hamburgerHandler(e: any) {
+  private _hamburgerHandler(e: any): void {
     if (e.keyCode) {
       if (e.keyCode === 13) {
         this._processHamburger(e, true);
@@ -290,7 +290,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     }
   }
 
-  private _processMenuToggle(e) {
+  private _processMenuToggle(e): void {
     let ancestor;
     if (e.target.classList.contains(this.CONTAINER_CLASS)) {
 
@@ -316,7 +316,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     }
   }
 
-  private _toggleMenuHandler(e) {
+  private _toggleMenuHandler(e): void {
     if (e.keyCode) {
       if (e.keyCode === 13) {
         this._processMenuToggle(e);
@@ -328,7 +328,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     }
   }
 
-  private _isDescendant(parent, child) {
+  private _isDescendant(parent, child): boolean {
     let node = child.parentNode;
     while (node) {
       if (node === parent) {
@@ -345,7 +345,7 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     }
   }
 
-  private _findAncestor(el, cls) {
+  private _findAncestor(el, cls): void {
     let newCLS = cls.replace('.', '');
     let newEL = el;
 
diff --git a/apps/fabric-website/src/components/DONavigation/DONavigationLink.tsx b/apps/fabric-website/src/components/DONavigation/DONavigationLink.tsx
index 2540e51009407..28ea93554d625 100644
--- a/apps/fabric-website/src/components/DONavigation/DONavigationLink.tsx
+++ b/apps/fabric-website/src/components/DONavigation/DONavigationLink.tsx
@@ -13,22 +13,22 @@ export interface IDONavigationLinkState {
 }
 
 export class DONavigationLink extends React.Component<IDONavigationLinkProps, IDONavigationLinkState> {
-    public static defaultProps = {
-      role: 'menuitem'
-    };
+  public static defaultProps = {
+    role: 'menuitem'
+  };
 
-    public render() {
-      return (
-        <a className='od-Navigation-subMenuItem' href={ this.props.href } role={ this.props.role }>
-          { this._getIcon() }
-          { this.props.label }
-        </a>
-      );
-    }
+  public render(): JSX.Element {
+    return (
+      <a className='od-Navigation-subMenuItem' href={ this.props.href } role={ this.props.role }>
+        { this._getIcon() }
+        { this.props.label }
+      </a>
+    );
+  }
 
-    private _getIcon() {
-      if (this.props.icon) {
-        return <DOIcon iconClass={ this.props.icon.iconClass } bgColor={ this.props.icon.bgColor } />;
-      }
+  private _getIcon() {
+    if (this.props.icon) {
+      return <DOIcon iconClass={ this.props.icon.iconClass } bgColor={ this.props.icon.bgColor } />;
     }
+  }
 }
\ No newline at end of file
diff --git a/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.tsx b/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.tsx
index 8ffd0bba48942..0400353f9881d 100644
--- a/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.tsx
+++ b/apps/fabric-website/src/components/DOSearchBox/DOSearchBox.tsx
@@ -2,17 +2,17 @@ import * as React from 'react';
 import './DOSearchBox.scss';
 
 export class DOSearchBox extends React.Component<{}, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='od-SearchBox'>
-          <form className='od-SearchBox-searchForm ng-pristine ng-valid' action='http://dev.office.com/Search' method='get'>
-              <fieldset>
-                  <input name='q' id='q' role='Search' aria-label='Search Office Dev Center' type='text' placeholder='Search dev.office.com' defaultValue='' className='od-SearchBox-field' />
-                  <input name='culture' id='culture' type='hidden' value='en-US' />
-                  <button type='submit' className='od-SearchBox-button ms-Icon ms-Icon--Search'>Search</button>
-              </fieldset>
-          </form>
-        </div>
+        <form className='od-SearchBox-searchForm ng-pristine ng-valid' action='http://dev.office.com/Search' method='get'>
+          <fieldset>
+            <input name='q' id='q' role='Search' aria-label='Search Office Dev Center' type='text' placeholder='Search dev.office.com' defaultValue='' className='od-SearchBox-field' />
+            <input name='culture' id='culture' type='hidden' value='en-US' />
+            <button type='submit' className='od-SearchBox-button ms-Icon ms-Icon--Search'>Search</button>
+          </fieldset>
+        </form>
+      </div>
     );
   }
 }
\ No newline at end of file
diff --git a/apps/fabric-website/src/components/IconGrid/IconGrid.tsx b/apps/fabric-website/src/components/IconGrid/IconGrid.tsx
index 08879b64d9e0d..3a317fd721b66 100644
--- a/apps/fabric-website/src/components/IconGrid/IconGrid.tsx
+++ b/apps/fabric-website/src/components/IconGrid/IconGrid.tsx
@@ -26,7 +26,7 @@ export class IconGrid extends React.Component<IIconGridProps, IIconGridState> {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     let { icons } = this.props;
     let { searchQuery } = this.state;
 
@@ -57,7 +57,7 @@ export class IconGrid extends React.Component<IIconGridProps, IIconGridState> {
     );
   }
 
-  private _onSearchQueryChanged(newValue) {
+  private _onSearchQueryChanged(newValue): void {
     this.setState({
       'searchQuery': newValue
     });
diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx
index df836511d6eab..04b96ff55fa1e 100644
--- a/apps/fabric-website/src/components/Nav/Nav.tsx
+++ b/apps/fabric-website/src/components/Nav/Nav.tsx
@@ -14,7 +14,7 @@ export interface INavState {
 
 export class Nav extends React.Component<INavProps, INavState> {
 
-  public render() {
+  public render(): JSX.Element {
     let { pages } = this.props;
 
     if (!pages) {
diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx
index bafc2d4ce182d..d63bd6bfd626c 100644
--- a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx
+++ b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx
@@ -71,7 +71,7 @@ export class PageHeader extends BaseComponent<IPageHeaderProps, IPageHeaderState
 
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
 
     // Only attach the header if there are in-page nav items
     if (this.props.links) {
@@ -81,7 +81,7 @@ export class PageHeader extends BaseComponent<IPageHeaderProps, IPageHeaderState
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     let { pageTitle, links, backgroundColor, backgroundImage } = this.props;
     let { isAttached } = this.state;
     let inPageNav;
diff --git a/apps/fabric-website/src/components/PageHeaderLink/PageHeaderLink.tsx b/apps/fabric-website/src/components/PageHeaderLink/PageHeaderLink.tsx
index 9885099a843eb..d4901d42638ca 100644
--- a/apps/fabric-website/src/components/PageHeaderLink/PageHeaderLink.tsx
+++ b/apps/fabric-website/src/components/PageHeaderLink/PageHeaderLink.tsx
@@ -15,7 +15,7 @@ export class PageHeaderLink extends React.Component<IPageHeaderLink, {}> {
     link?: HTMLAnchorElement
   } = {};
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._eventListener = this._eventListener.bind(this);
     this._getBreakpoint = this._getBreakpoint.bind(this);
     this._els.link.addEventListener('click', this._eventListener);
@@ -23,7 +23,7 @@ export class PageHeaderLink extends React.Component<IPageHeaderLink, {}> {
     this._getBreakpoint();
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <a ref={ (a) => { this._els.link = a; } } href={ this.props.href } data-title={ this.props.text }>{ this.props.text }</a>
     );
@@ -41,7 +41,7 @@ export class PageHeaderLink extends React.Component<IPageHeaderLink, {}> {
     }
   }
 
-  private _eventListener(event) {
+  private _eventListener(event): void {
     event.preventDefault();
     history.pushState({}, '', this._els.link.getAttribute('href'));
     let navigatorUserAgent = navigator.userAgent.toLowerCase();
diff --git a/apps/fabric-website/src/components/Table/AnimationCell/AnimationCell.tsx b/apps/fabric-website/src/components/Table/AnimationCell/AnimationCell.tsx
index f2f143e825b2b..4870ddee18ca0 100644
--- a/apps/fabric-website/src/components/Table/AnimationCell/AnimationCell.tsx
+++ b/apps/fabric-website/src/components/Table/AnimationCell/AnimationCell.tsx
@@ -10,7 +10,7 @@ export class AnimationCell extends React.Component<IAnimationCellProps, {}> {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const name = this.props.data[0].value;
     const animClass = this.props.data[1].value;
 
diff --git a/apps/fabric-website/src/components/Table/Table.tsx b/apps/fabric-website/src/components/Table/Table.tsx
index a9bcf0d2b8edb..0dd67f4f21d28 100644
--- a/apps/fabric-website/src/components/Table/Table.tsx
+++ b/apps/fabric-website/src/components/Table/Table.tsx
@@ -31,7 +31,7 @@ export class Table extends React.Component<ITableProps, ITableState> {
     this._windowEventHandler();
   }
 
-  public render() {
+  public render(): JSX.Element {
     let { content } = this.props;
     return (this.state.currentBreakpoint === 'mobile' && this.props.responsive) ? this._renderMobile(content) : this._renderDesktop(content);
   }
diff --git a/apps/fabric-website/src/pages/BlogPage/BlogItem.tsx b/apps/fabric-website/src/pages/BlogPage/BlogItem.tsx
index 5012d58ed50d8..263ed46fa1d84 100644
--- a/apps/fabric-website/src/pages/BlogPage/BlogItem.tsx
+++ b/apps/fabric-website/src/pages/BlogPage/BlogItem.tsx
@@ -12,7 +12,7 @@ export interface IBlogItem {
 }
 
 export class BlogItem extends React.Component<IBlogItem, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='BlogItem'>
         <div className='BlogItem-dateColumn'>
@@ -33,7 +33,7 @@ export class BlogItem extends React.Component<IBlogItem, {}> {
             { this.props.title }
           </h2>
           <p className='BlogItem-author'>
-            Posted by {this.props.author}
+            Posted by { this.props.author }
           </p>
           <p className='BlogItem-previewDescription'>
             { this.props.previewDescription }
diff --git a/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx b/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx
index 686d320b7d8ca..0e70557dfb12d 100644
--- a/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx
+++ b/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx
@@ -7,7 +7,7 @@ const styles: any = stylesImport;
 const blogData = require('../../data/blog-posts.json');
 
 export class BlogPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <PageHeader pageTitle='Blog' backgroundColor='#73aa24' />
diff --git a/apps/fabric-website/src/pages/BlogPage/BlogPost.tsx b/apps/fabric-website/src/pages/BlogPage/BlogPost.tsx
index 9e93ead4f9383..f2eb361ac72ad 100644
--- a/apps/fabric-website/src/pages/BlogPage/BlogPost.tsx
+++ b/apps/fabric-website/src/pages/BlogPage/BlogPost.tsx
@@ -11,7 +11,7 @@ export class BlogPost extends React.Component<{}, {}> {
     this._postId = this._getParameterByName('id');
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='BlogPost'>
         <div className='BlogPost-pageTitle'>
@@ -31,7 +31,7 @@ export class BlogPost extends React.Component<{}, {}> {
     );
   }
 
-  private _getParameterByName(name: string, url?: string) {
+  private _getParameterByName(name: string, url?: string): string {
     if (!url) {
       url = window.location.href;
     }
diff --git a/apps/fabric-website/src/pages/Components/ActivityItemComponentPage.tsx b/apps/fabric-website/src/pages/Components/ActivityItemComponentPage.tsx
index 9f998585a05c8..d5a8b62c7b95e 100644
--- a/apps/fabric-website/src/pages/Components/ActivityItemComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ActivityItemComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ActivityItemComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/BreadcrumbComponentPage.tsx b/apps/fabric-website/src/pages/Components/BreadcrumbComponentPage.tsx
index f4f9be714e055..1f5c650f113be 100644
--- a/apps/fabric-website/src/pages/Components/BreadcrumbComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/BreadcrumbComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class BreadcrumbComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ButtonComponentPage.tsx b/apps/fabric-website/src/pages/Components/ButtonComponentPage.tsx
index 6a3232b9b1f1b..ddbd8862a50a4 100644
--- a/apps/fabric-website/src/pages/Components/ButtonComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ButtonComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ButtonComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
 
       <div ref='pageElement' className={ pageStyles.basePage }>
diff --git a/apps/fabric-website/src/pages/Components/CalendarComponentPage.tsx b/apps/fabric-website/src/pages/Components/CalendarComponentPage.tsx
index 50bf399d2ee0f..e69e275909926 100644
--- a/apps/fabric-website/src/pages/Components/CalendarComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/CalendarComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class CalendarComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/CalloutComponentPage.tsx b/apps/fabric-website/src/pages/Components/CalloutComponentPage.tsx
index dfe53b8634548..0f61628ccf9e2 100644
--- a/apps/fabric-website/src/pages/Components/CalloutComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/CalloutComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class CalloutComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/CheckboxComponentPage.tsx b/apps/fabric-website/src/pages/Components/CheckboxComponentPage.tsx
index 0175c42a03ed8..187ecf596d44c 100644
--- a/apps/fabric-website/src/pages/Components/CheckboxComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/CheckboxComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class CheckboxComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ChoiceGroupComponentPage.tsx b/apps/fabric-website/src/pages/Components/ChoiceGroupComponentPage.tsx
index 4182b09dfb1a4..53a58a52cad6e 100644
--- a/apps/fabric-website/src/pages/Components/ChoiceGroupComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ChoiceGroupComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ChoiceGroupComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx b/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx
index 6096e06988736..ee8ad6e087fac 100644
--- a/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class CoachmarkComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ColorPickerComponentPage.tsx b/apps/fabric-website/src/pages/Components/ColorPickerComponentPage.tsx
index 4c9bd0ba38106..864849d170daa 100644
--- a/apps/fabric-website/src/pages/Components/ColorPickerComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ColorPickerComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ColorPickerComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ComboBoxComponentPage.tsx b/apps/fabric-website/src/pages/Components/ComboBoxComponentPage.tsx
index d28667aeabcd0..b4c2fdebd414a 100644
--- a/apps/fabric-website/src/pages/Components/ComboBoxComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ComboBoxComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ComboBoxComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/CommandBarComponentPage.tsx b/apps/fabric-website/src/pages/Components/CommandBarComponentPage.tsx
index 25be30d714a4f..28b68e2bdf393 100644
--- a/apps/fabric-website/src/pages/Components/CommandBarComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/CommandBarComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class CommandBarComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ComponentUtilitiesPage.tsx b/apps/fabric-website/src/pages/Components/ComponentUtilitiesPage.tsx
index bf17459fd3717..a92bb1ac7e117 100644
--- a/apps/fabric-website/src/pages/Components/ComponentUtilitiesPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ComponentUtilitiesPage.tsx
@@ -4,7 +4,7 @@ import { ComponentPage, IComponentPageProps } from '../../components/ComponentPa
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ComponentUtilitiesPage extends React.Component<IComponentPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ContextualMenuComponentPage.tsx b/apps/fabric-website/src/pages/Components/ContextualMenuComponentPage.tsx
index 1532af2aed26a..dcc0d0f29ba73 100644
--- a/apps/fabric-website/src/pages/Components/ContextualMenuComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ContextualMenuComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ContextualMenuComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/DatePickerComponentPage.tsx b/apps/fabric-website/src/pages/Components/DatePickerComponentPage.tsx
index 204c5dec1575f..7528ff1215d4a 100644
--- a/apps/fabric-website/src/pages/Components/DatePickerComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/DatePickerComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class DatePickerComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/DetailsListComponentPage.tsx b/apps/fabric-website/src/pages/Components/DetailsListComponentPage.tsx
index 2ac9254e714f8..76d78ee67c44c 100644
--- a/apps/fabric-website/src/pages/Components/DetailsListComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/DetailsListComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class DetailsListComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/DialogComponentPage.tsx b/apps/fabric-website/src/pages/Components/DialogComponentPage.tsx
index b3bf165e8e8d7..37429d48ddf42 100644
--- a/apps/fabric-website/src/pages/Components/DialogComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/DialogComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class DialogComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/DocumentCardComponentPage.tsx b/apps/fabric-website/src/pages/Components/DocumentCardComponentPage.tsx
index b1bae3dc7b2a9..5e5b0eef3d4cd 100644
--- a/apps/fabric-website/src/pages/Components/DocumentCardComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/DocumentCardComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class DocumentCardComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/DropdownComponentPage.tsx b/apps/fabric-website/src/pages/Components/DropdownComponentPage.tsx
index dac02d95e18f8..ca5e93aab2208 100644
--- a/apps/fabric-website/src/pages/Components/DropdownComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/DropdownComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class DropdownComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/FacepileComponentPage.tsx b/apps/fabric-website/src/pages/Components/FacepileComponentPage.tsx
index 3ed0df6639a62..3917a6b67f35b 100644
--- a/apps/fabric-website/src/pages/Components/FacepileComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/FacepileComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class FacepileComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/FocusTrapZoneUtilityPage.tsx b/apps/fabric-website/src/pages/Components/FocusTrapZoneUtilityPage.tsx
index c7e9b107a45f6..56124bb35f906 100644
--- a/apps/fabric-website/src/pages/Components/FocusTrapZoneUtilityPage.tsx
+++ b/apps/fabric-website/src/pages/Components/FocusTrapZoneUtilityPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class FocusTrapZoneUtilityPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/FocusZoneUtilityPage.tsx b/apps/fabric-website/src/pages/Components/FocusZoneUtilityPage.tsx
index 961cdec0c6c04..4f19fe75087cd 100644
--- a/apps/fabric-website/src/pages/Components/FocusZoneUtilityPage.tsx
+++ b/apps/fabric-website/src/pages/Components/FocusZoneUtilityPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class FocusZoneUtilityPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/GroupedListComponentPage.tsx b/apps/fabric-website/src/pages/Components/GroupedListComponentPage.tsx
index 9208478fa3ef9..65e087c4b323e 100644
--- a/apps/fabric-website/src/pages/Components/GroupedListComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/GroupedListComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class GroupedListComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/HoverCardComponentPage.tsx b/apps/fabric-website/src/pages/Components/HoverCardComponentPage.tsx
index 78139437bee79..cb46a0a86369d 100644
--- a/apps/fabric-website/src/pages/Components/HoverCardComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/HoverCardComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class HoverCardComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/IconComponentPage.tsx b/apps/fabric-website/src/pages/Components/IconComponentPage.tsx
index 0357bd7b5cdc8..ed4bb74cfa756 100644
--- a/apps/fabric-website/src/pages/Components/IconComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/IconComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class IconComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ImageComponentPage.tsx b/apps/fabric-website/src/pages/Components/ImageComponentPage.tsx
index f8af3614d787e..799e9db3e3cdc 100644
--- a/apps/fabric-website/src/pages/Components/ImageComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ImageComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ImageComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/LabelComponentPage.tsx b/apps/fabric-website/src/pages/Components/LabelComponentPage.tsx
index f576070430911..d3918096fc4e3 100644
--- a/apps/fabric-website/src/pages/Components/LabelComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/LabelComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class LabelComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/LayerComponentPage.tsx b/apps/fabric-website/src/pages/Components/LayerComponentPage.tsx
index 21a3374c8f20b..05813321385c9 100644
--- a/apps/fabric-website/src/pages/Components/LayerComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/LayerComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class LayerComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/LinkComponentPage.tsx b/apps/fabric-website/src/pages/Components/LinkComponentPage.tsx
index 2e09a43deffda..2973b8d378c30 100644
--- a/apps/fabric-website/src/pages/Components/LinkComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/LinkComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class LinkComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ListComponentPage.tsx b/apps/fabric-website/src/pages/Components/ListComponentPage.tsx
index 991a8a3c799e2..2d61c08e87496 100644
--- a/apps/fabric-website/src/pages/Components/ListComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ListComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ListComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/MarqueeSelectionUtilityPage.tsx b/apps/fabric-website/src/pages/Components/MarqueeSelectionUtilityPage.tsx
index 9dde9e1fb0ee5..364d4fc5052bd 100644
--- a/apps/fabric-website/src/pages/Components/MarqueeSelectionUtilityPage.tsx
+++ b/apps/fabric-website/src/pages/Components/MarqueeSelectionUtilityPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class MarqueeSelectionUtilityPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/MessageBarComponentPage.tsx b/apps/fabric-website/src/pages/Components/MessageBarComponentPage.tsx
index d215e845f2ecf..7099ae35adf87 100644
--- a/apps/fabric-website/src/pages/Components/MessageBarComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/MessageBarComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class MessageBarComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ModalComponentPage.tsx b/apps/fabric-website/src/pages/Components/ModalComponentPage.tsx
index a407a065e0a9a..be0793d2b2eb1 100644
--- a/apps/fabric-website/src/pages/Components/ModalComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ModalComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ModalComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/NavComponentPage.tsx b/apps/fabric-website/src/pages/Components/NavComponentPage.tsx
index dd0e8f5f59b2a..dee5dec8a0d43 100644
--- a/apps/fabric-website/src/pages/Components/NavComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/NavComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class NavComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/OverflowSetComponentPage.tsx b/apps/fabric-website/src/pages/Components/OverflowSetComponentPage.tsx
index 7c21183bd950a..7cae17323a227 100644
--- a/apps/fabric-website/src/pages/Components/OverflowSetComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/OverflowSetComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class OverflowSetComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/OverlayComponentPage.tsx b/apps/fabric-website/src/pages/Components/OverlayComponentPage.tsx
index 36e654cc461c8..050161847c3fa 100644
--- a/apps/fabric-website/src/pages/Components/OverlayComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/OverlayComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class OverlayComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/PanelComponentPage.tsx b/apps/fabric-website/src/pages/Components/PanelComponentPage.tsx
index 9e158348e4bfb..991071864bd81 100644
--- a/apps/fabric-website/src/pages/Components/PanelComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/PanelComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class PanelComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/PeoplePickerComponentPage.tsx b/apps/fabric-website/src/pages/Components/PeoplePickerComponentPage.tsx
index a6570e9a22f00..5c4a48a32ce80 100644
--- a/apps/fabric-website/src/pages/Components/PeoplePickerComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/PeoplePickerComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class PeoplePickerComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/PersonaComponentPage.tsx b/apps/fabric-website/src/pages/Components/PersonaComponentPage.tsx
index 6207c0bcaf109..1bf3aab5a22bb 100644
--- a/apps/fabric-website/src/pages/Components/PersonaComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/PersonaComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class PersonaComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/PickersComponentPage.tsx b/apps/fabric-website/src/pages/Components/PickersComponentPage.tsx
index f94833f6f8e1d..a3143da8bdd98 100644
--- a/apps/fabric-website/src/pages/Components/PickersComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/PickersComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class PickersComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/PivotComponentPage.tsx b/apps/fabric-website/src/pages/Components/PivotComponentPage.tsx
index a991a20e89881..1ed9a5c4ec33a 100644
--- a/apps/fabric-website/src/pages/Components/PivotComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/PivotComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class PivotComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ProgressIndicatorComponentPage.tsx b/apps/fabric-website/src/pages/Components/ProgressIndicatorComponentPage.tsx
index 3d756d2edbc24..4e5a7c942ee85 100644
--- a/apps/fabric-website/src/pages/Components/ProgressIndicatorComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ProgressIndicatorComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ProgressIndicatorComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/RatingComponentPage.tsx b/apps/fabric-website/src/pages/Components/RatingComponentPage.tsx
index 268f915e2603b..ea2119d9a1265 100644
--- a/apps/fabric-website/src/pages/Components/RatingComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/RatingComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class RatingComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ResizeGroupComponentPage.tsx b/apps/fabric-website/src/pages/Components/ResizeGroupComponentPage.tsx
index 5a11a629e2ce4..da320c2385ce0 100644
--- a/apps/fabric-website/src/pages/Components/ResizeGroupComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ResizeGroupComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ResizeGroupComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ScrollablePaneComponentPage.tsx b/apps/fabric-website/src/pages/Components/ScrollablePaneComponentPage.tsx
index 9c3f68da7568d..9a6e4ac8f1e6d 100644
--- a/apps/fabric-website/src/pages/Components/ScrollablePaneComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ScrollablePaneComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ScrollablePaneComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/SearchBoxComponentPage.tsx b/apps/fabric-website/src/pages/Components/SearchBoxComponentPage.tsx
index 3ee30b89ea0a5..c1ac5e2ca8d6d 100644
--- a/apps/fabric-website/src/pages/Components/SearchBoxComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/SearchBoxComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class SearchBoxComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/SelectionUtilityPage.tsx b/apps/fabric-website/src/pages/Components/SelectionUtilityPage.tsx
index 17e72e6f9ecff..02fd6b09c5ec7 100644
--- a/apps/fabric-website/src/pages/Components/SelectionUtilityPage.tsx
+++ b/apps/fabric-website/src/pages/Components/SelectionUtilityPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class SelectionUtilityPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/SliderComponentPage.tsx b/apps/fabric-website/src/pages/Components/SliderComponentPage.tsx
index 962688361f6bd..ced2bb935516f 100644
--- a/apps/fabric-website/src/pages/Components/SliderComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/SliderComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class SliderComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/SpinButtonComponentPage.tsx b/apps/fabric-website/src/pages/Components/SpinButtonComponentPage.tsx
index a43701393039a..86398034c23b7 100644
--- a/apps/fabric-website/src/pages/Components/SpinButtonComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/SpinButtonComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class SpinButtonComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/SpinnerComponentPage.tsx b/apps/fabric-website/src/pages/Components/SpinnerComponentPage.tsx
index a68576a591830..18570a9f0f672 100644
--- a/apps/fabric-website/src/pages/Components/SpinnerComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/SpinnerComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class SpinnerComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/SwatchColorPickerComponentPage.tsx b/apps/fabric-website/src/pages/Components/SwatchColorPickerComponentPage.tsx
index e0377f11c6009..c3028cb972049 100644
--- a/apps/fabric-website/src/pages/Components/SwatchColorPickerComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/SwatchColorPickerComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class SwatchColorPickerComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/TeachingBubbleComponentPage.tsx b/apps/fabric-website/src/pages/Components/TeachingBubbleComponentPage.tsx
index 750ccff7c794f..a524b400189b5 100644
--- a/apps/fabric-website/src/pages/Components/TeachingBubbleComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/TeachingBubbleComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class TeachingBubbleComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/TextFieldComponentPage.tsx b/apps/fabric-website/src/pages/Components/TextFieldComponentPage.tsx
index 481664c191be8..a46d5f2871c29 100644
--- a/apps/fabric-website/src/pages/Components/TextFieldComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/TextFieldComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class TextFieldComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ThemesUtilityPage.tsx b/apps/fabric-website/src/pages/Components/ThemesUtilityPage.tsx
index 81b0c766b8ee9..e5962ebab25e7 100644
--- a/apps/fabric-website/src/pages/Components/ThemesUtilityPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ThemesUtilityPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ThemesUtilityPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/ToggleComponentPage.tsx b/apps/fabric-website/src/pages/Components/ToggleComponentPage.tsx
index a9dd35ef26705..bc7d60d8b27c2 100644
--- a/apps/fabric-website/src/pages/Components/ToggleComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/ToggleComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ToggleComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/Components/TooltipComponentPage.tsx b/apps/fabric-website/src/pages/Components/TooltipComponentPage.tsx
index 13fdb3ac613b9..e0174926854af 100644
--- a/apps/fabric-website/src/pages/Components/TooltipComponentPage.tsx
+++ b/apps/fabric-website/src/pages/Components/TooltipComponentPage.tsx
@@ -5,7 +5,7 @@ import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class TooltipComponentPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div ref='pageElement' className={ pageStyles.basePage }>
         <ComponentPage>
diff --git a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss
index ec7fb9aa58d2b..4885114e6360f 100644
--- a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss
+++ b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss
@@ -47,11 +47,15 @@
   background-color:$color-getStarted-darker;
   color: $ms-color-neutralLighter;
 
-  a, a:visited,
+  a:not(.title), a:visited, a:hover.title,
   .getStartedLink {
     border-bottom: 1px solid $ms-color-neutralLight;
   }
 
+  a.title {
+    border-bottom: 1px solid transparent;
+  }
+
   a, a:hover, a:active,
   .getStartedLink {
     color: $ms-color-neutralLight;
@@ -59,11 +63,15 @@
 }
 
 .feature {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
   margin-bottom: 32px;
 
+  .featureImage {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
   img {
     height: 100%;
     margin-bottom: 8px;
@@ -91,7 +99,7 @@
   font-size: $font-size-big;
   font-weight: $ms-font-weight-semilight;
   margin-bottom: $contentMargin-vertical;
-  width: 100%;
+  display: table;
 }
 
 @media screen and (max-width: $uhf-screen-max-mobile) {
diff --git a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx
index 7841a5f4ecd70..3fed74a80af96 100644
--- a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx
+++ b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx
@@ -12,7 +12,7 @@ const corePackageData = require('../../../node_modules/office-ui-fabric-core/pac
 const corePackageVersion: string = corePackageData && corePackageData.version || '9.2.0';
 
 export class GetStartedPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div id='design' className={ pageStyles.basePage }>
         <PageHeader
@@ -49,26 +49,31 @@ export class GetStartedPage extends React.Component<any, any> {
           <div className='ms-Grid ms-Grid--wide'>
             <div className={ css('ms-Grid-row', styles.contentInGrid) }>
               <div className={ css('ms-Grid-col ms-lg4', styles.feature) }>
-                <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-styles.svg' } alt='Illustration of Typography and color swatches.' />
-                <div className={ styles.title }>Styles</div>
+                <div className={ styles.featureImage } >
+                  <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-styles.svg' } alt='Illustration of Typography and color swatches.' />
+                </div>
+                <a className={ styles.title } href={ '#/styles' }>Styles</a>
                 <div className={ styles.description }>Fabric gives you access to Segoe, Microsoft&rsquo;s official typeface, along with the color palette, type ramp, icons, and responsive grid for Office 365.</div>
               </div>
               <div className={ css('ms-Grid-col ms-lg4', styles.feature) }>
-                <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-icons.svg' } alt='Illustration of Icons' />
-                <div className={ styles.title }>Icons</div>
+                <div className={ styles.featureImage } >
+                  <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-icons.svg' } alt='Illustration of Icons' />
+                </div>
+                <a className={ styles.title } href={ '#/styles/icons' }>Icons</a>
                 <div className={ styles.description }>Fabric includes Office&rsquo;s official product icons. Fabric also provides a suite of product and document symbols, so you can use the same metaphors we use.</div>
               </div>
               <div className={ css('ms-Grid-col ms-lg4', styles.feature) }>
-                <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-components.svg' } alt='Illustration of Components' />
-                <div className={ styles.title }>Components</div>
+                <div className={ styles.featureImage } >
+                  <img src={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/images/get-started-components.svg' } alt='Illustration of Components' />
+                </div>
+                <a className={ styles.title } href={ '#/components' }>Components</a>
                 <div className={ styles.description }>Components are the building blocks of your UI. Fabric has a variety of components, including navigation, commands, containers, and content.</div>
               </div>
             </div>
           </div>
           <div id='toolkit'>
-            <span className={ styles.title }>Design Toolkit</span>
+            <a className={ styles.title } href='#/resources'>Design Toolkit</a>
             <span className={ styles.descriptionLarge }>The Fabric design toolkit is built with Adobe XD and provides controls and layout templates that enable you to create seamless, beautiful Office experiences.</span>
-            <a className={ styles.getStartedLink } href='#/resources'>Learn more</a>
           </div>
         </div>
 
diff --git a/apps/fabric-website/src/pages/HomePage/HomePage.tsx b/apps/fabric-website/src/pages/HomePage/HomePage.tsx
index 83cf6348f9074..b16d12b01cd38 100644
--- a/apps/fabric-website/src/pages/HomePage/HomePage.tsx
+++ b/apps/fabric-website/src/pages/HomePage/HomePage.tsx
@@ -7,7 +7,7 @@ const corePackageData = require('../../../node_modules/office-ui-fabric-core/pac
 const reactPackageData = require('../../../node_modules/office-ui-fabric-react/package.json');
 
 export class HomePage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <div className={ styles.hero }>
diff --git a/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx b/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx
index 0f2371b9ef90e..ff14f47e1a4d1 100644
--- a/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx
+++ b/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx
@@ -5,7 +5,7 @@ const styles: any = stylesImport;
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class AngularJSPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ pageStyles.basePage }>
         <div className={ styles.header }>
diff --git a/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx b/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx
index a54ec3b47229e..000f457820c06 100644
--- a/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx
+++ b/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx
@@ -4,7 +4,7 @@ const styles: any = stylesImport;
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class FabricIOSPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ pageStyles.basePage }>
         <div className={ styles.header }>
diff --git a/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx b/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx
index c46e45ddacf0f..1ad71bac88314 100644
--- a/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx
+++ b/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx
@@ -4,7 +4,7 @@ import * as stylesImport from './Interstitials.module.scss';
 const styles: any = stylesImport;
 
 export class FabricJSPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <div className={ styles.header }>
diff --git a/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx b/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx
index 1c1662094b730..2936b7836c785 100644
--- a/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx
+++ b/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx
@@ -5,7 +5,7 @@ import * as stylesImport from './Overviews.module.scss';
 const styles: any = stylesImport;
 
 export class ComponentsPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <PageHeader pageTitle='Components' backgroundColor='#038387' />
diff --git a/apps/fabric-website/src/pages/Overviews/StylesPage.tsx b/apps/fabric-website/src/pages/Overviews/StylesPage.tsx
index e1351d495aba6..ac995196cf9c7 100644
--- a/apps/fabric-website/src/pages/Overviews/StylesPage.tsx
+++ b/apps/fabric-website/src/pages/Overviews/StylesPage.tsx
@@ -5,7 +5,7 @@ import * as stylesImport from './Overviews.module.scss';
 const styles: any = stylesImport;
 
 export class StylesPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <PageHeader pageTitle='Styles' backgroundColor='#006f94' />
diff --git a/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx b/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx
index cfc7cbd4d1046..352163683d80f 100644
--- a/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx
+++ b/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx
@@ -6,7 +6,7 @@ const styles: any = stylesImport;
 const pageStyles: any = require('../PageStyles.module.scss');
 
 export class ResourcesPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ pageStyles.basePage }>
         <PageHeader
diff --git a/apps/fabric-website/src/pages/Styles/AnimationsPage/AnimationsPage.tsx b/apps/fabric-website/src/pages/Styles/AnimationsPage/AnimationsPage.tsx
index e6d5bd33c7076..0d0418e344726 100644
--- a/apps/fabric-website/src/pages/Styles/AnimationsPage/AnimationsPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/AnimationsPage/AnimationsPage.tsx
@@ -7,7 +7,7 @@ const pageStyles: any = require('../../PageStyles.module.scss');
 const animationsData = require('../../../data/animations.json');
 
 export class AnimationsPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ pageStyles.basePage }>
         <PageHeader
diff --git a/apps/fabric-website/src/pages/Styles/BrandIconsPage/BrandIconsPage.tsx b/apps/fabric-website/src/pages/Styles/BrandIconsPage/BrandIconsPage.tsx
index 3e6e62ce10b04..956e39abf262e 100644
--- a/apps/fabric-website/src/pages/Styles/BrandIconsPage/BrandIconsPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/BrandIconsPage/BrandIconsPage.tsx
@@ -15,7 +15,7 @@ const documentIconsData = require('../../../data/brand-icons-documents.json');
 const monochromeIconsData = require('../../../data/brand-icons-monochrome.json');
 
 export class BrandIconsPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     let productIcons = productIconsData;
     let documentIcons = documentIconsData;
 
diff --git a/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx b/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx
index 62125bd95e092..37c8d07121183 100644
--- a/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx
@@ -13,7 +13,7 @@ const neutralColorsData = require('../../../data/colors-neutral.json');
 const themeColorsData = require('../../../data/colors-theme.json');
 
 export class ColorsPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ pageStyles.basePage }>
         <PageHeader
diff --git a/apps/fabric-website/src/pages/Styles/IconsPage/IconsPage.tsx b/apps/fabric-website/src/pages/Styles/IconsPage/IconsPage.tsx
index 3a754649c6704..194928696fcbe 100644
--- a/apps/fabric-website/src/pages/Styles/IconsPage/IconsPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/IconsPage/IconsPage.tsx
@@ -10,7 +10,7 @@ const pageStyles: any = require('../../PageStyles.module.scss');
 const iconData = require('../../../../node_modules/office-ui-fabric-core/src/data/icons.json');
 
 export class IconsPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ css(pageStyles.basePage, styles.iconsPage) }>
         <PageHeader
diff --git a/apps/fabric-website/src/pages/Styles/LayoutPage/LayoutPage.tsx b/apps/fabric-website/src/pages/Styles/LayoutPage/LayoutPage.tsx
index f4b291598e0aa..af05182284fc0 100644
--- a/apps/fabric-website/src/pages/Styles/LayoutPage/LayoutPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/LayoutPage/LayoutPage.tsx
@@ -10,7 +10,7 @@ const visibilityData = require('../../../data/layout-visibility.json');
 const breakpointsData = require('../../../data/responsive-breakpoints.json');
 
 export class LayoutPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ pageStyles.basePage }>
         <PageHeader
diff --git a/apps/fabric-website/src/pages/Styles/LocalizationPage/LocalizationPage.tsx b/apps/fabric-website/src/pages/Styles/LocalizationPage/LocalizationPage.tsx
index 7530fc307fb06..bd9a9ef31b68c 100644
--- a/apps/fabric-website/src/pages/Styles/LocalizationPage/LocalizationPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/LocalizationPage/LocalizationPage.tsx
@@ -10,7 +10,7 @@ const directionalIconsData = require('../../../data/directional-icons.json');
 const localizedFontsData = require('../../../data/localized-fonts.json');
 
 export class LocalizationPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ pageStyles.basePage }>
         <PageHeader
diff --git a/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx b/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx
index e69897d0ad143..2d4dea3c8b7a5 100644
--- a/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx
@@ -4,7 +4,7 @@ import { ThemeGeneratorPage } from 'office-ui-fabric-react/lib/components/ThemeG
 const pageStyles: any = require('../../PageStyles.module.scss');
 
 export class ThemeGeneratorToolPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div
         className={ pageStyles.basePage }
diff --git a/apps/fabric-website/src/pages/Styles/TypographyPage/TypographyPage.tsx b/apps/fabric-website/src/pages/Styles/TypographyPage/TypographyPage.tsx
index 19d6955bd429b..285ee97d20aae 100644
--- a/apps/fabric-website/src/pages/Styles/TypographyPage/TypographyPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/TypographyPage/TypographyPage.tsx
@@ -11,7 +11,7 @@ const typeSizeData = require('../../../data/type-sizes.json');
 const typeWeightData = require('../../../data/type-weights.json');
 
 export class TypographyPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ css(pageStyles.basePage, styles.typographyPage) }>
         <PageHeader
diff --git a/apps/fabric-website/src/pages/Styles/UtilitiesPage/UtilitiesPage.tsx b/apps/fabric-website/src/pages/Styles/UtilitiesPage/UtilitiesPage.tsx
index 8f92a49d61ab0..0b3b58eb528b3 100644
--- a/apps/fabric-website/src/pages/Styles/UtilitiesPage/UtilitiesPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/UtilitiesPage/UtilitiesPage.tsx
@@ -6,7 +6,7 @@ const pageStyles: any = require('../../PageStyles.module.scss');
 const utilitiesData = require('../../../data/utilities.json');
 
 export class UtilitiesPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ pageStyles.basePage }>
         <PageHeader pageTitle='Utilities' backgroundColor='#006f94' />
diff --git a/apps/fabric-website/src/root.tsx b/apps/fabric-website/src/root.tsx
index ed574ac555f43..50406003b832d 100644
--- a/apps/fabric-website/src/root.tsx
+++ b/apps/fabric-website/src/root.tsx
@@ -59,7 +59,7 @@ function _hasAnchorLink(path: string): boolean {
   return (path.match(/#/g) || []).length > 1;
 }
 
-function _extractAnchorLink(path) {
+function _extractAnchorLink(path): string {
   let split = path.split('#');
   let cleanedSplit = split.filter((value) => {
     if (value === '') {
@@ -136,7 +136,7 @@ if (isReady) {
 
 window.onunload = _onUnload;
 
-function addCSSToHeader(fileName: string) {
+function addCSSToHeader(fileName: string): void {
   let headEl = document.head;
   let linkEl = document.createElement('link');
 
diff --git a/apps/fabric-website/src/utilities/data.ts b/apps/fabric-website/src/utilities/data.ts
index 0966eb30aff80..0cdf67f593ad0 100644
--- a/apps/fabric-website/src/utilities/data.ts
+++ b/apps/fabric-website/src/utilities/data.ts
@@ -5,9 +5,9 @@ const LOREM_IPSUM = ('Lorem ipsum dolor sit amet, consectetur adipiscing elit, s
   'mollit anim id est laborum').split(' ');
 
 const DATA = {
-  'color' : [ 'red', 'blue', 'green', 'yellow' ],
-  'shape' : [ 'circle', 'square', 'triangle' ],
-  'location' : [ 'Seattle', 'New York', 'Chicago', 'Los Angeles', 'Portland' ]
+  'color': ['red', 'blue', 'green', 'yellow'],
+  'shape': ['circle', 'square', 'triangle'],
+  'location': ['Seattle', 'New York', 'Chicago', 'Los Angeles', 'Portland']
 };
 
 export function createListItems(count: number, startIndex = 0): any {
@@ -17,7 +17,7 @@ export function createListItems(count: number, startIndex = 0): any {
     let aspectRatio = width / height;
 
     return {
-      thumbnail: `//placekitten.com/${ Math.round(75 * aspectRatio) }/${ 75 }`,
+      thumbnail: `//placekitten.com/${Math.round(75 * aspectRatio)}/${75}`,
       key: 'item-' + (index + startIndex) + ' ' + lorem(4),
       name: lorem(5),
       description: lorem(10 + Math.round(Math.random() * 50)),
@@ -42,7 +42,7 @@ export function isGroupable(key: string): boolean {
     key === 'location';
 }
 
-function _randWord(array: string[]) {
+function _randWord(array: string[]): string {
   let index = Math.floor(Math.random() * array.length);
   return array[index];
 }
diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
index a608cefca9924..c3775d2408632 100644
--- a/apps/ssr-tests/package.json
+++ b/apps/ssr-tests/package.json
@@ -21,10 +21,10 @@
     "@types/mocha": "2.2.39",
     "@types/webpack-env": "1.13.0",
     "mocha": "^3.3.0",
-    "office-ui-fabric-react": ">=5.81.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.85.0 <6.0.0",
     "raw-loader": "^0.5.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
     "webpack": "^4.2.0"
   },
   "dependencies": {
diff --git a/apps/test-bundle-button/index.html b/apps/test-bundle-button/index.html
index 1c5cb1fc4a2a5..46f4e4fea7a0b 100644
--- a/apps/test-bundle-button/index.html
+++ b/apps/test-bundle-button/index.html
@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" user-scalable="no" />
 
   <title>Button example</title>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.development.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.development.js"></script>
 
 </head>
 
diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json
index c2a0f5e246df6..ccb4a9b9ce860 100644
--- a/apps/test-bundle-button/package.json
+++ b/apps/test-bundle-button/package.json
@@ -16,8 +16,8 @@
     "start": "node ../../scripts/start.js"
   },
   "devDependencies": {
-    "@types/react": "16.0.25",
-    "@types/react-dom": "16.0.3",
+    "@types/react": "16.3.10",
+    "@types/react-dom": "16.0.5",
     "@types/webpack-env": "1.13.0",
     "@types/prop-types": "15.5.2",
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0"
@@ -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.81.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.85.0 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/apps/todo-app/index.html b/apps/todo-app/index.html
index 3932e81f74413..fb0fd203a4a91 100644
--- a/apps/todo-app/index.html
+++ b/apps/todo-app/index.html
@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <title>Todo App</title>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script>
 </head>
 
 <body>
diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json
index 587e2647ad3fc..05bff760addb7 100644
--- a/apps/todo-app/package.json
+++ b/apps/todo-app/package.json
@@ -10,8 +10,8 @@
   },
   "devDependencies": {
     "@types/es6-promise": "0.0.32",
-    "@types/react": "16.0.25",
-    "@types/react-dom": "16.0.3",
+    "@types/react": "16.3.10",
+    "@types/react-dom": "16.0.5",
     "@types/webpack-env": "1.13.0",
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0"
   },
@@ -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.81.1 <6.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "typescript": "2.7.2",
+    "office-ui-fabric-react": ">=5.85.0 <6.0.0",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "typescript": "2.8.1",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/apps/todo-app/src/components/TodoForm.tsx b/apps/todo-app/src/components/TodoForm.tsx
index c381a5fd8980a..57a5d51148bab 100644
--- a/apps/todo-app/src/components/TodoForm.tsx
+++ b/apps/todo-app/src/components/TodoForm.tsx
@@ -81,7 +81,7 @@ export default class TodoForm extends BaseComponent<ITodoFormProps, ITodoFormSta
   private _onSubmit = (event: React.FormEvent<HTMLElement>): void => {
     event.preventDefault();
 
-    const { value: textField } = this._textField;
+    const { current: textField } = this._textField;
     if (!textField) {
       return;
     }
diff --git a/apps/vr-tests/index.html b/apps/vr-tests/index.html
index 3932e81f74413..fb0fd203a4a91 100644
--- a/apps/vr-tests/index.html
+++ b/apps/vr-tests/index.html
@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <title>Todo App</title>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script>
 </head>
 
 <body>
diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index 291c49ae4ae73..b440aed208348 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -13,8 +13,8 @@
   "devDependencies": {
     "@storybook/addon-options": "=3.2.3",
     "@storybook/react": "^3.2.3",
-    "@types/react": "16.0.25",
-    "@types/react-dom": "16.0.3",
+    "@types/react": "16.3.10",
+    "@types/react-dom": "16.0.5",
     "@types/storybook__react": "3.0.5",
     "css-loader": "^0.28.7",
     "file-loader": "^0.11.1",
@@ -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.11.1",
+    "screener-storybook": "^0.12.5",
     "screener-runner": "^0.6.19",
     "storybook-readme": "=3.0.6"
   },
   "dependencies": {
-    "office-ui-fabric-react": ">=5.81.1 <6.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "typescript": "2.7.2",
+    "office-ui-fabric-react": ">=5.85.0 <6.0.0",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "typescript": "2.8.1",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/ivdijan-onRenderInitials_2018-04-20-13-44.json b/common/changes/office-ui-fabric-react/ivdijan-onRenderInitials_2018-04-20-13-44.json
new file mode 100644
index 0000000000000..9afcec63ee64a
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/ivdijan-onRenderInitials_2018-04-20-13-44.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Propagate onRenderInitials correctly from Persona to PersonaCoin",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "ivdijan@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json
index dbd254d3001e1..bb7886a232192 100644
--- a/common/config/rush/npm-shrinkwrap.json
+++ b/common/config/rush/npm-shrinkwrap.json
@@ -88,14 +88,14 @@
     },
     "@rush-temp/build": {
       "version": "file:projects/build.tgz",
-      "integrity": "sha1-DK1ColuW1Q4JQCLR2jSXntHFIfY=",
+      "integrity": "sha1-T3Z8HKKujQsa0eU2LZzotfg3L4g=",
       "requires": {
         "@microsoft/api-extractor": "4.3.7",
         "@microsoft/load-themed-styles": "1.7.50",
         "@microsoft/loader-load-themed-styles": "1.7.32",
         "autoprefixer": "7.2.6",
         "bundlesize": "0.15.3",
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "command-line-args": "4.0.7",
         "cpx": "1.5.0",
         "css-loader": "0.28.11",
@@ -109,7 +109,7 @@
         "node-sass": "4.8.3",
         "open": "0.0.5",
         "postcss": "6.0.21",
-        "postcss-loader": "2.1.3",
+        "postcss-loader": "2.1.4",
         "postcss-modules": "0.8.0",
         "raf": "3.4.0",
         "raw-loader": "0.5.1",
@@ -120,7 +120,7 @@
         "ts-loader": "4.2.0",
         "tslint": "5.9.1",
         "tslint-microsoft-contrib": "5.0.3",
-        "typescript": "2.7.2",
+        "typescript": "2.8.1",
         "webpack": "4.5.0",
         "webpack-bundle-analyzer": "2.11.1",
         "webpack-cli": "2.0.14",
@@ -502,7 +502,7 @@
             "acorn-dynamic-import": "3.0.0",
             "ajv": "6.4.0",
             "ajv-keywords": "3.1.0",
-            "chrome-trace-event": "0.1.2",
+            "chrome-trace-event": "0.1.3",
             "enhanced-resolve": "4.0.0",
             "eslint-scope": "3.7.1",
             "loader-runner": "2.3.0",
@@ -510,7 +510,7 @@
             "memory-fs": "0.4.1",
             "micromatch": "3.1.10",
             "mkdirp": "0.5.1",
-            "neo-async": "2.5.0",
+            "neo-async": "2.5.1",
             "node-libs-browser": "2.1.0",
             "schema-utils": "0.4.5",
             "tapable": "1.0.0",
@@ -548,7 +548,7 @@
             "sockjs-client": "1.1.4",
             "spdy": "3.4.7",
             "strip-ansi": "3.0.1",
-            "supports-color": "5.3.0",
+            "supports-color": "5.4.0",
             "webpack-dev-middleware": "3.1.2",
             "webpack-log": "1.2.0",
             "yargs": "11.0.0"
@@ -595,28 +595,28 @@
     },
     "@rush-temp/example-app-base": {
       "version": "file:projects/example-app-base.tgz",
-      "integrity": "sha1-mzqaG3bInaTfpy2r2OK0zxtz4z4=",
+      "integrity": "sha1-DkUcfRVaa8xwsxbZRsRwvrr9KbU=",
       "requires": {
         "@types/es6-promise": "0.0.32",
         "@types/highlight.js": "9.12.2",
-        "@types/react": "16.0.25",
-        "@types/react-dom": "16.0.3",
+        "@types/react": "16.3.10",
+        "@types/react-dom": "16.0.5",
         "@types/webpack-env": "1.13.0",
         "es6-map": "0.1.5",
         "es6-promise": "4.2.4",
         "es6-weak-map": "2.0.2",
         "highlight.js": "9.12.0",
         "markdown-to-jsx": "6.6.1",
-        "office-ui-fabric-react": "5.80.0",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "office-ui-fabric-react": "5.82.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "react-syntax-highlighter": "7.0.2",
         "tslib": "1.9.0"
       }
     },
     "@rush-temp/experiments": {
       "version": "file:projects/experiments.tgz",
-      "integrity": "sha1-n1XrrabkK4C8Je/zMVeZkaXvveM=",
+      "integrity": "sha1-daarXQdKu4kkuBeXhStW7KW9YK8=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/enzyme": "3.1.5",
@@ -624,9 +624,9 @@
         "@types/es6-promise": "0.0.32",
         "@types/jest": "21.1.8",
         "@types/prop-types": "15.5.2",
-        "@types/react": "16.0.25",
+        "@types/react": "16.3.10",
         "@types/react-addons-test-utils": "0.14.18",
-        "@types/react-dom": "16.0.3",
+        "@types/react-dom": "16.0.5",
         "@types/react-test-renderer": "16.0.1",
         "@types/resemblejs": "1.3.28",
         "@types/sinon": "2.2.2",
@@ -635,24 +635,24 @@
         "enzyme-adapter-react-16": "1.1.1",
         "es6-weak-map": "2.0.2",
         "prop-types": "15.6.1",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "react-highlight": "0.10.0",
-        "react-test-renderer": "16.3.1",
+        "react-test-renderer": "16.3.2",
         "sinon": "4.5.0",
         "tslib": "1.9.0"
       }
     },
     "@rush-temp/fabric-website": {
       "version": "file:projects/fabric-website.tgz",
-      "integrity": "sha1-z9zYMqFmDZavRRfxeO5hOEncG7A=",
+      "integrity": "sha1-a1mHbvDvXnWaXuyFJEIvClcuHpI=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/es6-promise": "0.0.32",
         "@types/node": "8.0.26",
         "@types/prop-types": "15.5.2",
-        "@types/react": "16.0.25",
-        "@types/react-dom": "16.0.3",
+        "@types/react": "16.3.10",
+        "@types/react-dom": "16.0.5",
         "@types/resemblejs": "1.3.28",
         "@types/webpack-env": "1.13.0",
         "color-functions": "1.1.0",
@@ -661,8 +661,8 @@
         "highlight.js": "9.12.0",
         "json-loader": "0.5.7",
         "office-ui-fabric-core": "9.6.0",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "react-highlight": "0.10.0",
         "tslib": "1.9.0",
         "write-file-webpack-plugin": "4.2.0"
@@ -670,32 +670,32 @@
     },
     "@rush-temp/file-type-icons": {
       "version": "file:projects/file-type-icons.tgz",
-      "integrity": "sha1-4UiegaJadsdU6rgx9sAoRpIBEf8=",
+      "integrity": "sha1-Yn+JPy99YoMSgbFnw5ID2WktWNs=",
       "requires": {
-        "@types/react": "16.0.25",
-        "@types/react-dom": "16.0.3",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "@types/react": "16.3.10",
+        "@types/react-dom": "16.0.5",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "tslib": "1.9.0"
       }
     },
     "@rush-temp/icons": {
       "version": "file:projects/icons.tgz",
-      "integrity": "sha1-+vuz/OdKJ0ifwR7pY/XYZ+MhEg0=",
+      "integrity": "sha1-pVQHHai8Itvqt9Yu8AHEDXB1BRs=",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@rush-temp/jest-serializer-merge-styles": {
       "version": "file:projects/jest-serializer-merge-styles.tgz",
-      "integrity": "sha1-TMlpUDb8hYpqunQTlY1iJ+kJL5M=",
+      "integrity": "sha1-n+RTd+E26yjhauT284rh4gXLfzo=",
       "requires": {
         "@types/jest": "21.1.8"
       }
     },
     "@rush-temp/merge-styles": {
       "version": "file:projects/merge-styles.tgz",
-      "integrity": "sha1-33wnGujsSOIWiCMoJa4k//NYbDw=",
+      "integrity": "sha1-KQC+5a/Yux9UOIoWq7SnCXAGbYI=",
       "requires": {
         "@types/jest": "21.1.8",
         "tslib": "1.9.0"
@@ -703,7 +703,7 @@
     },
     "@rush-temp/office-ui-fabric-react": {
       "version": "file:projects/office-ui-fabric-react.tgz",
-      "integrity": "sha1-CK24mttDldAqgBrdHrygr5Cs+8M=",
+      "integrity": "sha1-15D4XJwcbRk65so2L5a1u+DEUCU=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/enzyme": "3.1.5",
@@ -711,8 +711,8 @@
         "@types/es6-promise": "0.0.32",
         "@types/jest": "21.1.8",
         "@types/prop-types": "15.5.2",
-        "@types/react": "16.0.25",
-        "@types/react-dom": "16.0.3",
+        "@types/react": "16.3.10",
+        "@types/react-dom": "16.0.5",
         "@types/react-test-renderer": "16.0.1",
         "@types/resemblejs": "1.3.28",
         "@types/sinon": "2.2.2",
@@ -725,10 +725,10 @@
         "highlight.js": "9.12.0",
         "office-ui-fabric-core": "9.6.0",
         "prop-types": "15.6.1",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "react-highlight": "0.10.0",
-        "react-test-renderer": "16.3.1",
+        "react-test-renderer": "16.3.2",
         "resemblejs": "2.2.6",
         "sinon": "4.5.0",
         "tslib": "1.9.0"
@@ -736,14 +736,14 @@
     },
     "@rush-temp/office-ui-fabric-react-tslint": {
       "version": "file:projects/office-ui-fabric-react-tslint.tgz",
-      "integrity": "sha1-WG5UESr1Ffk13PQG/PMp0jJPeUc=",
+      "integrity": "sha1-Lpw29kpo8XYUjrbjk3AiOmKBc2I=",
       "requires": {
         "tslint-react": "3.5.1"
       }
     },
     "@rush-temp/ssr-tests": {
       "version": "file:projects/ssr-tests.tgz",
-      "integrity": "sha1-vWutbnoo/7XgmR78LljUDDIPmFg=",
+      "integrity": "sha1-ApHvumLVdD5xovN/qT2v5tac+0M=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/es6-promise": "0.0.32",
@@ -752,8 +752,8 @@
         "es6-promise": "4.2.4",
         "mocha": "3.5.3",
         "raw-loader": "0.5.1",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "tslib": "1.9.0",
         "webpack": "4.5.0"
       },
@@ -1039,7 +1039,7 @@
             "acorn-dynamic-import": "3.0.0",
             "ajv": "6.4.0",
             "ajv-keywords": "3.1.0",
-            "chrome-trace-event": "0.1.2",
+            "chrome-trace-event": "0.1.3",
             "enhanced-resolve": "4.0.0",
             "eslint-scope": "3.7.1",
             "loader-runner": "2.3.0",
@@ -1047,7 +1047,7 @@
             "memory-fs": "0.4.1",
             "micromatch": "3.1.10",
             "mkdirp": "0.5.1",
-            "neo-async": "2.5.0",
+            "neo-async": "2.5.1",
             "node-libs-browser": "2.1.0",
             "schema-utils": "0.4.5",
             "tapable": "1.0.0",
@@ -1060,73 +1060,72 @@
     },
     "@rush-temp/styling": {
       "version": "file:projects/styling.tgz",
-      "integrity": "sha1-rQykPDUcHw+sWmX5GkCZjWYWgi8=",
+      "integrity": "sha1-oCh2p/rfJ1hLnsJ+kA4etUwi93s=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/jest": "21.1.8",
-        "@types/react": "16.0.25",
+        "@types/react": "16.3.10",
         "@types/webpack-env": "1.13.0",
         "es6-map": "0.1.5",
         "es6-weak-map": "2.0.2",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "tslib": "1.9.0"
       }
     },
     "@rush-temp/test-bundle-button": {
       "version": "file:projects/test-bundle-button.tgz",
-      "integrity": "sha1-ZffflitaT3ZCsM7IZCJofZxarwo=",
+      "integrity": "sha1-DEKsr3vPRqOJSyHa++oqhlnkt9Q=",
       "requires": {
         "@types/prop-types": "15.5.2",
-        "@types/react": "16.0.25",
-        "@types/react-dom": "16.0.3",
+        "@types/react": "16.3.10",
+        "@types/react-dom": "16.0.5",
         "@types/webpack-env": "1.13.0",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "tslib": "1.9.0"
       }
     },
     "@rush-temp/todo-app": {
       "version": "file:projects/todo-app.tgz",
-      "integrity": "sha1-x939qwrOfgjkqjaFAMzyMY8D9cc=",
+      "integrity": "sha1-g+j/qa8VUW7jubOkemtdrdiWsRM=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/es6-promise": "0.0.32",
-        "@types/react": "16.0.25",
-        "@types/react-dom": "16.0.3",
+        "@types/react": "16.3.10",
+        "@types/react-dom": "16.0.5",
         "@types/webpack-env": "1.13.0",
         "es6-promise": "4.2.4",
         "immutability-helper": "2.6.6",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "tslib": "1.9.0",
-        "typescript": "2.7.2"
+        "typescript": "2.8.1"
       }
     },
     "@rush-temp/utilities": {
       "version": "file:projects/utilities.tgz",
-      "integrity": "sha1-pvAT2xnO05UmlRpI7Zly47XNZOU=",
+      "integrity": "sha1-/OUe7tPLUU+ih/KZ/03w8cRa5L0=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.50",
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
         "@types/jest": "21.1.8",
         "@types/prop-types": "15.5.2",
-        "@types/react": "16.0.25",
-        "@types/react-dom": "16.0.3",
+        "@types/react": "16.3.10",
+        "@types/react-dom": "16.0.5",
         "@types/sinon": "2.2.2",
         "enzyme": "3.3.0",
         "enzyme-adapter-react-16": "1.1.1",
         "prop-types": "15.6.1",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "sinon": "4.5.0",
         "tslib": "1.9.0"
       }
     },
     "@rush-temp/variants": {
       "version": "file:projects/variants.tgz",
-      "integrity": "sha1-7XU+B+JPbV7J2rPWZfxIyyXP1UQ=",
+      "integrity": "sha1-8x6mkzR8vS0Ro1fs0Ctch++yuY8=",
       "requires": {
         "@types/jest": "21.1.8",
         "tslib": "1.9.0"
@@ -1134,26 +1133,26 @@
     },
     "@rush-temp/vr-tests": {
       "version": "file:projects/vr-tests.tgz",
-      "integrity": "sha1-RF38TZcnr6jscnhihDb+xO2Lbg0=",
+      "integrity": "sha1-km3rck0pwUcIkwCcmzEE5OtXAtU=",
       "requires": {
         "@storybook/addon-options": "3.2.3",
-        "@storybook/react": "3.4.0",
-        "@types/react": "16.0.25",
-        "@types/react-dom": "16.0.3",
+        "@storybook/react": "3.4.1",
+        "@types/react": "16.3.10",
+        "@types/react-dom": "16.0.5",
         "@types/storybook__react": "3.0.5",
         "awesome-typescript-loader": "3.5.0",
         "css-loader": "0.28.11",
         "file-loader": "0.11.2",
-        "postcss-loader": "2.1.3",
+        "postcss-loader": "2.1.4",
         "raw-loader": "0.5.1",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "screener-runner": "0.6.19",
-        "screener-storybook": "0.11.5",
+        "screener-storybook": "0.12.5",
         "storybook-readme": "3.0.6",
         "style-loader": "0.19.1",
         "tslib": "1.9.0",
-        "typescript": "2.7.2"
+        "typescript": "2.8.1"
       }
     },
     "@sindresorhus/is": {
@@ -1170,15 +1169,15 @@
       }
     },
     "@storybook/addon-actions": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-3.4.0.tgz",
-      "integrity": "sha512-Nsc80JisODvbvyHPR+OEnrPMWkdBpu5W2CmzGgKeVnsov8CGw7oeQIOmLY7zhX2aEof6plidUgCoU5p3Uh92wA==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-3.4.1.tgz",
+      "integrity": "sha512-mCpEbzex7WYkyIHn9QUnIz83IwMO9Zi4D2LC6c/0u42HzQdkmTJWnyEg4NY5Az/1WZZTtwe9aep/pLc+Zzokdw==",
       "requires": {
-        "@storybook/components": "3.4.0",
+        "@storybook/components": "3.4.1",
         "babel-runtime": "6.26.0",
         "deep-equal": "1.0.1",
         "glamor": "2.20.40",
-        "glamorous": "4.12.2",
+        "glamorous": "4.12.3",
         "global": "4.3.2",
         "make-error": "1.3.4",
         "prop-types": "15.6.1",
@@ -1187,11 +1186,11 @@
       }
     },
     "@storybook/addon-links": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-3.4.0.tgz",
-      "integrity": "sha512-cLg/hX6dTeRXApmL0XcDEMDzFGZMcUJIXgl5bsNCSC9geKNzDHz6LdWeLQAHuQgaVxZJ1wmS1ZjYySGpIj3gEA==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-3.4.1.tgz",
+      "integrity": "sha512-yOVStezQO/VTTlxoqDdVu6CCI2kHBNdLD6lY9w1ly20b6J4hg2Cgy/d/VyPUKfM3fTkdAHeBFayg41KmR9lrMQ==",
       "requires": {
-        "@storybook/components": "3.4.0",
+        "@storybook/components": "3.4.1",
         "babel-runtime": "6.26.0",
         "global": "4.3.2",
         "prop-types": "15.6.1"
@@ -1202,57 +1201,57 @@
       "resolved": "https://registry.npmjs.org/@storybook/addon-options/-/addon-options-3.2.3.tgz",
       "integrity": "sha1-6jdA0onUKc52fpaZvzpkfddBWS0=",
       "requires": {
-        "@storybook/addons": "3.4.0"
+        "@storybook/addons": "3.4.1"
       }
     },
     "@storybook/addons": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-3.4.0.tgz",
-      "integrity": "sha512-l/UAyvjkmWwMPOUBRNBLDeueVHdUg04rCXzRAO/mqAyg+HorOqIVCmOMccgR9LXjKYGf+OBWkv0DZIj9a5I41g=="
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-3.4.1.tgz",
+      "integrity": "sha512-WFHwVnJq6zItotj89fGFtEJ/MPdbUaOXu0QsNUbM1Muqw/kVX7gVAwXDPllBJ5y1/42aAzsJCQ/WMdrD2M9Tcg=="
     },
     "@storybook/channel-postmessage": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-3.4.0.tgz",
-      "integrity": "sha512-HQldvfSp/LiqD8Ey3uavkmKqEQEmlLQW3Y+FWVzqNInYrONVDCf/oGbpqY6m9T9gKzXo7vrlSgDx9UYKeHE3Ww==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-3.4.1.tgz",
+      "integrity": "sha512-3LhieYOBJFPi5JRFUCc0axSj28GWAJjnXSNKRsWoRy+oSnj/Ux56ywkGLuh20Mze9NoA45MIKvtrsTPq2UiEkw==",
       "requires": {
-        "@storybook/channels": "3.4.0",
+        "@storybook/channels": "3.4.1",
         "global": "4.3.2",
         "json-stringify-safe": "5.0.1"
       }
     },
     "@storybook/channels": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-3.4.0.tgz",
-      "integrity": "sha512-C3lBo33C91/yQjJjQuaRjdjh/xntQ5q+QhUlU1N4IdQxykHu455C3f8K/mWDAGK7MFF+x7Pq1OLQ5eoJgSd67g=="
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-3.4.1.tgz",
+      "integrity": "sha512-D8q64LsAmjZ+MeMUr/j0r+a2M9mm5y1yXBGkbEzucI2e48RP4zcc9ZVNB8yqCDPwtQLDU6w2idFWcaJaZNHXQw=="
     },
     "@storybook/client-logger": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-3.4.0.tgz",
-      "integrity": "sha512-7XhNeHdLyYsyxvm8g1eZeGqlT+85CRpDJZ55JkNuPikVsVpoXALCUCKC1heyUQ74qvMeTSbo8Ck2yOxb35Uyrg=="
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-3.4.1.tgz",
+      "integrity": "sha512-wGIdo9GxxZ8iRzjTD9IrOk5UycOm8cnxJfe1Pfw9G5pisthASsxBYeqSVI44K9WchV1fMSRZ4AKUPmpoJ1H+ww=="
     },
     "@storybook/components": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-3.4.0.tgz",
-      "integrity": "sha512-qpozgneXRGppAcD4Nx78nFTyRj6GlSrtLmAwuaRzM4oN0lYDBuEvDSkgeDYmNcQuHkOUf6hsCLJrl/M0KdvaSA==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-3.4.1.tgz",
+      "integrity": "sha512-STu4EkkUWZgMb/Cbpdf3YUKcQVTqIpg+kEP9zG7519/Eg0OuBgRZ4qRr5jiDbLQMsaGS8oxwjhCoHufG903oZw==",
       "requires": {
         "glamor": "2.20.40",
-        "glamorous": "4.12.2",
+        "glamorous": "4.12.3",
         "prop-types": "15.6.1"
       }
     },
     "@storybook/core": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-3.4.0.tgz",
-      "integrity": "sha512-rwIoOrLsSSArc7V6XDBP0jeDwmPAg0chPmcH2ygkbPv2GE8LuJ6J56Q83xvbShOhTlqANFf4v8FTO9Fq9tbb8w==",
-      "requires": {
-        "@storybook/addons": "3.4.0",
-        "@storybook/channel-postmessage": "3.4.0",
-        "@storybook/client-logger": "3.4.0",
-        "@storybook/node-logger": "3.4.0",
-        "@storybook/ui": "3.4.0",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-LGfJFaOjKKP2WQfVMcjxJ+Abv1DBJYmWcMXF1w5nt3sua/GYcidgFVj5txu6Ib44UZubp1iXXQAKr35T+iSNOg==",
+      "requires": {
+        "@storybook/addons": "3.4.1",
+        "@storybook/channel-postmessage": "3.4.1",
+        "@storybook/client-logger": "3.4.1",
+        "@storybook/node-logger": "3.4.1",
+        "@storybook/ui": "3.4.1",
         "autoprefixer": "7.2.6",
         "babel-runtime": "6.26.0",
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "commander": "2.15.1",
         "css-loader": "0.28.11",
         "dotenv": "5.0.1",
@@ -1262,18 +1261,16 @@
         "global": "4.3.2",
         "json-loader": "0.5.7",
         "postcss-flexbugs-fixes": "3.3.0",
-        "postcss-loader": "2.1.3",
+        "postcss-loader": "2.1.4",
         "prop-types": "15.6.1",
         "qs": "6.5.1",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
         "serve-favicon": "2.5.0",
         "shelljs": "0.8.1",
         "style-loader": "0.20.3",
         "url-loader": "0.6.2",
         "webpack": "3.11.0",
         "webpack-dev-middleware": "1.12.2",
-        "webpack-hot-middleware": "2.22.0"
+        "webpack-hot-middleware": "2.21.2"
       },
       "dependencies": {
         "events": {
@@ -1324,9 +1321,9 @@
       }
     },
     "@storybook/node-logger": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-3.4.0.tgz",
-      "integrity": "sha512-iC1z9ipoHxHGAZXdS6zu+Gxq+wMfmQialWcuExZvol+wdKq57syovoC/NOnFQIhVqYj38GOQH1xZnM8j9UuX7Q==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-3.4.1.tgz",
+      "integrity": "sha512-vnM2+TIubLLsU5pcqydjnbPnska6zYvPSKIOO7lKTsGV0DdmDy7myvUn+oSRPubVyMh8+uno1J+XTHzdRkhsXQ==",
       "requires": {
         "npmlog": "4.1.2"
       }
@@ -1341,18 +1338,18 @@
       }
     },
     "@storybook/react": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-3.4.0.tgz",
-      "integrity": "sha512-pL5iam3uNY+lYVkVwzzY2Ivxm1r/hn8EpCORPEK088yJlI9vM3YoNwaAeAZwYXVz+znyDVHHzo+ax5hfTYUxTQ==",
-      "requires": {
-        "@storybook/addon-actions": "3.4.0",
-        "@storybook/addon-links": "3.4.0",
-        "@storybook/addons": "3.4.0",
-        "@storybook/channel-postmessage": "3.4.0",
-        "@storybook/client-logger": "3.4.0",
-        "@storybook/core": "3.4.0",
-        "@storybook/node-logger": "3.4.0",
-        "@storybook/ui": "3.4.0",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-3.4.1.tgz",
+      "integrity": "sha512-fBeHDwQPmsLcEPjEEDrOzBJMjbcidNms9aAtv8yo+pf8uvLMbe4nOxwt5/goKrj994wpqUrZ0gXXzarcQW59Vg==",
+      "requires": {
+        "@storybook/addon-actions": "3.4.1",
+        "@storybook/addon-links": "3.4.1",
+        "@storybook/addons": "3.4.1",
+        "@storybook/channel-postmessage": "3.4.1",
+        "@storybook/client-logger": "3.4.1",
+        "@storybook/core": "3.4.1",
+        "@storybook/node-logger": "3.4.1",
+        "@storybook/ui": "3.4.1",
         "airbnb-js-shims": "1.4.1",
         "babel-loader": "7.1.4",
         "babel-plugin-macros": "2.2.0",
@@ -1370,7 +1367,7 @@
         "dotenv-webpack": "1.5.5",
         "find-cache-dir": "1.0.0",
         "glamor": "2.20.40",
-        "glamorous": "4.12.2",
+        "glamorous": "4.12.3",
         "global": "4.3.2",
         "html-loader": "0.5.5",
         "html-webpack-plugin": "2.30.1",
@@ -1383,7 +1380,7 @@
         "uglifyjs-webpack-plugin": "1.2.4",
         "util-deprecate": "1.0.2",
         "webpack": "3.11.0",
-        "webpack-hot-middleware": "2.22.0"
+        "webpack-hot-middleware": "2.21.2"
       }
     },
     "@storybook/react-komposer": {
@@ -1418,11 +1415,11 @@
       }
     },
     "@storybook/ui": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-3.4.0.tgz",
-      "integrity": "sha512-fqVCno/Uo6yaohpDfjCx/Q+KjC93jy8+i+6ZSwEjJIDK+1HW1lrhqycv/vV4+OkXRwsG+y2GOw3MVPdXX3f1yA==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-3.4.1.tgz",
+      "integrity": "sha512-OX/mnl3jQwZwt1wltFcmO+8yPJlZgeQ4sksKy/jmMqfnk4GFP+UVmg2KIDYhh6Xl2/H1xi14iAdH9Z36losrpw==",
       "requires": {
-        "@storybook/components": "3.4.0",
+        "@storybook/components": "3.4.1",
         "@storybook/mantra-core": "1.7.2",
         "@storybook/podda": "1.2.3",
         "@storybook/react-komposer": "2.0.4",
@@ -1468,7 +1465,7 @@
       "integrity": "sha512-f1HnxoBnHsK+mcjF6xAofaewv+vPrMtBdxAQuRyO4MltIJV20nf9EVILPBJqfl6/9Gbf9ygbxv4bmwCY9CFsnQ==",
       "requires": {
         "@types/cheerio": "0.22.7",
-        "@types/react": "16.0.25"
+        "@types/react": "16.3.10"
       }
     },
     "@types/enzyme-adapter-react-16": {
@@ -1518,25 +1515,28 @@
       "integrity": "sha512-pQRkAVoxiuUrLq8+CDwiQX4pTCep/PmmNgBbjIwnnsd/HoYjGpR81+FFPE030lvNXgR0haaAU6eoRtztWDE4Xw=="
     },
     "@types/react": {
-      "version": "16.0.25",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.0.25.tgz",
-      "integrity": "sha512-K79zMwWRzQ2db+nPoKpi3gA/KmLo6ZQgT4iO2QPEUdBO7as0PcgrmU9KHYzIO3V6lbD7gRjOM0/nUch6xBfOvQ=="
+      "version": "16.3.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.3.10.tgz",
+      "integrity": "sha512-NGqrP0qhgn8hlFMO3I1w7vwT8KIcdEg1D1AFtYaNBhp1Uo4SZgUpNcbOBfrvgAPRr1nn+Ail/0VoPLI2n4SNMw==",
+      "requires": {
+        "csstype": "2.2.0"
+      }
     },
     "@types/react-addons-test-utils": {
       "version": "0.14.18",
       "resolved": "https://registry.npmjs.org/@types/react-addons-test-utils/-/react-addons-test-utils-0.14.18.tgz",
       "integrity": "sha1-g+EK8dvl7CU1vC3FNz17w7gv3uE=",
       "requires": {
-        "@types/react": "16.0.25"
+        "@types/react": "16.3.10"
       }
     },
     "@types/react-dom": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.3.tgz",
-      "integrity": "sha512-xAvZiGhQlEhjStoKktoai8CelXVFBaSN6JX4vy1UQioRba3c2vum1TGzR0thHoEauZtIwzWg8mos0AHu2ne4jw==",
+      "version": "16.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.5.tgz",
+      "integrity": "sha512-ony2hEYlGXCLWNAWWgbsHR7qVvDbeMRFc5b43+7dhj3n+zXzxz81HV9Yjpc3JD8vLCiwYoSLqFCI6bD0+0zG2Q==",
       "requires": {
         "@types/node": "8.0.26",
-        "@types/react": "16.0.25"
+        "@types/react": "16.3.10"
       }
     },
     "@types/react-test-renderer": {
@@ -1544,7 +1544,7 @@
       "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"
+        "@types/react": "16.3.10"
       }
     },
     "@types/resemblejs": {
@@ -1562,7 +1562,7 @@
       "resolved": "https://registry.npmjs.org/@types/storybook__react/-/storybook__react-3.0.5.tgz",
       "integrity": "sha512-febLx40iQWoQKVaEMpxdzkJnqncPHoRivlilc3JhHJiRuBY1Mqa1yTKcvQ5RiFAYFIuv4x+bRuSIXErk5v41Bg==",
       "requires": {
-        "@types/react": "16.0.25",
+        "@types/react": "16.3.10",
         "@types/webpack-env": "1.13.0"
       }
     },
@@ -1577,40 +1577,39 @@
       "integrity": "sha1-LrHQCl5Ow/pYx2r94S4YK2bcXBw="
     },
     "@uifabric/icons": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.7.0.tgz",
-      "integrity": "sha512-3aYM53nPq+nAftXK3bN6ozjsTon0ms/yn5OW6Ht0fFDrhkx88At1i4rQXNJxECglM37VCAPRHVtb486dRaUZzA==",
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.7.1.tgz",
+      "integrity": "sha512-UwfDU6A0bj/QAdTsO20g9mrKXo3zxvumkBWx0F0sEHn1DF/IQDiq4zYVBjRZ3NikQe2o7koWe3Gb0NR84Qr2Sg==",
       "requires": {
-        "@uifabric/styling": "5.23.0",
+        "@uifabric/styling": "5.23.1",
         "tslib": "1.9.0"
       }
     },
     "@uifabric/merge-styles": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.15.0.tgz",
-      "integrity": "sha512-VwUaVBKbqVbmpcaaKoLbv02B5v7BXhRvsnHOmmnOjSUrKyeZzg1lOwKbk0aoZCpH57lWkdf0RGMZN66imfyaSg==",
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.15.1.tgz",
+      "integrity": "sha512-Uk9+80TEXlAYOE3eqRUPMnGYG8XMLYOpv3lSPcBK3suS7nBFWJdwpQlbuCMyCGVlxKPhHGOAaUU6bKgRs02+Gw==",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@uifabric/styling": {
-      "version": "5.23.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.23.0.tgz",
-      "integrity": "sha512-X/hye1euUUosGEPWY878yiyfIIvkw9YCADfU6N0slMcmb205ePbCPUs8ehgVDnZ97zdGHn8cYweK5aO+UTh6SA==",
+      "version": "5.23.1",
+      "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.23.1.tgz",
+      "integrity": "sha512-u+DPLjz9YJIsxexqEogLcrHgvIvtz92sUKqlGHpVrcQdYuwD+wMmxdg/Bem671aXgGywfH5ypplXJ8+4Lix3qQ==",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
-        "@uifabric/merge-styles": "5.15.0",
-        "@uifabric/utilities": "5.23.0",
+        "@uifabric/merge-styles": "5.15.1",
+        "@uifabric/utilities": "5.24.0",
         "tslib": "1.9.0"
       }
     },
     "@uifabric/utilities": {
-      "version": "5.23.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.23.0.tgz",
-      "integrity": "sha512-qd1V2ZofVeTFZsNQ2+RmUSSIbxLBg1MmjhJQWeeXPZ3DexJ7aNlL+RgW6uUKSlzbq5F9WFgTA7SCRtQmBQdHpw==",
+      "version": "5.24.0",
+      "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.24.0.tgz",
+      "integrity": "sha512-SiAfpvncj68RrxvceBCGr1QtFXXVc7gtd2RBMkoLj3GTYSum5ZywMEcksa4BHyyY5haJYvQspkFiV9sIPDtX2w==",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.50",
-        "@uifabric/merge-styles": "5.15.0",
+        "@uifabric/merge-styles": "5.15.1",
         "prop-types": "15.6.1",
         "tslib": "1.9.0"
       }
@@ -1940,7 +1939,7 @@
       "requires": {
         "bn.js": "4.11.8",
         "inherits": "2.0.3",
-        "minimalistic-assert": "1.0.0"
+        "minimalistic-assert": "1.0.1"
       }
     },
     "assert": {
@@ -2015,7 +2014,7 @@
       "integrity": "sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==",
       "requires": {
         "browserslist": "2.11.3",
-        "caniuse-lite": "1.0.30000827",
+        "caniuse-lite": "1.0.30000830",
         "normalize-range": "0.1.2",
         "num2fraction": "1.2.2",
         "postcss": "6.0.21",
@@ -2027,7 +2026,7 @@
       "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-3.5.0.tgz",
       "integrity": "sha512-qzgm9SEvodVkSi9QY7Me1/rujg+YBNMjayNSAyzNghwTEez++gXoPCwMvpbHRG7wrOkDCiF6dquvv9ESmUBAuw==",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "enhanced-resolve": "3.3.0",
         "loader-utils": "1.1.0",
         "lodash": "4.17.5",
@@ -3908,6 +3907,11 @@
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
       "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
     },
+    "browser-process-hrtime": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz",
+      "integrity": "sha1-Ql1opY00R/AqBKqJQYf86K+Le44="
+    },
     "browser-resolve": {
       "version": "1.11.2",
       "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.2.tgz",
@@ -3935,26 +3939,26 @@
       "requires": {
         "buffer-xor": "1.0.3",
         "cipher-base": "1.0.4",
-        "create-hash": "1.1.3",
+        "create-hash": "1.2.0",
         "evp_bytestokey": "1.0.3",
         "inherits": "2.0.3",
         "safe-buffer": "5.1.1"
       }
     },
     "browserify-cipher": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.0.tgz",
-      "integrity": "sha1-mYgkSHS/XtTijalWZtzWasj8Njo=",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
       "requires": {
         "browserify-aes": "1.2.0",
-        "browserify-des": "1.0.0",
+        "browserify-des": "1.0.1",
         "evp_bytestokey": "1.0.3"
       }
     },
     "browserify-des": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.0.tgz",
-      "integrity": "sha1-2qJ3cXRwki7S/hhZQRihdUOXId0=",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.1.tgz",
+      "integrity": "sha512-zy0Cobe3hhgpiOM32Tj7KQ3Vl91m0njwsjzZQK1L+JDf11dzP9qIvjreVinsvXrgfjhStXwUWAEpB9D7Gwmayw==",
       "requires": {
         "cipher-base": "1.0.4",
         "des.js": "1.0.0",
@@ -3977,11 +3981,11 @@
       "requires": {
         "bn.js": "4.11.8",
         "browserify-rsa": "4.0.1",
-        "create-hash": "1.1.3",
-        "create-hmac": "1.1.6",
+        "create-hash": "1.2.0",
+        "create-hmac": "1.1.7",
         "elliptic": "6.4.0",
         "inherits": "2.0.3",
-        "parse-asn1": "5.1.0"
+        "parse-asn1": "5.1.1"
       }
     },
     "browserify-zlib": {
@@ -3997,7 +4001,7 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
       "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
       "requires": {
-        "caniuse-lite": "1.0.30000827",
+        "caniuse-lite": "1.0.30000830",
         "electron-to-chromium": "1.3.42"
       }
     },
@@ -4227,7 +4231,7 @@
       "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=",
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000827",
+        "caniuse-db": "1.0.30000830",
         "lodash.memoize": "4.1.2",
         "lodash.uniq": "4.5.0"
       },
@@ -4237,21 +4241,21 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "requires": {
-            "caniuse-db": "1.0.30000827",
+            "caniuse-db": "1.0.30000830",
             "electron-to-chromium": "1.3.42"
           }
         }
       }
     },
     "caniuse-db": {
-      "version": "1.0.30000827",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000827.tgz",
-      "integrity": "sha1-vSg53Rlgk7RMKMF/k1ExQMnZJYg="
+      "version": "1.0.30000830",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000830.tgz",
+      "integrity": "sha1-bkUlWzRWSf0V/1kHLaHhK7PeLxM="
     },
     "caniuse-lite": {
-      "version": "1.0.30000827",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000827.tgz",
-      "integrity": "sha512-j9Q9hP5AhqOARNP6fLdctr3XrGhF921sBSycudf4E+8RCWpFT3rJdTfp/5o8LDp6p0NJTpYWEpBFiM+QEDzA6g=="
+      "version": "1.0.30000830",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000830.tgz",
+      "integrity": "sha512-yMqGkujkoOIZfvOYiWdqPALgY/PVGiqCHUJb6yNq7xhI/pR+gQO0U2K6lRDqAiJv4+CIU3CtTLblNGw0QGnr6g=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.1.2",
@@ -4272,11 +4276,6 @@
         "lazy-cache": "1.0.4"
       }
     },
-    "chain-function": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.0.tgz",
-      "integrity": "sha1-DUqzfn4Y6tC9xHuSB2QRjOWHM9w="
-    },
     "chainsaw": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
@@ -4286,13 +4285,13 @@
       }
     },
     "chalk": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
-      "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz",
+      "integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==",
       "requires": {
         "ansi-styles": "3.2.1",
         "escape-string-regexp": "1.0.5",
-        "supports-color": "5.3.0"
+        "supports-color": "5.4.0"
       }
     },
     "chardet": {
@@ -4339,9 +4338,9 @@
       "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE="
     },
     "chrome-trace-event": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-0.1.2.tgz",
-      "integrity": "sha1-kPNohdU0WlBiEzLwcXtZWIPV2YI="
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-0.1.3.tgz",
+      "integrity": "sha512-sjndyZHrrWiu4RY7AkHgjn80GfAM2ZSzUkZLV/Js59Ldmh6JDThf0SUmOHU53rFu2rVxxfCzJ30Ukcfch3Gb/A=="
     },
     "ci-env": {
       "version": "1.6.0",
@@ -4678,9 +4677,9 @@
       }
     },
     "comma-separated-tokens": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.4.tgz",
-      "integrity": "sha1-cgg+WNSkYvAYZvZhf02Yo807ikY=",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.5.tgz",
+      "integrity": "sha512-Cg90/fcK93n0ecgYTAz1jaA3zvnQ0ExlmKY1rdbyHqAx6BHxwoJc+J7HDu0iuQ7ixEs1qaa+WyQ6oeuBpYP1iA==",
       "requires": {
         "trim": "0.0.1"
       }
@@ -4926,39 +4925,40 @@
         "glob2base": "0.0.12",
         "minimatch": "3.0.4",
         "mkdirp": "0.5.1",
-        "resolve": "1.7.0",
+        "resolve": "1.7.1",
         "safe-buffer": "5.1.1",
         "shell-quote": "1.6.1",
         "subarg": "1.0.0"
       }
     },
     "create-ecdh": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.0.tgz",
-      "integrity": "sha1-iIxyNZbN92EvZJgjPuvXo1MBc30=",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.1.tgz",
+      "integrity": "sha512-iZvCCg8XqHQZ1ioNBTzXS/cQSkqkqcPs8xSX4upNB+DAk9Ht3uzQf2J32uAHNCne8LDmKr29AgZrEs4oIrwLuQ==",
       "requires": {
         "bn.js": "4.11.8",
         "elliptic": "6.4.0"
       }
     },
     "create-hash": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.1.3.tgz",
-      "integrity": "sha1-YGBCrIuSYnUPSDyt2rD1gZFy2P0=",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "requires": {
         "cipher-base": "1.0.4",
         "inherits": "2.0.3",
+        "md5.js": "1.3.4",
         "ripemd160": "2.0.1",
         "sha.js": "2.4.11"
       }
     },
     "create-hmac": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.6.tgz",
-      "integrity": "sha1-rLniIaThe9sHbpBlfEK5PjcmzwY=",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "requires": {
         "cipher-base": "1.0.4",
-        "create-hash": "1.1.3",
+        "create-hash": "1.2.0",
         "inherits": "2.0.3",
         "ripemd160": "2.0.1",
         "safe-buffer": "5.1.1",
@@ -5008,15 +5008,15 @@
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
       "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
       "requires": {
-        "browserify-cipher": "1.0.0",
+        "browserify-cipher": "1.0.1",
         "browserify-sign": "4.0.4",
-        "create-ecdh": "4.0.0",
-        "create-hash": "1.1.3",
-        "create-hmac": "1.1.6",
-        "diffie-hellman": "5.0.2",
+        "create-ecdh": "4.0.1",
+        "create-hash": "1.2.0",
+        "create-hmac": "1.1.7",
+        "diffie-hellman": "5.0.3",
         "inherits": "2.0.3",
         "pbkdf2": "3.0.14",
-        "public-encrypt": "4.0.0",
+        "public-encrypt": "4.0.2",
         "randombytes": "2.0.6",
         "randomfill": "1.0.4"
       }
@@ -5274,7 +5274,7 @@
           "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
           "requires": {
             "browserslist": "1.7.7",
-            "caniuse-db": "1.0.30000827",
+            "caniuse-db": "1.0.30000830",
             "normalize-range": "0.1.2",
             "num2fraction": "1.2.2",
             "postcss": "5.2.18",
@@ -5286,7 +5286,7 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "requires": {
-            "caniuse-db": "1.0.30000827",
+            "caniuse-db": "1.0.30000830",
             "electron-to-chromium": "1.3.42"
           }
         },
@@ -5369,6 +5369,11 @@
         "cssom": "0.3.2"
       }
     },
+    "csstype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.2.0.tgz",
+      "integrity": "sha512-5YHWQgAtzKIA8trr2AVg6Jq5Fs5eAR1UqKbRJjgQQevNx3IAhD3S9wajvqJdmO7bgIxy0MA5lFVPzJYjmMlNeQ=="
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -5403,6 +5408,41 @@
         "assert-plus": "1.0.0"
       }
     },
+    "data-urls": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.0.0.tgz",
+      "integrity": "sha512-ai40PPQR0Fn1lD2PPie79CibnlMN2AYiDhwFX/rZHVsxbs5kNJSjegqXIprhouGXlRdEnfybva7kqRGnB6mypA==",
+      "requires": {
+        "abab": "1.0.4",
+        "whatwg-mimetype": "2.1.0",
+        "whatwg-url": "6.4.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz",
+          "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0="
+        },
+        "tr46": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+          "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+          "requires": {
+            "punycode": "2.1.0"
+          }
+        },
+        "whatwg-url": {
+          "version": "6.4.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.4.0.tgz",
+          "integrity": "sha512-Z0CVh/YE217Foyb488eo+iBv+r7eAQ0wSTyApi9n06jhcA3z6Nidg/EGvl0UFkg7kMdKxfBzzr+o9JF+cevgMg==",
+          "requires": {
+            "lodash.sortby": "4.7.0",
+            "tr46": "1.0.1",
+            "webidl-conversions": "4.0.2"
+          }
+        }
+      }
+    },
     "date-fns": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
@@ -5609,7 +5649,7 @@
       "integrity": "sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=",
       "requires": {
         "inherits": "2.0.3",
-        "minimalistic-assert": "1.0.0"
+        "minimalistic-assert": "1.0.1"
       }
     },
     "destroy": {
@@ -5660,9 +5700,9 @@
       "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA=="
     },
     "diffie-hellman": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.2.tgz",
-      "integrity": "sha1-tYNXOScM/ias9jIJn97SoH8gnl4=",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "requires": {
         "bn.js": "4.11.8",
         "miller-rabin": "4.0.1",
@@ -5755,6 +5795,14 @@
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
       "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI="
     },
+    "domexception": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
+      "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
+      "requires": {
+        "webidl-conversions": "4.0.2"
+      }
+    },
     "domhandler": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.1.tgz",
@@ -5841,7 +5889,7 @@
         "hash.js": "1.1.3",
         "hmac-drbg": "1.0.1",
         "inherits": "2.0.3",
-        "minimalistic-assert": "1.0.0",
+        "minimalistic-assert": "1.0.1",
         "minimalistic-crypto-utils": "1.0.1"
       }
     },
@@ -5932,7 +5980,7 @@
         "object.values": "1.0.4",
         "prop-types": "15.6.1",
         "react-reconciler": "0.7.0",
-        "react-test-renderer": "16.3.1"
+        "react-test-renderer": "16.3.2"
       },
       "dependencies": {
         "lodash": {
@@ -6588,9 +6636,9 @@
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I="
     },
     "flow-parser": {
-      "version": "0.69.0",
-      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.69.0.tgz",
-      "integrity": "sha1-N4tRKNbQtVSosvFqTKPhq5ZJ8A4="
+      "version": "0.70.0",
+      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.70.0.tgz",
+      "integrity": "sha512-gGdyVUZWswG5jcINrVDHd3RY4nJptBTAx9mR9thGsrGGmAUR7omgJXQSpR+fXrLtxSTAea3HpAZNU/yzRJc2Cg=="
     },
     "flush-write-stream": {
       "version": "1.0.3",
@@ -6645,7 +6693,7 @@
         "lodash.isstring": "4.0.1",
         "lodash.startswith": "4.2.1",
         "minimatch": "3.0.4",
-        "resolve": "1.7.0",
+        "resolve": "1.7.1",
         "tapable": "1.0.0",
         "vue-parser": "1.1.6"
       },
@@ -7013,11 +7061,12 @@
       }
     },
     "glamorous": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/glamorous/-/glamorous-4.12.2.tgz",
-      "integrity": "sha512-+jGoFgY+Czd/WFXDE4HszXJlYUks2xawlzNx+5rtkwjpc9M36QtgI7YXIq+X7rg1t8sc+0o/PJsO1A9T9atcVA==",
+      "version": "4.12.3",
+      "resolved": "https://registry.npmjs.org/glamorous/-/glamorous-4.12.3.tgz",
+      "integrity": "sha512-7p2IitkzbEx6oB0CO3EkSgyCgponfGrFKmyRSK6amV8gUBLne6Nw3RsASPpVw5zx/jsivYACTpWeixySpSbNNw==",
       "requires": {
         "brcast": "3.0.1",
+        "csstype": "2.2.0",
         "fast-memoize": "2.3.2",
         "html-tag-names": "1.1.2",
         "is-function": "1.0.1",
@@ -7389,11 +7438,12 @@
       }
     },
     "hash-base": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-2.0.2.tgz",
-      "integrity": "sha1-ZuodhW206KVHDK32/OI65SRO8uE=",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
+      "integrity": "sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=",
       "requires": {
-        "inherits": "2.0.3"
+        "inherits": "2.0.3",
+        "safe-buffer": "5.1.1"
       }
     },
     "hash.js": {
@@ -7402,7 +7452,7 @@
       "integrity": "sha512-/UETyP0W22QILqS+6HowevwhEFJ3MBJnwTf75Qob9Wz9t0DPuisL8kW8YZMK62dHAKE1c1p+gY1TtOLY+USEHA==",
       "requires": {
         "inherits": "2.0.3",
-        "minimalistic-assert": "1.0.0"
+        "minimalistic-assert": "1.0.1"
       }
     },
     "hast-util-parse-selector": {
@@ -7416,10 +7466,10 @@
       "integrity": "sha512-8V34dMSDT1Ik+ZSgTzCLdyp89MrWxcxctXPxhmb72GQj1Xkw1aHPM9UaHCWewvH2Q+PVkYUm4ZJVw4T0dgEGNA==",
       "requires": {
         "camelcase": "3.0.0",
-        "comma-separated-tokens": "1.0.4",
+        "comma-separated-tokens": "1.0.5",
         "hast-util-parse-selector": "2.1.0",
         "property-information": "3.2.0",
-        "space-separated-tokens": "1.1.1"
+        "space-separated-tokens": "1.1.2"
       },
       "dependencies": {
         "camelcase": {
@@ -7456,7 +7506,7 @@
       "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
       "requires": {
         "hash.js": "1.1.3",
-        "minimalistic-assert": "1.0.0",
+        "minimalistic-assert": "1.0.1",
         "minimalistic-crypto-utils": "1.0.1"
       }
     },
@@ -7509,9 +7559,9 @@
       "integrity": "sha1-ZouTd26q5V696POtRkswekljYl4="
     },
     "html-element-attributes": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.0.tgz",
-      "integrity": "sha1-8G69/OIt6XnbggICZcrFQfsX1Pw="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.1.tgz",
+      "integrity": "sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA=="
     },
     "html-encoding-sniffer": {
       "version": "1.0.2",
@@ -7533,15 +7583,15 @@
       "requires": {
         "es6-templates": "0.2.3",
         "fastparse": "1.1.1",
-        "html-minifier": "3.5.14",
+        "html-minifier": "3.5.15",
         "loader-utils": "1.1.0",
         "object-assign": "4.1.1"
       }
     },
     "html-minifier": {
-      "version": "3.5.14",
-      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.14.tgz",
-      "integrity": "sha512-sZjw6zhQgyUnIlIPU+W80XpRjWjdxHtNcxjfyOskOsCTDKytcfLY04wsQY/83Yqb4ndoiD2FtauiL7Yg6uUQFQ==",
+      "version": "3.5.15",
+      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.15.tgz",
+      "integrity": "sha512-OZa4rfb6tZOZ3Z8Xf0jKxXkiDcFWldQePGYFDcgKqES2sXeWaEv9y6QQvWUtX3ySI3feApQi5uCsHLINQ6NoAw==",
       "requires": {
         "camel-case": "3.0.0",
         "clean-css": "4.1.11",
@@ -7549,13 +7599,13 @@
         "he": "1.1.1",
         "param-case": "2.1.1",
         "relateurl": "0.2.7",
-        "uglify-js": "3.3.20"
+        "uglify-js": "3.3.21"
       },
       "dependencies": {
         "uglify-js": {
-          "version": "3.3.20",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.20.tgz",
-          "integrity": "sha512-WpLkWCf9sGvGZnIvBV0PNID9BATQNT/IXKAmqegfKzIPcTmTV3FP8NQpoogQkt/Y402x2sOFdaHUmqFY9IZp+g==",
+          "version": "3.3.21",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.21.tgz",
+          "integrity": "sha512-uy82472lH8tshK3jS3c5IFb5MmNKd/5qyBd0ih8sM42L3jWvxnE339U9gZU1zufnLVs98Stib9twq8dLm2XYCA==",
           "requires": {
             "commander": "2.15.1",
             "source-map": "0.6.1"
@@ -7574,7 +7624,7 @@
       "integrity": "sha1-f5xCG36pHsRg9WUn1430hO51N9U=",
       "requires": {
         "bluebird": "3.5.1",
-        "html-minifier": "3.5.14",
+        "html-minifier": "3.5.15",
         "loader-utils": "0.2.17",
         "lodash": "4.17.5",
         "pretty-error": "2.1.1",
@@ -8721,7 +8771,7 @@
           "integrity": "sha512-T1BzrbFxDIW/LLYQqVfo94y/hhaj1NzVQkZgBumAC+sxbjMROI7VkihOdxNR758iYbQykL2ZOWUBurFgkQrzdg==",
           "requires": {
             "ansi-escapes": "3.1.0",
-            "chalk": "2.3.2",
+            "chalk": "2.4.0",
             "glob": "7.1.2",
             "graceful-fs": "4.1.11",
             "is-ci": "1.1.0",
@@ -8794,7 +8844,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.2",
+        "chalk": "2.4.0",
         "glob": "7.1.2",
         "jest-environment-jsdom": "21.2.1",
         "jest-environment-node": "21.2.1",
@@ -8812,7 +8862,7 @@
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-21.2.1.tgz",
       "integrity": "sha512-E5fu6r7PvvPr5qAWE1RaUwIh/k6Zx/3OOkZ4rk5dBJkEWRrUuSgbMt2EO8IUTPTd6DOqU3LW6uTIwX5FRvXoFA==",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "diff": "3.5.0",
         "jest-get-type": "21.2.0",
         "pretty-format": "21.2.1"
@@ -8865,7 +8915,7 @@
       "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-21.2.1.tgz",
       "integrity": "sha512-lw8FXXIEekD+jYNlStfgNsUHpfMWhWWCgHV7n0B7mA/vendH7vBFs8xybjQsDzJSduptBZJHqQX9SMssya9+3A==",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "expect": "21.2.1",
         "graceful-fs": "4.1.11",
         "jest-diff": "21.2.1",
@@ -8880,7 +8930,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.2",
+        "chalk": "2.4.0",
         "jest-get-type": "21.2.0",
         "pretty-format": "21.2.1"
       }
@@ -8890,7 +8940,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.2",
+        "chalk": "2.4.0",
         "micromatch": "2.3.11",
         "slash": "1.0.0"
       }
@@ -8911,7 +8961,7 @@
       "integrity": "sha512-vefQ/Lr+VdNvHUZFQXWtOqHX3HEdOc2MtSahBO89qXywEbUxGPB9ZLP9+BHinkxb60UT2Q/tTDOS6rYc6Mwigw==",
       "requires": {
         "browser-resolve": "1.11.2",
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "is-builtin-module": "1.0.0"
       }
     },
@@ -8948,7 +8998,7 @@
         "babel-core": "6.26.0",
         "babel-jest": "21.2.0",
         "babel-plugin-istanbul": "4.1.6",
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "convert-source-map": "1.5.1",
         "graceful-fs": "4.1.11",
         "jest-config": "21.2.1",
@@ -8991,7 +9041,7 @@
       "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-21.2.1.tgz",
       "integrity": "sha512-bpaeBnDpdqaRTzN8tWg0DqOTo2DvD3StOemxn67CUd1p1Po+BUpvePAp44jdJ7Pxcjfg+42o4NHw1SxdCA2rvg==",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "jest-diff": "21.2.1",
         "jest-matcher-utils": "21.2.1",
         "mkdirp": "0.5.1",
@@ -9005,7 +9055,7 @@
       "integrity": "sha512-r20W91rmHY3fnCoO7aOAlyfC51x2yeV3xF+prGsJAUsYhKeV670ZB8NO88Lwm7ASu8SdH0S+U+eFf498kjhA4g==",
       "requires": {
         "callsites": "2.0.0",
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "graceful-fs": "4.1.11",
         "jest-message-util": "21.2.1",
         "jest-mock": "21.2.0",
@@ -9018,7 +9068,7 @@
       "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-21.2.1.tgz",
       "integrity": "sha512-k4HLI1rZQjlU+EC682RlQ6oZvLrE5SCh3brseQc24vbZTxzT/k/3urar5QMCVgjadmSO7lECeGdc6YxnM3yEGg==",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "jest-get-type": "21.2.0",
         "leven": "2.1.0",
         "pretty-format": "21.2.1"
@@ -9037,7 +9087,7 @@
         "hoek": "4.2.1",
         "isemail": "2.2.1",
         "items": "2.1.1",
-        "moment": "2.22.0",
+        "moment": "2.22.1",
         "topo": "2.0.2"
       }
     },
@@ -9071,10 +9121,10 @@
         "babel-register": "6.26.0",
         "babylon": "7.0.0-beta.44",
         "colors": "1.1.2",
-        "flow-parser": "0.69.0",
+        "flow-parser": "0.70.0",
         "lodash": "4.15.0",
         "micromatch": "2.3.11",
-        "neo-async": "2.5.0",
+        "neo-async": "2.5.1",
         "node-dir": "0.1.8",
         "nomnom": "1.8.1",
         "recast": "0.14.7",
@@ -9266,6 +9316,11 @@
         "invert-kv": "1.0.0"
       }
     },
+    "left-pad": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
+      "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA=="
+    },
     "leven": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
@@ -9299,7 +9354,7 @@
         "log-update": "1.0.2",
         "ora": "0.2.3",
         "p-map": "1.2.0",
-        "rxjs": "5.5.8",
+        "rxjs": "5.5.10",
         "stream-to-observable": "0.2.0",
         "strip-ansi": "3.0.1"
       },
@@ -9698,7 +9753,7 @@
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
       "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
       "requires": {
-        "chalk": "2.3.2"
+        "chalk": "2.4.0"
       }
     },
     "log-update": {
@@ -9877,17 +9932,6 @@
       "requires": {
         "hash-base": "3.0.4",
         "inherits": "2.0.3"
-      },
-      "dependencies": {
-        "hash-base": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
-          "integrity": "sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=",
-          "requires": {
-            "inherits": "2.0.3",
-            "safe-buffer": "5.1.1"
-          }
-        }
       }
     },
     "media-typer": {
@@ -10140,9 +10184,9 @@
       }
     },
     "minimalistic-assert": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz",
-      "integrity": "sha1-cCvi3aazf0g2vLP121ZkG2Sh09M="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
     },
     "minimalistic-crypto-utils": {
       "version": "1.0.1",
@@ -10303,9 +10347,9 @@
       }
     },
     "moment": {
-      "version": "2.22.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.0.tgz",
-      "integrity": "sha512-1muXCh8jb1N/gHRbn9VDUBr0GYb8A/aVcHlII9QSB68a50spqEVLIGN6KVmCOnSvJrUhC0edGgKU5ofnGXdYdg=="
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz",
+      "integrity": "sha512-shJkRTSebXvsVqk56I+lkb2latjBs8I+pc2TzWc545y2iFnSjm7Wg0QMh+ZWcdSLQyGEau5jI8ocnmkyTgr9YQ=="
     },
     "move-concurrently": {
       "version": "1.0.1",
@@ -10444,9 +10488,9 @@
       "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=="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.5.1.tgz",
+      "integrity": "sha512-3KL3fvuRkZ7s4IFOMfztb7zJp3QaVWnBeGoJlgB38XnCRPj/0tLzzLG5IB8NYOHbJ8g8UGrgZv44GLDk6CxTxA=="
     },
     "netrc": {
       "version": "0.1.4",
@@ -10585,7 +10629,7 @@
         "stream-browserify": "2.0.1",
         "stream-http": "2.8.1",
         "string_decoder": "1.1.1",
-        "timers-browserify": "2.0.6",
+        "timers-browserify": "2.0.7",
         "tty-browserify": "0.0.0",
         "url": "0.11.0",
         "util": "0.10.3",
@@ -11038,15 +11082,15 @@
       "integrity": "sha1-KhZgU8ye+wlWUGPn/Td8yKywNBw="
     },
     "office-ui-fabric-react": {
-      "version": "5.80.0",
-      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.80.0.tgz",
-      "integrity": "sha512-5UlHTFdBlZMIs3rbys9Pb/Em+NbsTBsusuagFcpxIYihVjEPJ3po++qAOBtxCUrYD3GvOgh5YJjOOuLf/CIr1g==",
+      "version": "5.82.1",
+      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.82.1.tgz",
+      "integrity": "sha512-ChqMfWuUWir7Xlt4szC5ysOwJwz9Ja67+j3w4PsHz94YVZDyLRexuLw5ALvNDlhF0OtIlONNdte5lv74HDcpMg==",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
-        "@uifabric/icons": "5.7.0",
-        "@uifabric/merge-styles": "5.15.0",
-        "@uifabric/styling": "5.23.0",
-        "@uifabric/utilities": "5.23.0",
+        "@uifabric/icons": "5.7.1",
+        "@uifabric/merge-styles": "5.15.1",
+        "@uifabric/styling": "5.23.1",
+        "@uifabric/utilities": "5.24.0",
         "prop-types": "15.6.1",
         "tslib": "1.9.0"
       }
@@ -11373,13 +11417,13 @@
       }
     },
     "parse-asn1": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.0.tgz",
-      "integrity": "sha1-N8T5t+06tlx0gXtfJICTf7+XxxI=",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
+      "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
       "requires": {
         "asn1.js": "4.10.1",
         "browserify-aes": "1.2.0",
-        "create-hash": "1.1.3",
+        "create-hash": "1.2.0",
         "evp_bytestokey": "1.0.3",
         "pbkdf2": "3.0.14"
       }
@@ -11486,8 +11530,8 @@
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.14.tgz",
       "integrity": "sha512-gjsZW9O34fm0R7PaLHRJmLLVfSoesxztjPjE9o6R+qtVJij90ltg1joIovN9GKrRW3t1PzhDDG3UMEMFfZ+1wA==",
       "requires": {
-        "create-hash": "1.1.3",
-        "create-hmac": "1.1.6",
+        "create-hash": "1.2.0",
+        "create-hmac": "1.1.7",
         "ripemd160": "2.0.1",
         "safe-buffer": "5.1.1",
         "sha.js": "2.4.11"
@@ -11524,6 +11568,11 @@
         "find-up": "2.1.0"
       }
     },
+    "pn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
+      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA=="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -11559,9 +11608,9 @@
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.21.tgz",
       "integrity": "sha512-y/bKfbQz2Nn/QBC08bwvYUxEFOVGfPIUOTsJ2CK5inzlXW9SdYR1x4pEsG9blRAF/PX+wRNdOah+gx/hv4q7dw==",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "source-map": "0.6.1",
-        "supports-color": "5.3.0"
+        "supports-color": "5.4.0"
       }
     },
     "postcss-calc": {
@@ -12176,9 +12225,9 @@
       }
     },
     "postcss-loader": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.3.tgz",
-      "integrity": "sha512-RuBcNE8rjCkIB0IsbmkGFRmQJTeQJfCI88E0VTarPNTvaNSv9OFv1DvTwgtAN/qlzyiELsmmmtX/tEzKp/cdug==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.4.tgz",
+      "integrity": "sha512-L2p654oK945B/gDFUGgOhh7uzj19RWoY1SVMeJVoKno1H2MdbQ0RppR/28JGju4pMb22iRC7BJ9aDzbxXSLf4A==",
       "requires": {
         "loader-utils": "1.1.0",
         "postcss": "6.0.21",
@@ -12336,7 +12385,7 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "requires": {
-            "caniuse-db": "1.0.30000827",
+            "caniuse-db": "1.0.30000830",
             "electron-to-chromium": "1.3.42"
           }
         },
@@ -13314,9 +13363,9 @@
       "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
     },
     "prettier": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.11.1.tgz",
-      "integrity": "sha512-T/KD65Ot0PB97xTrG8afQ46x3oiVhnfGjGESSI9NWYcG92+OUPZKkwHqGWXH2t9jK1crnQjubECW0FuOth+hxw=="
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.12.1.tgz",
+      "integrity": "sha1-wa0g6APndJ+vkFpAnSNn4Gu+cyU="
     },
     "pretty-bytes": {
       "version": "4.0.2",
@@ -13382,9 +13431,9 @@
       }
     },
     "prismjs": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.13.0.tgz",
-      "integrity": "sha512-0/1Fiyg3MCzepo6t6Wzx2Ef4nftGKeQIv+Z6LO38RcYJN5QV2ePHh8W41ZkFn57B++6BnglF6fCiJ9b80YlzkQ=="
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz",
+      "integrity": "sha512-sa2s4m60bXs+kU3jcuUwx3ZCrUH7o0kuqnOOINbODqlRrDB7KY8SRx+xR/D7nHLlgfDdG7zXbRO8wJ+su5Ls0A=="
     },
     "private": {
       "version": "0.1.8",
@@ -13459,14 +13508,14 @@
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
     },
     "public-encrypt": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.0.tgz",
-      "integrity": "sha1-OfaZ86RlYN1eusvKaTyvfGXBjMY=",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
+      "integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
       "requires": {
         "bn.js": "4.11.8",
         "browserify-rsa": "4.0.1",
-        "create-hash": "1.1.3",
-        "parse-asn1": "5.1.0",
+        "create-hash": "1.2.0",
+        "parse-asn1": "5.1.1",
         "randombytes": "2.0.6"
       }
     },
@@ -13676,9 +13725,9 @@
       "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao="
     },
     "react": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.3.1.tgz",
-      "integrity": "sha512-NbkxN9jsZ6+G+ICsLdC7/wUD26uNbvKU/RAxEWgc9kcdKvROt+5d5j2cNQm5PSFTQ4WNGsR3pa4qL2Q0/WSy1w==",
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-o5GPdkhciQ3cEph6qgvYB7LTOHw/GB0qRI6ZFNugj49qJCFfgHwVNjZ5u+b7nif4vOeMIOuYj3CeYe2IBD74lg==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -13749,7 +13798,7 @@
           "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==",
           "requires": {
             "ansi-escapes": "3.1.0",
-            "chalk": "2.3.2",
+            "chalk": "2.4.0",
             "cli-cursor": "2.1.0",
             "cli-width": "2.2.0",
             "external-editor": "2.2.0",
@@ -13773,13 +13822,13 @@
               }
             },
             "chalk": {
-              "version": "2.3.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
-              "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
+              "version": "2.4.0",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz",
+              "integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==",
               "requires": {
                 "ansi-styles": "3.2.1",
                 "escape-string-regexp": "1.0.5",
-                "supports-color": "5.3.0"
+                "supports-color": "5.4.0"
               }
             },
             "strip-ansi": {
@@ -13791,9 +13840,9 @@
               }
             },
             "supports-color": {
-              "version": "5.3.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
-              "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
+              "version": "5.4.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+              "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
               "requires": {
                 "has-flag": "3.0.0"
               }
@@ -13867,9 +13916,9 @@
       }
     },
     "react-dom": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.1.tgz",
-      "integrity": "sha512-2Infg89vzahq8nfVi1GkjPqq0vrBvf0f3T0+dTtyjq4f6HKOqKixAK25Vr593O3QTx4kw/vmUtAJwerlevNWOA==",
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.2.tgz",
+      "integrity": "sha512-MMPko3zYncNrz/7gG17wJWUREZDvskZHXOwbttzl0F0L3wDmToyuETuo/r8Y5yvDejwYcRyWI1lvVBjLJWFwKA==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -13933,7 +13982,7 @@
       "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.1.tgz",
       "integrity": "sha1-l7XscQ2miDNZjIvm+JrENiFoQKU=",
       "requires": {
-        "html-element-attributes": "1.3.0"
+        "html-element-attributes": "1.3.1"
       }
     },
     "react-icon-base": {
@@ -13959,9 +14008,9 @@
       }
     },
     "react-is": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.3.1.tgz",
-      "integrity": "sha512-3XpazGqS5DEOLiuR6JQ2Sg6URq/33d1BHJVaUvtMz579KRhd2D0pqabNEe5czv785yzKBPZimOf0UNIXa3jw1A=="
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.3.2.tgz",
+      "integrity": "sha512-ybEM7YOr4yBgFd6w8dJqwxegqZGJNBZl6U27HnGKuTZmDvVrD5quWOK/wAnMywiZzW+Qsk+l4X2c70+thp/A8Q=="
     },
     "react-modal": {
       "version": "3.3.2",
@@ -14018,31 +14067,29 @@
         "babel-runtime": "6.26.0",
         "highlight.js": "9.12.0",
         "lowlight": "1.9.1",
-        "prismjs": "1.13.0",
+        "prismjs": "1.14.0",
         "refractor": "2.3.0"
       }
     },
     "react-test-renderer": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.3.1.tgz",
-      "integrity": "sha512-emEcIPUowMjT5EQ+rrb0FAwVCzuJ+LKDweoYDh073v2/jHxrBDPUk8nzI5dofG3R+140+Bb9TMcT2Ez5OP6pQw==",
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.3.2.tgz",
+      "integrity": "sha512-lL8WHIpCTMdSe+CRkt0rfMxBkJFyhVrpdQ54BaJRIrXf9aVmbeHbRA8GFRpTvohPN5tPzMabmrzW2PUfWCfWwQ==",
       "requires": {
         "fbjs": "0.8.16",
         "object-assign": "4.1.1",
         "prop-types": "15.6.1",
-        "react-is": "16.3.1"
+        "react-is": "16.3.2"
       }
     },
     "react-transition-group": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
-      "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.3.1.tgz",
+      "integrity": "sha512-hu4/LAOFSKjWt1+1hgnOv3ldxmt6lvZGTWz4KUkFrqzXrNDIVSu6txIcPszw7PNduR8en9YTN55JLRyd/L1ZiQ==",
       "requires": {
-        "chain-function": "1.0.0",
         "dom-helpers": "3.3.1",
         "loose-envify": "1.3.1",
-        "prop-types": "15.6.1",
-        "warning": "3.0.0"
+        "prop-types": "15.6.1"
       }
     },
     "react-treebeard": {
@@ -14055,7 +14102,7 @@
         "prop-types": "15.6.1",
         "radium": "0.19.6",
         "shallowequal": "0.2.2",
-        "velocity-react": "1.3.3"
+        "velocity-react": "1.4.0"
       }
     },
     "read-chunk": {
@@ -14134,7 +14181,7 @@
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
       "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
       "requires": {
-        "resolve": "1.7.0"
+        "resolve": "1.7.1"
       }
     },
     "recursive-readdir": {
@@ -14462,6 +14509,16 @@
         "lodash": "4.15.0"
       }
     },
+    "request-promise-native": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.5.tgz",
+      "integrity": "sha1-UoF3D2jgyXGeUWP9P6tIIhX0/aU=",
+      "requires": {
+        "request-promise-core": "1.1.1",
+        "stealthy-require": "1.1.1",
+        "tough-cookie": "2.3.4"
+      }
+    },
     "requestretry": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/requestretry/-/requestretry-1.12.3.tgz",
@@ -14499,9 +14556,9 @@
       "integrity": "sha512-o4sxCTSwTxx5hBFXYn5rsgMuLQT8kufJ5vzKYcRwWhCWERKN4dqZwiMx7+nRrcXouWmiFGD9A486yS4Z1a2PQQ=="
     },
     "resolve": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.0.tgz",
-      "integrity": "sha512-QdgZ5bjR1WAlpLaO5yHepFvC+o3rCr6wpfE2tpJNMkXdulf2jKomQBdNRQITF3ZKHNlT71syG98yQP03gasgnA==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz",
+      "integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==",
       "requires": {
         "path-parse": "1.0.5"
       }
@@ -14578,6 +14635,16 @@
       "requires": {
         "hash-base": "2.0.2",
         "inherits": "2.0.3"
+      },
+      "dependencies": {
+        "hash-base": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-2.0.2.tgz",
+          "integrity": "sha1-ZuodhW206KVHDK32/OI65SRO8uE=",
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        }
       }
     },
     "rst-selector-parser": {
@@ -14624,9 +14691,9 @@
       }
     },
     "rxjs": {
-      "version": "5.5.8",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.8.tgz",
-      "integrity": "sha512-Bz7qou7VAIoGiglJZbzbXa4vpX5BmTTN2Dj/se6+SwADtw4SihqBIiEa7VmTXJ8pynvq0iFr5Gx9VLyye1rIxQ==",
+      "version": "5.5.10",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.10.tgz",
+      "integrity": "sha512-SRjimIDUHJkon+2hFo7xnvNC4ZEHGzCRwh9P7nzX3zPkCGFEg/tuElrNR7L/rZMagnK2JeH2jQwPRpmyXyLB6A==",
       "requires": {
         "symbol-observable": "1.0.1"
       }
@@ -15091,7 +15158,7 @@
         "clone-deep": "2.0.2",
         "loader-utils": "1.1.0",
         "lodash.tail": "4.1.1",
-        "neo-async": "2.5.0",
+        "neo-async": "2.5.1",
         "pify": "3.0.0"
       }
     },
@@ -15348,36 +15415,36 @@
       }
     },
     "screener-storybook": {
-      "version": "0.11.5",
-      "resolved": "https://registry.npmjs.org/screener-storybook/-/screener-storybook-0.11.5.tgz",
-      "integrity": "sha1-AeT31Pjt8qMwxMysVPxj4Y/zGEM=",
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/screener-storybook/-/screener-storybook-0.12.5.tgz",
+      "integrity": "sha1-B+L579ZC+fs9K9B/PVJGGnoQnQw=",
       "requires": {
         "bluebird": "3.4.7",
         "colors": "1.1.2",
         "commander": "2.9.0",
         "get-port": "3.2.0",
         "joi": "10.0.6",
-        "jsdom": "9.8.3",
+        "jsdom": "11.7.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.3",
-        "screener-runner": "0.8.2"
+        "screener-runner": "0.9.1"
       },
       "dependencies": {
         "acorn": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz",
-          "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc="
+          "version": "5.5.3",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz",
+          "integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ=="
         },
         "acorn-globals": {
-          "version": "1.0.9",
-          "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz",
-          "integrity": "sha1-VbtemGkVB7dFedBRNBMhfDgMVM8=",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.1.0.tgz",
+          "integrity": "sha512-KjZwU26uG3u6eZcfGbTULzFcsoz6pegNKtHPksZPOUsiKo5bUmiBPa38FuHZ/Eun+XYh/JCCkS9AS3Lu4McQOQ==",
           "requires": {
-            "acorn": "2.7.0"
+            "acorn": "5.5.3"
           }
         },
         "ajv": {
@@ -15399,11 +15466,6 @@
           "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
           "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ="
         },
-        "aws-sign2": {
-          "version": "0.6.0",
-          "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",
@@ -15478,58 +15540,11 @@
             "ms": "0.7.1"
           }
         },
-        "form-data": {
-          "version": "2.1.4",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
-          "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
-          "requires": {
-            "asynckit": "0.4.0",
-            "combined-stream": "1.0.6",
-            "mime-types": "2.1.18"
-          }
-        },
         "har-schema": {
           "version": "1.0.5",
           "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
           "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4="
         },
-        "har-validator": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
-          "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
-          "requires": {
-            "ajv": "4.11.8",
-            "har-schema": "1.0.5"
-          }
-        },
-        "hawk": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-          "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
-          "requires": {
-            "boom": "2.10.1",
-            "cryptiles": "2.0.5",
-            "hoek": "2.16.3",
-            "sntp": "1.0.9"
-          },
-          "dependencies": {
-            "hoek": {
-              "version": "2.16.3",
-              "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-              "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
-            }
-          }
-        },
-        "http-signature": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
-          "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
-          "requires": {
-            "assert-plus": "0.2.0",
-            "jsprim": "1.4.1",
-            "sshpk": "1.14.1"
-          }
-        },
         "joi": {
           "version": "10.0.6",
           "resolved": "https://registry.npmjs.org/joi/-/joi-10.0.6.tgz",
@@ -15542,30 +15557,67 @@
           }
         },
         "jsdom": {
-          "version": "9.8.3",
-          "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-9.8.3.tgz",
-          "integrity": "sha1-/eKcEJwyoRMeC2xlkU5kGY+Xw3A=",
+          "version": "11.7.0",
+          "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.7.0.tgz",
+          "integrity": "sha512-9NzSc4Iz4gN9p4uoPbBUzro21QdgL32swaWIaWS8eEVQ2I69fRJAy/MKyvlEIk0V7HtKgfMbbOKyTZUrzR2Hsw==",
           "requires": {
             "abab": "1.0.4",
-            "acorn": "2.7.0",
-            "acorn-globals": "1.0.9",
+            "acorn": "5.5.3",
+            "acorn-globals": "4.1.0",
             "array-equal": "1.0.0",
-            "content-type-parser": "1.0.2",
             "cssom": "0.3.2",
             "cssstyle": "0.2.37",
+            "data-urls": "1.0.0",
+            "domexception": "1.0.1",
             "escodegen": "1.9.1",
             "html-encoding-sniffer": "1.0.2",
-            "iconv-lite": "0.4.21",
+            "left-pad": "1.3.0",
             "nwmatcher": "1.4.4",
-            "parse5": "1.5.1",
-            "request": "2.81.0",
+            "parse5": "4.0.0",
+            "pn": "1.1.0",
+            "request": "2.85.0",
+            "request-promise-native": "1.0.5",
             "sax": "1.2.4",
             "symbol-tree": "3.2.2",
             "tough-cookie": "2.3.4",
-            "webidl-conversions": "3.0.1",
+            "w3c-hr-time": "1.0.1",
+            "webidl-conversions": "4.0.2",
             "whatwg-encoding": "1.0.3",
-            "whatwg-url": "3.1.0",
-            "xml-name-validator": "2.0.1"
+            "whatwg-mimetype": "2.1.0",
+            "whatwg-url": "6.4.0",
+            "ws": "4.1.0",
+            "xml-name-validator": "3.0.0"
+          },
+          "dependencies": {
+            "request": {
+              "version": "2.85.0",
+              "resolved": "https://registry.npmjs.org/request/-/request-2.85.0.tgz",
+              "integrity": "sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==",
+              "requires": {
+                "aws-sign2": "0.7.0",
+                "aws4": "1.7.0",
+                "caseless": "0.12.0",
+                "combined-stream": "1.0.6",
+                "extend": "3.0.1",
+                "forever-agent": "0.6.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.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.4",
+                "tunnel-agent": "0.6.0",
+                "uuid": "3.2.1"
+              }
+            }
           }
         },
         "lodash": {
@@ -15595,19 +15647,14 @@
           "integrity": "sha1-sEDrCSOWivq/jTL7HxfxFn/auQc="
         },
         "parse5": {
-          "version": "1.5.1",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
-          "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ="
-        },
-        "performance-now": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
-          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
+          "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA=="
         },
-        "qs": {
-          "version": "6.4.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
-          "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM="
+        "punycode": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz",
+          "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0="
         },
         "react": {
           "version": "15.6.2",
@@ -15658,12 +15705,74 @@
             "tough-cookie": "2.3.4",
             "tunnel-agent": "0.6.0",
             "uuid": "3.2.1"
+          },
+          "dependencies": {
+            "aws-sign2": {
+              "version": "0.6.0",
+              "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+              "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8="
+            },
+            "form-data": {
+              "version": "2.1.4",
+              "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+              "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
+              "requires": {
+                "asynckit": "0.4.0",
+                "combined-stream": "1.0.6",
+                "mime-types": "2.1.18"
+              }
+            },
+            "har-validator": {
+              "version": "4.2.1",
+              "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
+              "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
+              "requires": {
+                "ajv": "4.11.8",
+                "har-schema": "1.0.5"
+              }
+            },
+            "hawk": {
+              "version": "3.1.3",
+              "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+              "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
+              "requires": {
+                "boom": "2.10.1",
+                "cryptiles": "2.0.5",
+                "hoek": "2.16.3",
+                "sntp": "1.0.9"
+              }
+            },
+            "hoek": {
+              "version": "2.16.3",
+              "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+              "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
+            },
+            "http-signature": {
+              "version": "1.1.1",
+              "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+              "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
+              "requires": {
+                "assert-plus": "0.2.0",
+                "jsprim": "1.4.1",
+                "sshpk": "1.14.1"
+              }
+            },
+            "performance-now": {
+              "version": "0.2.0",
+              "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+              "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+            },
+            "qs": {
+              "version": "6.4.0",
+              "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
+              "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM="
+            }
           }
         },
         "screener-runner": {
-          "version": "0.8.2",
-          "resolved": "https://registry.npmjs.org/screener-runner/-/screener-runner-0.8.2.tgz",
-          "integrity": "sha1-6s1x1kjguLZLTc6BA/E2uElTUFc=",
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/screener-runner/-/screener-runner-0.9.1.tgz",
+          "integrity": "sha1-+k9X6DbU0+zo8yld/9te49Cs4BM=",
           "requires": {
             "bluebird": "3.4.7",
             "colors": "1.1.2",
@@ -15679,11 +15788,26 @@
             "request-promise": "4.1.1"
           },
           "dependencies": {
+            "aws-sign2": {
+              "version": "0.6.0",
+              "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+              "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8="
+            },
             "caseless": {
               "version": "0.11.0",
               "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
               "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c="
             },
+            "form-data": {
+              "version": "2.1.4",
+              "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+              "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
+              "requires": {
+                "asynckit": "0.4.0",
+                "combined-stream": "1.0.6",
+                "mime-types": "2.1.18"
+              }
+            },
             "har-validator": {
               "version": "2.0.6",
               "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
@@ -15695,6 +15819,34 @@
                 "pinkie-promise": "2.0.1"
               }
             },
+            "hawk": {
+              "version": "3.1.3",
+              "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+              "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
+              "requires": {
+                "boom": "2.10.1",
+                "cryptiles": "2.0.5",
+                "hoek": "2.16.3",
+                "sntp": "1.0.9"
+              },
+              "dependencies": {
+                "hoek": {
+                  "version": "2.16.3",
+                  "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+                  "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
+                }
+              }
+            },
+            "http-signature": {
+              "version": "1.1.1",
+              "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+              "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
+              "requires": {
+                "assert-plus": "0.2.0",
+                "jsprim": "1.4.1",
+                "sshpk": "1.14.1"
+              }
+            },
             "joi": {
               "version": "9.2.0",
               "resolved": "https://registry.npmjs.org/joi/-/joi-9.2.0.tgz",
@@ -15703,7 +15855,7 @@
                 "hoek": "4.2.1",
                 "isemail": "2.2.1",
                 "items": "2.1.1",
-                "moment": "2.22.0",
+                "moment": "2.22.1",
                 "topo": "2.0.2"
               }
             },
@@ -15771,19 +15923,28 @@
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
           "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
         },
-        "webidl-conversions": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+        "tr46": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+          "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+          "requires": {
+            "punycode": "2.1.0"
+          }
         },
         "whatwg-url": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-3.1.0.tgz",
-          "integrity": "sha1-e9yuSQ+SGu9kUftnOexrvY6Qe/Y=",
+          "version": "6.4.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.4.0.tgz",
+          "integrity": "sha512-Z0CVh/YE217Foyb488eo+iBv+r7eAQ0wSTyApi9n06jhcA3z6Nidg/EGvl0UFkg7kMdKxfBzzr+o9JF+cevgMg==",
           "requires": {
-            "tr46": "0.0.3",
-            "webidl-conversions": "3.0.1"
+            "lodash.sortby": "4.7.0",
+            "tr46": "1.0.1",
+            "webidl-conversions": "4.0.2"
           }
+        },
+        "xml-name-validator": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+          "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
         }
       }
     },
@@ -16047,7 +16208,7 @@
         "lodash.get": "4.4.2",
         "lolex": "2.3.2",
         "nise": "1.3.2",
-        "supports-color": "5.3.0",
+        "supports-color": "5.4.0",
         "type-detect": "4.0.8"
       }
     },
@@ -16298,9 +16459,9 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
     },
     "space-separated-tokens": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.1.tgz",
-      "integrity": "sha1-lpW5355lrsGBHUw/nOUlILwvfk0=",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz",
+      "integrity": "sha512-G3jprCEw+xFEs0ORweLmblJ3XLymGGr6hxZYTYZjIlvDti9vOBUjRQa1Rzjt012aRrocKstHwdNi+F7HguPsEA==",
       "requires": {
         "trim": "0.0.1"
       }
@@ -16681,9 +16842,9 @@
       }
     },
     "supports-color": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
-      "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+      "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
       "requires": {
         "has-flag": "3.0.0"
       }
@@ -17158,9 +17319,9 @@
       "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
     },
     "timers-browserify": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.6.tgz",
-      "integrity": "sha512-HQ3nbYRAowdVd0ckGFvmJPPCOH/CHleFN/Y0YQCX1DVaB7t+KFvisuyN09fuP8Jtp1CpfSh8O8bMkHbdbPe6Pw==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.7.tgz",
+      "integrity": "sha512-U7DtjfsHeYjNAyEz4MdCLGZMY3ySyHIgZZp6ba9uxZlMRMiK5yTHUYc2XfGQHKFgxGcmvBF2jafoNtQYvlDpOw==",
       "requires": {
         "setimmediate": "1.0.5"
       }
@@ -17417,7 +17578,7 @@
       "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-4.2.0.tgz",
       "integrity": "sha512-EvnwgbEUklPQK82OiZS0NDrG0ZoH91+zef8PFXSOZocSQ5jklQyvAM84Id20UxjVdXVIzMgFu+vlKCQomfq27A==",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "enhanced-resolve": "4.0.0",
         "loader-utils": "1.1.0",
         "micromatch": "3.1.10",
@@ -17694,13 +17855,13 @@
       "requires": {
         "babel-code-frame": "6.26.0",
         "builtin-modules": "1.1.1",
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "commander": "2.15.1",
         "diff": "3.5.0",
         "glob": "7.1.2",
         "js-yaml": "3.7.0",
         "minimatch": "3.0.4",
-        "resolve": "1.7.0",
+        "resolve": "1.7.1",
         "semver": "5.5.0",
         "tslib": "1.9.0",
         "tsutils": "2.26.1"
@@ -17771,9 +17932,9 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typescript": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz",
-      "integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.1.tgz",
+      "integrity": "sha512-Ao/f6d/4EPLq0YwzsQz8iXflezpTkQzqAyenTiw4kCUGr1uPiFLC3+fZ+gMZz6eeI/qdRUqvC+HxIJzUAzEFdg=="
     },
     "typical": {
       "version": "2.6.1",
@@ -18140,20 +18301,20 @@
       "integrity": "sha512-VJ3csMz5zP1ifkbBlsNYpxnoWkPHfVRQ8tUongS78W5DxSGHB68pjYHDTgUYBkVM7P/HpYdVukgVUFcxjr1gGg=="
     },
     "velocity-react": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/velocity-react/-/velocity-react-1.3.3.tgz",
-      "integrity": "sha1-1tRyds/Ivip1Yjh5sgFArFjBuCs=",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/velocity-react/-/velocity-react-1.4.0.tgz",
+      "integrity": "sha512-DUb+uCIjv9PboB0GprUxHE5oWij5sm40qRZmpRgZMcBBd0g3T97q/hHafxoTzM5g2ZI5GUA5kQF98oONOXxwiQ==",
       "requires": {
-        "lodash": "3.10.1",
+        "lodash": "4.17.5",
         "prop-types": "15.6.1",
-        "react-transition-group": "1.2.1",
+        "react-transition-group": "2.3.1",
         "velocity-animate": "1.5.1"
       },
       "dependencies": {
         "lodash": {
-          "version": "3.10.1",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
-          "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
@@ -18226,6 +18387,14 @@
         "parse5": "3.0.3"
       }
     },
+    "w3c-hr-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
+      "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=",
+      "requires": {
+        "browser-process-hrtime": "0.1.2"
+      }
+    },
     "walker": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
@@ -18258,7 +18427,7 @@
       "requires": {
         "chokidar": "2.0.3",
         "graceful-fs": "4.1.11",
-        "neo-async": "2.5.0"
+        "neo-async": "2.5.1"
       },
       "dependencies": {
         "anymatch": {
@@ -18583,7 +18752,7 @@
       "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
       "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
       "requires": {
-        "minimalistic-assert": "1.0.0"
+        "minimalistic-assert": "1.0.1"
       }
     },
     "webidl-conversions": {
@@ -18831,7 +19000,7 @@
             "babel-register": "6.26.0",
             "babylon": "6.18.0",
             "colors": "1.1.2",
-            "flow-parser": "0.69.0",
+            "flow-parser": "0.70.0",
             "lodash": "4.15.0",
             "micromatch": "2.3.11",
             "node-dir": "0.1.8",
@@ -18872,7 +19041,7 @@
       "requires": {
         "acorn": "5.5.3",
         "bfj-node4": "5.3.1",
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "commander": "2.15.1",
         "ejs": "2.5.8",
         "express": "4.16.3",
@@ -18910,7 +19079,7 @@
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-2.0.14.tgz",
       "integrity": "sha512-gRoWaxSi2JWiYsn1QgOTb6ENwIeSvN1YExZ+kJ0STsTZK7bWPElW+BBBv1UnTbvcPC3v7E17mK8hlFX8DOYSGw==",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "cross-spawn": "6.0.5",
         "diff": "3.5.0",
         "enhanced-resolve": "4.0.0",
@@ -18929,13 +19098,13 @@
         "mkdirp": "0.5.1",
         "p-each-series": "1.0.0",
         "p-lazy": "1.0.0",
-        "prettier": "1.11.1",
-        "supports-color": "5.3.0",
+        "prettier": "1.12.1",
+        "supports-color": "5.4.0",
         "v8-compile-cache": "1.1.2",
         "webpack-addons": "1.1.5",
         "yargs": "11.1.0",
         "yeoman-environment": "2.0.6",
-        "yeoman-generator": "2.0.3"
+        "yeoman-generator": "2.0.4"
       },
       "dependencies": {
         "ansi-escapes": {
@@ -18976,7 +19145,7 @@
           "integrity": "sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==",
           "requires": {
             "ansi-escapes": "3.1.0",
-            "chalk": "2.3.2",
+            "chalk": "2.4.0",
             "cli-cursor": "2.1.0",
             "cli-width": "2.2.0",
             "external-editor": "2.2.0",
@@ -18984,7 +19153,7 @@
             "lodash": "4.17.5",
             "mute-stream": "0.0.7",
             "run-async": "2.3.0",
-            "rxjs": "5.5.8",
+            "rxjs": "5.5.10",
             "string-width": "2.1.1",
             "strip-ansi": "4.0.0",
             "through": "2.3.8"
@@ -19039,7 +19208,7 @@
       "requires": {
         "loud-rejection": "1.6.0",
         "memory-fs": "0.4.1",
-        "mime": "2.2.2",
+        "mime": "2.3.1",
         "path-is-absolute": "1.0.1",
         "range-parser": "1.2.0",
         "url-join": "4.0.0",
@@ -19047,9 +19216,9 @@
       },
       "dependencies": {
         "mime": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.2.2.tgz",
-          "integrity": "sha512-A7PDg4s48MkqFEcYg2b069m3DXOEq7hx+9q9rIFrSSYfzsh35GX+LOVMQ8Au0ko7d8bSQCIAuzkjp0vCtwENlQ=="
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.3.1.tgz",
+          "integrity": "sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg=="
         }
       }
     },
@@ -19082,7 +19251,7 @@
         "sockjs-client": "1.1.4",
         "spdy": "3.4.7",
         "strip-ansi": "3.0.1",
-        "supports-color": "5.3.0",
+        "supports-color": "5.4.0",
         "webpack-dev-middleware": "1.12.2",
         "yargs": "6.6.0"
       },
@@ -19540,9 +19709,9 @@
       }
     },
     "webpack-hot-middleware": {
-      "version": "2.22.0",
-      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.22.0.tgz",
-      "integrity": "sha512-kmjTZ6WXZowuBfTk1/H/scmyp09eHwPpqF2mHRZ9WMCBlQ61NSkqZ25azPlPOeCIhva57PGrUyeTIW5X8Q7HEw==",
+      "version": "2.21.2",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.21.2.tgz",
+      "integrity": "sha512-N5c80o31E0COFJV8HRjiX3hJetDOwQ2Ajt5TTORKA9diOimhFtmaZKSfO3pQKMeQngb7I4TUnNDroJiUzPFhKQ==",
       "requires": {
         "ansi-html": "0.0.7",
         "html-entities": "1.2.1",
@@ -19555,7 +19724,7 @@
       "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-1.2.0.tgz",
       "integrity": "sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "log-symbols": "2.2.0",
         "loglevelnext": "1.0.4",
         "uuid": "3.2.1"
@@ -19614,6 +19783,11 @@
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
       "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
     },
+    "whatwg-mimetype": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz",
+      "integrity": "sha512-FKxhYLytBQiUKjkYteN71fAUA3g6KpNXoho1isLiLSB3N1G4F35Q5vUxWfKFhBwi5IWF27VE6WxhrnnC+m0Mew=="
+    },
     "whatwg-url": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-4.8.0.tgz",
@@ -19753,7 +19927,7 @@
         "filesize": "3.6.1",
         "lodash": "4.15.0",
         "mkdirp": "0.5.1",
-        "moment": "2.22.0"
+        "moment": "2.22.1"
       },
       "dependencies": {
         "ansi-styles": {
@@ -19967,7 +20141,7 @@
       "resolved": "https://registry.npmjs.org/yeoman-environment/-/yeoman-environment-2.0.6.tgz",
       "integrity": "sha512-jzHBTTy8EPI4ImV8dpUMt+Q5zELkSU5xvGpndHcHudQ4tqN6YgIWaCGmRFl+HDchwRUkcgyjQ+n6/w5zlJBCPg==",
       "requires": {
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "debug": "3.1.0",
         "diff": "3.5.0",
         "escape-string-regexp": "1.0.5",
@@ -19998,7 +20172,7 @@
           "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==",
           "requires": {
             "ansi-escapes": "3.1.0",
-            "chalk": "2.3.2",
+            "chalk": "2.4.0",
             "cli-cursor": "2.1.0",
             "cli-width": "2.2.0",
             "external-editor": "2.2.0",
@@ -20029,12 +20203,12 @@
       }
     },
     "yeoman-generator": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/yeoman-generator/-/yeoman-generator-2.0.3.tgz",
-      "integrity": "sha512-mODmrZ26a94djmGZZuIiomSGlN4wULdou29ZwcySupb2e9FdvoCl7Ps2FqHFjEHio3kOl/iBeaNqrnx3C3NwWg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/yeoman-generator/-/yeoman-generator-2.0.4.tgz",
+      "integrity": "sha512-Sgvz3MAkOpEIobcpW3rjEl6bOTNnl8SkibP9z7hYKfIGIlw0QDC2k0MAeXvyE2pLqc2M0Duql+6R7/W9GrJojg==",
       "requires": {
         "async": "2.6.0",
-        "chalk": "2.3.2",
+        "chalk": "2.4.0",
         "cli-table": "0.3.1",
         "cross-spawn": "5.1.0",
         "dargs": "5.1.0",
diff --git a/ghdocs/BestPractices/ComponentDesign.md b/ghdocs/BestPractices/ComponentDesign.md
index 840a2759ffaa2..5368c017587de 100644
--- a/ghdocs/BestPractices/ComponentDesign.md
+++ b/ghdocs/BestPractices/ComponentDesign.md
@@ -189,9 +189,9 @@ public render() {
 
 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)
+The `createRef` function in `lib/Utilities` is a polyfill for [React.createRef](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs). (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.
+`createRef` creates a reference object that has the following type `{ current: 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 `.current` property on the reference object elsewhere in your code.
 
 ```typescript
 import { createRef } from 'office-ui-fabric-react/lib/Utilities';
@@ -200,14 +200,14 @@ class Foo extends BaseComponent<...> {
   // Create the reference object that will be used for setting and accessing the reference
   private _root = createRef<HTMLButtonElement>();
 
-  public render() {
+  public render(): JSX.Element {
     // 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();
+  private _onClick(): void {
+    // Access the reference through the .current property on the reference object
+    this._root.current.focus();
   }
 }
 ```
@@ -436,7 +436,7 @@ class Foo extends React.Component {
     return <div onClick={ this._onClick }>{ `Foo ${ this._fooRocks ? 'rocks' : 'rolls' }</div>;
   }
 
-  private _onClick() {
+  private _onClick(): void {
     this._fooRocks = !this._fooRocks;
     this.forceUpdate();
   }
@@ -457,7 +457,7 @@ class Foo extends React.Component {
     return <div onClick={ this._onClick }>{ `Foo ${ this.state.fooRocks ? 'rocks' : 'rolls' }</div>;
   }
 
-  private _onClick() {
+  private _onClick(): void {
     this.setState({
       fooRocks: !this.state.fooRocks
     });
diff --git a/ghdocs/BestPractices/Styling.md b/ghdocs/BestPractices/Styling.md
index 9777f8c931d52..9a36550aefe33 100644
--- a/ghdocs/BestPractices/Styling.md
+++ b/ghdocs/BestPractices/Styling.md
@@ -56,7 +56,7 @@ Within the component implementation, when we need to convert these styles into c
 const getClassNames = classNameFunction<ICompStyleProps, ICompStyles>();
 
 class Comp extends React.Component {
-  public render() {
+  public render(): JSX.Element {
     const { getStyles, theme } = this.props;
     const classNames = getClassNames(getStyles, { /* style props */ });
 
@@ -150,7 +150,7 @@ import { IComponentNameProps } from ='./ComponentName.props';
 const getClassNames = classNameFunction<IComponentNameStyleProps, IComponentNameStyles>();
 
 export class ComponentName extends React.Component<...> {
-  public render() {
+  public render(): JSX.Element {
     const { getStyles, theme } = this.props;
     const classNames = getClassNames(getStyles, { theme: theme! });
 
diff --git a/ghdocs/Contributing/BugFixes.md b/ghdocs/Contributing/BugFixes.md
index b657ab6ca488a..24810d4b8e083 100644
--- a/ghdocs/Contributing/BugFixes.md
+++ b/ghdocs/Contributing/BugFixes.md
@@ -3,7 +3,7 @@
 
  Please use the following steps to contribute bug fixes
 
-* Setup your branch using instructions in [GitbranchSetup](./Setup.md)
+* Setup your branch using instructions in [Git branch Setup](./Setup.md)
 
 * Code and test the bug fix.
 
diff --git a/ghdocs/Contributing/NewComponent.md b/ghdocs/Contributing/NewComponent.md
index 0902671a9572d..c6ffb651b524a 100644
--- a/ghdocs/Contributing/NewComponent.md
+++ b/ghdocs/Contributing/NewComponent.md
@@ -60,26 +60,24 @@ Fundamental components are the official React representation of our [Adobe XD To
 
 #### Creating a component via the command line
 1. This is the recommended way of creating a new component.
-3. Open a command prompt in the root directory of your project directory.
-2. Run `npm run create-component -- --name ExcitingNewComponent`.
+2. Open a command prompt in the root directory of your project.
+3. Run `npm run create-component -- --name ExcitingNewComponent`.
 
 #### Creating a component manually
 1. From the root of the project, navigate to `packages/experiments/src/components/`
 2. Create a new folder here with your component name
-  * Our components use the Pascal Case naming convention.
-  * In this example the component will be called `ExcitingNewComponent`.
+   * Our components use the Pascal Case naming convention.
+   * In this example the component will be called `ExcitingNewComponent`.
 3. Create a `ExcitingNewComponent.types.ts` file that will contain an interface for your component props
-
-  * Import React
-    * `import * as React from 'react'`;
-  * Import ExcitingNewComponent
-    * `import { ExcitingNewComponent } from './ExcitingNewComponent'`;
-    * Note: This class and file don't exist yet but they will during step 4 of this small tutorial.
-  * Create an empty interface `IExcitingNewComponent`
-    * `export interface IExcitingNewComponent {}`
-  * Add your props interface to this file.
-    * `export interface IExcitingNewComponentProps extends React.Props<ExcitingNewComponent> { … Props }`
-  * Create and export an interface for ExcitingNewComponent styles.
+   * Import React
+     * `import * as React from 'react'`;
+   * Import ExcitingNewComponent
+     * `import { ExcitingNewComponent } from './ExcitingNewComponent'`;
+     * Note: This class and file don't exist yet but they will during step 4 of this small tutorial.
+   * Create an empty interface `IExcitingNewComponent`
+     * `export interface IExcitingNewComponent {}`
+   * Add your props interface to this file.
+     * `export interface IExcitingNewComponentProps extends React.Props<ExcitingNewComponent> { … Props }`
 
 4. Create a react file, `ExcitingNewComponent.tsx`.
 
@@ -89,19 +87,19 @@ import { BaseComponent } from '../../Utilities';
 import { IExcitingNewComponentProps } from './ExcitingNewComponent.types';
 
 export class ExcitingNewComponent extends BaseComponent <IExcitingNewComponentProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return(
       <div>Hello World!</div>
     );
   }
-}; // @todo: this ; needs to be removed
+}
 ```
 
-5. Create a class names file `ExcitingNewComponent.classNames.ts`
+5. Create a class names file `ExcitingNewComponent.styles.ts`
 
 ```ts
 import { memoizeFunction } from '../../Utilities';
-import { mergeStyleSets} from '../../Styling';
+import { mergeStyleSets, IStyle } from '../../Styling';
 
 export interface IExcitingNewComponentStyles {
    /**
@@ -111,16 +109,16 @@ export interface IExcitingNewComponentStyles {
 }
 
 export interface IExcitingNewComponentNames {
-	/**
-	* Root html container for this component.
-	*/
-	root?: string;
+  /**
+   * Root html container for this component.
+   */
+  root?: string;
 }
 
 export const getClassNames = memoizeFunction((): IExcitingNewComponentNames => {
-	return mergeStyleSets({
-		root: []
-	});
+  return mergeStyleSets({
+    root: []
+  });
 });
 ```
 
diff --git a/packages/example-app-base/CHANGELOG.json b/packages/example-app-base/CHANGELOG.json
index d4aa248d3b5fa..f1f2075ad73ec 100644
--- a/packages/example-app-base/CHANGELOG.json
+++ b/packages/example-app-base/CHANGELOG.json
@@ -1,6 +1,78 @@
 {
   "name": "@uifabric/example-app-base",
   "entries": [
+    {
+      "version": "5.10.2",
+      "tag": "@uifabric/example-app-base_v5.10.2",
+      "date": "Thu, 19 Apr 2018 18:25:59 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "e77a31bee560440bae3737eca6b19fce2c1ae3db",
+            "comment": "Update createRef to match React.createRef api"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.24.0 <6.0.0` to `>=5.25.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.10.1",
+      "tag": "@uifabric/example-app-base_v5.10.1",
+      "date": "Wed, 18 Apr 2018 10:15:04 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "4efff92981d7301ac16bc8a2cbd7624585f9c42b",
+            "comment": "Fix code block line-height"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.1 <6.0.0` to `>=5.24.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.10.0",
+      "tag": "@uifabric/example-app-base_v5.10.0",
+      "date": "Mon, 16 Apr 2018 10:23:25 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "ebbb57390d6fbaba5106ea5d0ca18aa022348f4b",
+            "comment": "Add new APIs for editing sections on GitHub."
+          }
+        ],
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4",
+            "comment": "Removing module entry temporarily. (Will be added back in 6.0.)"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e",
+            "comment": "Updating build to React 16.3.1."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.0 <6.0.0` to `>=5.23.1 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.23.0 <6.0.0` to `>=5.24.0 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.9.0",
       "tag": "@uifabric/example-app-base_v5.9.0",
diff --git a/packages/example-app-base/CHANGELOG.md b/packages/example-app-base/CHANGELOG.md
index 5207c37bdc3bd..a6a946b9d255e 100644
--- a/packages/example-app-base/CHANGELOG.md
+++ b/packages/example-app-base/CHANGELOG.md
@@ -1,6 +1,32 @@
 # Change Log - @uifabric/example-app-base
 
-This log was last generated on Thu, 12 Apr 2018 10:15:54 GMT and should not be manually modified.
+This log was last generated on Thu, 19 Apr 2018 18:25:59 GMT and should not be manually modified.
+
+## 5.10.2
+Thu, 19 Apr 2018 18:25:59 GMT
+
+### Patches
+
+- Update createRef to match React.createRef api
+
+## 5.10.1
+Wed, 18 Apr 2018 10:15:04 GMT
+
+### Patches
+
+- Fix code block line-height
+
+## 5.10.0
+Mon, 16 Apr 2018 10:23:25 GMT
+
+### Minor changes
+
+- Add new APIs for editing sections on GitHub.
+
+### Patches
+
+- Removing module entry temporarily. (Will be added back in 6.0.)
+- Updating build to React 16.3.1.
 
 ## 5.9.0
 Thu, 12 Apr 2018 10:15:54 GMT
diff --git a/packages/example-app-base/package.json b/packages/example-app-base/package.json
index 1d8ad82dcb22c..8f671f832c1d0 100644
--- a/packages/example-app-base/package.json
+++ b/packages/example-app-base/package.json
@@ -1,9 +1,8 @@
 {
   "name": "@uifabric/example-app-base",
-  "version": "5.9.0",
+  "version": "5.10.2",
   "description": "Office UI Fabric example app base utilities for building example sites.",
   "main": "lib/index.js",
-  "module": "lib-es2015/index.js",
   "typings": "lib-es2015/index.d.ts",
   "sideEffects": true,
   "repository": {
@@ -19,23 +18,23 @@
   "devDependencies": {
     "@types/es6-promise": "0.0.32",
     "@types/highlight.js": "9.12.2",
-    "@types/react": "16.0.25",
-    "@types/react-dom": "16.0.3",
+    "@types/react": "16.3.10",
+    "@types/react-dom": "16.0.5",
     "@types/webpack-env": "1.13.0",
     "es6-map": "^0.1.5",
     "es6-promise": "^4.1.0",
     "es6-weak-map": "^2.0.2",
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1"
   },
   "peerDependencies": {
     "react": "^0.14.9 || ^15.0.1-0 || ^16.0.0-0",
     "react-dom": "^0.14.9 || ^15.0.1-0 || ^16.0.0-0"
   },
   "dependencies": {
-    "@uifabric/styling": ">=5.23.0 <6.0.0",
-    "@uifabric/utilities": ">=5.23.0 <6.0.0",
+    "@uifabric/styling": ">=5.25.0 <6.0.0",
+    "@uifabric/utilities": ">=5.25.0 <6.0.0",
     "highlight.js": "^9.12.0",
     "markdown-to-jsx": "^6.6.0",
     "office-ui-fabric-react": ">=5.1.0 <6.0.0",
diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss
index 9e4557531f4f9..4089033969d1f 100644
--- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss
+++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss
@@ -78,6 +78,23 @@ $dontColor: #A61E22;
     }
   }
 
+  .ComponentPage-usageHeader,
+  .ComponentPage-overviewSectionHeader,
+  .ComponentPage-doSectionHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .ComponentPage-usageHeader {
+    margin-top: 10px;
+    margin-bottom: $componentSubHeadMargin;
+
+    .ComponentPage-subHeading {
+      margin: 0;
+    }
+  }
+
   .ComponentPage-related {
     min-width: 200px;
 
@@ -141,17 +158,7 @@ $dontColor: #A61E22;
     margin-bottom: 20px;
 
     h3 {
-      margin: 16px 0 40px 0;
       @include ms-font-xl;
-
-      &::after {
-        background-color: #a4cf0c;
-        border-radius: 3px;
-        content: '';
-        display: block;
-        height: 8px;
-        margin: 12px 0;
-      }
     }
 
     ul {
@@ -171,9 +178,26 @@ $dontColor: #A61E22;
     &:first-child {
       @include ms-margin-right(120px);
     }
+
+    .ComponentPage-doSectionHeader {
+      margin: 16px 0 0 0;
+
+      h3 {
+        margin: 0;
+      }
+    }
+
+    .ComponentPage-doSectionLine {
+      background-color: #a4cf0c;
+      border-radius: 3px;
+      display: block;
+      height: 8px;
+      margin: 12px 0 40px;
+      border: 0;
+    }
   }
 
-  .ComponentPage-doSection--dont h3::after {
+  .ComponentPage-doSection--dont .ComponentPage-doSectionLine {
     background-color: #e74856;
   }
 
diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx
index 133752d29f0fd..30729325bb244 100644
--- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx
+++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx
@@ -7,6 +7,10 @@ import {
   Link
 } from 'office-ui-fabric-react/lib/Link';
 import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
+import {
+  EditSection,
+  ComponentPageSection,
+} from '../EditSection';
 import './ComponentPage.scss';
 
 export interface IComponentPageSection {
@@ -32,6 +36,40 @@ export interface IComponentPageProps {
   otherSections?: IComponentPageSection[];
   allowNativeProps?: boolean | string;
   nativePropsElement?: string | string[] | undefined;
+
+  /**
+   * Link to the Component root folder on GitHub.
+   * Enables 'View On GitHub' and all 'Edit' buttons.
+   */
+  componentUrl?: string;
+
+  /**
+   * Link to the BestPractices markdown file on GitHub.
+   * Enables the 'Edit Best Practices' button.
+   * Overrides URL from componentUrl.
+   */
+  editBestPracticesUrl?: string;
+
+  /**
+   * Link to the Donts markdown file on GitHub.
+   * Enables the 'Edit Don'ts' button.
+   * Overrides URL from componentUrl.
+   */
+  editDontsUrl?: string;
+
+  /**
+   * Link to the Dos markdown file on GitHub.
+   * Enables the 'Edit Dos' button.
+   * Overrides URL from componentUrl.
+   */
+  editDosUrl?: string;
+
+  /**
+   * Link to the Overview markdown file on GitHub.
+   * Enables the 'Edit Overview' button.
+   * Overrides URL from componentUrl.
+   */
+  editOverviewUrl?: string;
 }
 
 export class ComponentPage extends React.Component<IComponentPageProps, {}> {
@@ -63,7 +101,15 @@ export class ComponentPage extends React.Component<IComponentPageProps, {}> {
           <div className='ComponentPage-body'>
             { this._getComponentStatusBadges() }
             <div className='ComponentPage-overviewSection'>
-              <h2 className='ComponentPage-subHeading' id='Overview'>Overview</h2>
+              <div className='ComponentPage-overviewSectionHeader'>
+                <h2 className='ComponentPage-subHeading' id='Overview'>Overview</h2>
+                <EditSection
+                  title={ this.props.title }
+                  section={ ComponentPageSection.Overview }
+                  sectionContent={ this.props.overview }
+                  url={ this._getURL('Overview', this.props.editOverviewUrl) }
+                />
+              </div>
               <div className='ComponentPage-overviewSectionContent'>
                 <div className='ComponentPage-overview'>
                   { overview }
@@ -100,7 +146,7 @@ export class ComponentPage extends React.Component<IComponentPageProps, {}> {
     let {
       bestPractices,
       dos,
-      donts
+      donts,
     } = this.props;
 
     if (bestPractices && dos && donts) {
@@ -153,8 +199,8 @@ 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;
+      let elementString: string | string[] | JSX.Element = this.props.nativePropsElement || 'div';
+      let componentString: JSX.Element | undefined;
       if (typeof elementString === 'object' && elementString.length > 1) {
         const elementArr = elementString.slice();
         for (let _i = 0; _i < elementArr.length; _i++) {
@@ -196,11 +242,18 @@ export class ComponentPage extends React.Component<IComponentPageProps, {}> {
 
   private _getDosAndDonts(): JSX.Element | undefined {
     let dosAndDonts: Array<JSX.Element> = [];
-
     if (this.props.bestPractices) {
       dosAndDonts.push(
         <div className='ComponentPage-usage' id='BestPractices' key='best-practices'>
-          <h2 className='ComponentPage-subHeading'>Best Practices</h2>
+          <div className='ComponentPage-usageHeader'>
+            <h2 className='ComponentPage-subHeading'>Best Practices</h2>
+            <EditSection
+              title={ this.props.title }
+              section={ ComponentPageSection.BestPractices }
+              sectionContent={ this.props.bestPractices }
+              url={ this._getURL('BestPractices', this.props.editBestPracticesUrl) }
+            />
+          </div>
           { this.props.bestPractices }
         </div>
       );
@@ -210,11 +263,29 @@ export class ComponentPage extends React.Component<IComponentPageProps, {}> {
       dosAndDonts.push(
         <div className='ComponentPage-doSections' key='do-sections'>
           <div className='ComponentPage-doSection'>
-            <h3>Do</h3>
+            <div className='ComponentPage-doSectionHeader'>
+              <h3>Do</h3>
+              <EditSection
+                title={ this.props.title }
+                section={ ComponentPageSection.Dos }
+                sectionContent={ this.props.dos }
+                url={ this._getURL('Dos', this.props.editDosUrl) }
+              />
+            </div>
+            <hr className='ComponentPage-doSectionLine' />
             { this.props.dos }
           </div>
           <div className='ComponentPage-doSection ComponentPage-doSection--dont'>
-            <h3>Don&rsquo;t</h3>
+            <div className='ComponentPage-doSectionHeader'>
+              <h3>Don&rsquo;t</h3>
+              <EditSection
+                title={ this.props.title }
+                section={ ComponentPageSection.Donts }
+                sectionContent={ this.props.donts }
+                url={ this._getURL('Donts', this.props.editDontsUrl) }
+              />
+            </div>
+            <hr className='ComponentPage-doSectionLine' />
             { this.props.donts }
           </div>
         </div>
@@ -287,4 +358,23 @@ export class ComponentPage extends React.Component<IComponentPageProps, {}> {
 
     return undefined;
   }
+
+  private _getURL(section: string, url?: string): string {
+    if (url) {
+      return url;
+    }
+    const componentName = (this.props.title || this.props.componentName).replace(/\s/g, '');
+    // Generate edit URL from componentURL
+    let mdUrl;
+    if (this.props.componentUrl) {
+      mdUrl = `${this.props.componentUrl}/docs/${componentName}${section}.md`;
+      // Replace /tree/ or /blob/ with /edit/ to get straight to GitHub editor.
+      if (mdUrl!.includes('/tree/')) {
+        mdUrl = mdUrl!.replace('/tree/', '/edit/');
+      } else if (mdUrl!.includes('/blob/')) {
+        mdUrl = mdUrl!.replace('/blob/', '/edit/');
+      }
+    }
+    return mdUrl;
+  }
 }
diff --git a/packages/example-app-base/src/components/EditSection/EditSection.tsx b/packages/example-app-base/src/components/EditSection/EditSection.tsx
new file mode 100644
index 0000000000000..bb7546d9afbe3
--- /dev/null
+++ b/packages/example-app-base/src/components/EditSection/EditSection.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import {
+  IEditSectionProps,
+  ComponentPageSection,
+} from './EditSection.types';
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+
+export class EditSection extends React.Component<IEditSectionProps, {}> {
+  public render(): JSX.Element | null {
+    const { sectionContent } = this.props;
+    const isMarkdown = sectionContent ? typeof sectionContent.type === 'function' : false;
+    if (isMarkdown === false) {
+      return null;
+    }
+
+    const {
+      title,
+      section: sectionIndex,
+      url,
+    } = this.props;
+    const section = ComponentPageSection[sectionIndex!];
+    const readableSection = this._getReadableSection();
+
+    return (
+      <TooltipHost
+        key={ `${title}-${section}-editButton` }
+        content={ `Edit ${title} ${readableSection} on GitHub` }
+        id={ `${title}-${section}-editButtonHost` }
+      >
+        <IconButton
+          aria-labelledby={ `${title}-${section}-editButtonHost` }
+          iconProps={ { iconName: 'Edit' } }
+          href={ url }
+          target='_blank'
+          rel='noopener noreferrer'
+        />
+      </TooltipHost>
+    );
+  }
+
+  private _getReadableSection(): string {
+    const {
+      section: sectionIndex,
+      readableSection: readableSectionProp,
+    } = this.props;
+    if (readableSectionProp) {
+      return readableSectionProp;
+    }
+
+    const section = ComponentPageSection[sectionIndex!];
+    let readableSection = section;
+    switch (sectionIndex) {
+      case ComponentPageSection.BestPractices:
+        readableSection = 'Best Practices';
+        break;
+      case ComponentPageSection.Donts:
+        readableSection = 'Don\'ts';
+        break;
+      default:
+        readableSection = section;
+    }
+    return readableSection;
+  }
+}
\ No newline at end of file
diff --git a/packages/example-app-base/src/components/EditSection/EditSection.types.ts b/packages/example-app-base/src/components/EditSection/EditSection.types.ts
new file mode 100644
index 0000000000000..93e426651dd71
--- /dev/null
+++ b/packages/example-app-base/src/components/EditSection/EditSection.types.ts
@@ -0,0 +1,47 @@
+import { EditSection } from './EditSection';
+
+export enum ComponentPageSection {
+  BestPractices,
+  Donts,
+  Dos,
+  Overview,
+}
+
+export interface IEditSection {
+
+}
+
+export interface IEditSectionProps extends React.HTMLAttributes<EditSection> {
+  /**
+   * Optional callback to access the IPersona interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IEditSection | null) => void;
+
+  /**
+   * The name of the Component
+   */
+  title: string;
+
+  /**
+   * The section of the page.
+   */
+  section: ComponentPageSection;
+
+  /**
+   * Pass the prop that has the content of the section.
+   * This checks if the content is a function before showing
+   * the EditSection button.
+   */
+  sectionContent: JSX.Element;
+
+  /**
+   * Override for section name.
+   */
+  readableSection?: string;
+
+  /**
+   * Url for the edit button.
+   */
+  url: string;
+}
\ No newline at end of file
diff --git a/packages/example-app-base/src/components/EditSection/index.ts b/packages/example-app-base/src/components/EditSection/index.ts
new file mode 100644
index 0000000000000..0b132dae270cc
--- /dev/null
+++ b/packages/example-app-base/src/components/EditSection/index.ts
@@ -0,0 +1,2 @@
+export * from './EditSection';
+export * from './EditSection.types';
\ No newline at end of file
diff --git a/packages/example-app-base/src/components/Highlight/Highlight.tsx b/packages/example-app-base/src/components/Highlight/Highlight.tsx
index c11c2a5993fd4..51482f0bc9621 100644
--- a/packages/example-app-base/src/components/Highlight/Highlight.tsx
+++ b/packages/example-app-base/src/components/Highlight/Highlight.tsx
@@ -31,8 +31,8 @@ export class Highlight extends BaseComponent<IHighlightProps, {}> {
   }
 
   public componentDidMount(): void {
-    if (this._codeElement.value) {
-      highlightBlock(this._codeElement.value);
+    if (this._codeElement.current) {
+      highlightBlock(this._codeElement.current);
     }
   }
 }
diff --git a/packages/example-app-base/src/components/templates/TypeScriptSnippet.tsx b/packages/example-app-base/src/components/templates/TypeScriptSnippet.tsx
index f1257e07fadab..41f471ca4b88b 100644
--- a/packages/example-app-base/src/components/templates/TypeScriptSnippet.tsx
+++ b/packages/example-app-base/src/components/templates/TypeScriptSnippet.tsx
@@ -13,10 +13,11 @@ registerLanguage('typescript', ts);
 export const rootClass = mergeStyles({
   overflowY: 'auto',
   maxHeight: '400px',
+  display: 'flex',
   selectors: {
     'code': {
       fontFamily: 'Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace',
-      lineHeight: 19
+      lineHeight: '1.6'
     }
   }
 });
@@ -28,7 +29,7 @@ export const lineNumberStyle = {
   display: 'block',
   borderRight: '1px solid #666',
   paddingRight: 4,
-  lineHeight: '19px'
+  lineHeight: 'inherit',
 };
 
 export class TypeScriptSnippet extends React.Component {
diff --git a/packages/example-app-base/src/index.ts b/packages/example-app-base/src/index.ts
index 5b271b3fd2947..12d6abe83f820 100644
--- a/packages/example-app-base/src/index.ts
+++ b/packages/example-app-base/src/index.ts
@@ -1,7 +1,7 @@
 export * from './components/App/App';
 export * from './components/ComponentPage/ComponentPage';
-export * from './components/ComponentPage/ComponentPage';
 export * from './components/ComponentPage/IComponentDemoPageProps';
+export * from './components/EditSection';
 export * from './components/ExampleCard/ExampleCard';
 export * from './components/Header/Header';
 export * from './components/Highlight/Highlight';
diff --git a/packages/example-app-base/src/utilities/createApp.tsx b/packages/example-app-base/src/utilities/createApp.tsx
index 076c9473649d8..0f882b7c894bd 100644
--- a/packages/example-app-base/src/utilities/createApp.tsx
+++ b/packages/example-app-base/src/utilities/createApp.tsx
@@ -91,7 +91,7 @@ export function createApp(
 
 function _getComponent<TProps extends React.Props<{}>>(props: TProps): JSX.Element {
   return (
-    <div { ...props } />
+    <div { ...props as React.HTMLAttributes<HTMLDivElement> } />
   );
 }
 
diff --git a/packages/experiments/CHANGELOG.json b/packages/experiments/CHANGELOG.json
index 41ea85b74ebaf..32a7a32045878 100644
--- a/packages/experiments/CHANGELOG.json
+++ b/packages/experiments/CHANGELOG.json
@@ -1,6 +1,132 @@
 {
   "name": "@uifabric/experiments",
   "entries": [
+    {
+      "version": "5.31.4",
+      "tag": "@uifabric/experiments_v5.31.4",
+      "date": "Thu, 19 Apr 2018 18:25:59 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "e77a31bee560440bae3737eca6b19fce2c1ae3db",
+            "comment": "Update createRef to match React.createRef api"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.83.0 <6.0.0` to `>=5.84.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.10.1 <6.0.0` to `>=5.10.2 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.31.3",
+      "tag": "@uifabric/experiments_v5.31.3",
+      "date": "Wed, 18 Apr 2018 10:15:04 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Vitalie Braga <vitaliebraga@gmail.com>",
+            "commit": "7dabb13e55f671e3c37df88140e66dbee076e2f1",
+            "comment": "Experiments: NavPage bad imports fixed."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.82.2 <6.0.0` to `>=5.82.3 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.10.0 <6.0.0` to `>=5.10.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.31.2",
+      "tag": "@uifabric/experiments_v5.31.2",
+      "date": "Tue, 17 Apr 2018 18:47:11 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "4dc9071ade20efb98eded9b97aa9124a9232f84a",
+            "comment": "Fix improper imports from index files"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.82.1 <6.0.0` to `>=5.82.2 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.31.1",
+      "tag": "@uifabric/experiments_v5.31.1",
+      "date": "Mon, 16 Apr 2018 10:23:25 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "amyngu <31973030+amyngu@users.noreply.github.com>",
+            "commit": "7a5e2c39132dad0e66277ea7ae098bc90727e131",
+            "comment": "prefer const, instead of let, for extendedpicker, floatingpicker, and selecteditemlists"
+          },
+          {
+            "author": "Sivaraman Krishnan <12967315+sikrishn@users.noreply.github.com>",
+            "commit": "d6f161bad359e580606f95dfec1ce7095a7bbe48",
+            "comment": "M365Nav component as an experiment"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4",
+            "comment": "Removing module entry temporarily. (Will be added back in 6.0.)"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e",
+            "comment": "Updating build to React 16.3.1."
+          },
+          {
+            "author": "Vitalie Braga <vitaliebraga@gmail.com>",
+            "commit": "a1d92a6b96a7bfe0c93814dd7a539ce7cc52e0c9",
+            "comment": "Shimmer: Changes casing on enums in Shimmer.types"
+          },
+          {
+            "author": "Vitalie Braga <vitaliebraga@gmail.com>",
+            "commit": "c38b371b09a813f345a90739689e391d221a6262",
+            "comment": "Experiments: fixing imports for example pages for better user understanding."
+          },
+          {
+            "author": "Vitalie Braga <vitaliebraga@gmail.com>",
+            "commit": "7c9c5c62c5430ae386672012dd1f5ee46d0852bd",
+            "comment": "Shimmer: adding two more examples as per designers request."
+          },
+          {
+            "author": "Vitalie Braga <vitaliebraga@gmail.com>",
+            "commit": "5a67c36391186ce30d25130b69a358525e1f0823",
+            "comment": "Shimmer: imports audited"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.81.1 <6.0.0` to `>=5.82.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/icons\" from `>=5.7.0 <6.0.0` to `>=5.7.1 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.9.0 <6.0.0` to `>=5.10.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/file-type-icons\" from `>=0.6.0 <1.0.0` to `>=0.6.1 <1.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.31.0",
       "tag": "@uifabric/experiments_v5.31.0",
diff --git a/packages/experiments/CHANGELOG.md b/packages/experiments/CHANGELOG.md
index 851a24ceb9d5e..78d079c5d2ebb 100644
--- a/packages/experiments/CHANGELOG.md
+++ b/packages/experiments/CHANGELOG.md
@@ -1,6 +1,41 @@
 # Change Log - @uifabric/experiments
 
-This log was last generated on Thu, 12 Apr 2018 10:15:54 GMT and should not be manually modified.
+This log was last generated on Thu, 19 Apr 2018 18:25:59 GMT and should not be manually modified.
+
+## 5.31.4
+Thu, 19 Apr 2018 18:25:59 GMT
+
+### Patches
+
+- Update createRef to match React.createRef api
+
+## 5.31.3
+Wed, 18 Apr 2018 10:15:04 GMT
+
+### Patches
+
+- Experiments: NavPage bad imports fixed.
+
+## 5.31.2
+Tue, 17 Apr 2018 18:47:11 GMT
+
+### Patches
+
+- Fix improper imports from index files
+
+## 5.31.1
+Mon, 16 Apr 2018 10:23:25 GMT
+
+### Patches
+
+- prefer const, instead of let, for extendedpicker, floatingpicker, and selecteditemlists
+- M365Nav component as an experiment
+- Removing module entry temporarily. (Will be added back in 6.0.)
+- Updating build to React 16.3.1.
+- Shimmer: Changes casing on enums in Shimmer.types
+- Experiments: fixing imports for example pages for better user understanding.
+- Shimmer: adding two more examples as per designers request.
+- Shimmer: imports audited
 
 ## 5.31.0
 Thu, 12 Apr 2018 10:15:54 GMT
diff --git a/packages/experiments/index.html b/packages/experiments/index.html
index 8f5cb70e7cb08..e393a626195dd 100644
--- a/packages/experiments/index.html
+++ b/packages/experiments/index.html
@@ -34,12 +34,12 @@
       }
     }
     loadScript(isProduction ? [
-      '//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js',
-      '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js',
+      '//cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js',
+      '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js',
       'demo-app.min.js'
     ] : [
-        '//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js',
-        '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js',
+        '//cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.development.js',
+        '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.development.js',
         'demo-app.js'
       ]);
   </script>
diff --git a/packages/experiments/package.json b/packages/experiments/package.json
index f419b05410242..b11b8e97664aa 100644
--- a/packages/experiments/package.json
+++ b/packages/experiments/package.json
@@ -1,9 +1,8 @@
 {
   "name": "@uifabric/experiments",
-  "version": "5.31.0",
+  "version": "5.31.4",
   "description": "Experimental React components for building experiences for Office 365.",
   "main": "lib/index.js",
-  "module": "lib-es2015/index.js",
   "typings": "lib-es2015/index.d.ts",
   "sideEffects": true,
   "repository": {
@@ -21,33 +20,33 @@
   "devDependencies": {
     "@types/es6-promise": "0.0.32",
     "@types/prop-types": "15.5.2",
-    "@types/react": "16.0.25",
+    "@types/react": "16.3.10",
     "@types/react-addons-test-utils": "0.14.18",
     "@types/react-test-renderer": "^16.0.0",
-    "@types/react-dom": "16.0.3",
+    "@types/react-dom": "16.0.5",
     "@types/resemblejs": "~1.3.28",
     "@types/sinon": "2.2.2",
     "@types/jest": "21.1.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.9.0 <6.0.0",
-    "@uifabric/file-type-icons": ">=0.6.0 <1.0.0",
+    "@uifabric/example-app-base": ">=5.10.2 <6.0.0",
+    "@uifabric/file-type-icons": ">=0.6.1 <1.0.0",
     "@uifabric/jest-serializer-merge-styles": ">=5.1.0 <6.0.0",
     "es6-weak-map": "^2.0.2",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0",
-    "react": "^16.2.0",
+    "react": "^16.3.1",
     "react-test-renderer": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.3.1",
     "react-highlight": "0.10.0",
     "sinon": "^4.1.3"
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
-    "office-ui-fabric-react": ">=5.81.1 <6.0.0",
-    "@uifabric/icons": ">=5.7.0 <6.0.0",
+    "office-ui-fabric-react": ">=5.85.0 <6.0.0",
+    "@uifabric/icons": ">=5.7.1 <6.0.0",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"
   },
diff --git a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
index ed460e5a82c22..515c246b51753 100644
--- a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
+++ b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
@@ -56,7 +56,7 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
 
   private _overflowSet = createRef<IOverflowSet>();
   private _resizeGroup = createRef<IResizeGroup>();
-  private _classNames: {[key in keyof ICommandBarStyles]: string };
+  private _classNames: { [key in keyof ICommandBarStyles]: string };
 
   public render(): JSX.Element {
     const {
@@ -134,13 +134,13 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
   }
 
   public focus(): void {
-    const { value: overflowSet } = this._overflowSet;
+    const { current: overflowSet } = this._overflowSet;
 
     overflowSet && overflowSet.focus();
   }
 
   public remeasure(): void {
-    this._resizeGroup.value && this._resizeGroup.value.remeasure();
+    this._resizeGroup.current && this._resizeGroup.current.remeasure();
   }
 
   private _computeCacheKey(primaryItems: ICommandBarItemProps[], farItems: ICommandBarItemProps[], overflow: boolean): string {
diff --git a/packages/experiments/src/components/CommandBar/CommandBar.test.tsx b/packages/experiments/src/components/CommandBar/CommandBar.test.tsx
index cdc75037b459b..fae541993fdf6 100644
--- a/packages/experiments/src/components/CommandBar/CommandBar.test.tsx
+++ b/packages/experiments/src/components/CommandBar/CommandBar.test.tsx
@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
-
 import { CommandBar } from './CommandBar';
 import * as renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
diff --git a/packages/experiments/src/components/CommandBar/CommandBarPage.tsx b/packages/experiments/src/components/CommandBar/CommandBarPage.tsx
index 58d5cf6d29718..f8eddae5847b4 100644
--- a/packages/experiments/src/components/CommandBar/CommandBarPage.tsx
+++ b/packages/experiments/src/components/CommandBar/CommandBarPage.tsx
@@ -10,7 +10,7 @@ import { ICommandBarProps } from './CommandBar.types';
 import { CommandBarBasicExample } from './examples/CommandBar.Basic.Example';
 
 const CommandBarBasicExampleCode = require(
-  '!raw-loader!experiments/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx'
+  '!raw-loader!@uifabric/experiments/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx'
 ) as string;
 
 export class CommandBarPage extends React.Component<IComponentDemoPageProps, {}> {
@@ -31,7 +31,7 @@ export class CommandBarPage extends React.Component<IComponentDemoPageProps, {}>
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/CommandBar/CommandBar.types.ts'),
+              require<string>('!raw-loader!@uifabric/experiments/src/components/CommandBar/CommandBar.types.ts'),
               require<string>('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts')
             ] }
           />
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 d9fa592f5519f..7c7eab154bbbc 100644
--- a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
+++ b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
@@ -44,7 +44,6 @@ exports[`CommandBar renders commands correctly 1`] = `
               flex-grow: 1;
             }
         data-focuszone-id="FocusZone0"
-        onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -287,7 +286,6 @@ exports[`CommandBar renders commands correctly 1`] = `
               flex-shrink: 0;
             }
         data-focuszone-id="FocusZone7"
-        onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
diff --git a/packages/experiments/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx b/packages/experiments/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx
index c8de2cc7e917a..25e6b581fb3e9 100644
--- a/packages/experiments/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx
+++ b/packages/experiments/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { CommandBar } from '../CommandBar';
-import { ICommandBarProps } from './../CommandBar.types';
+import { CommandBar, ICommandBarProps } from '@uifabric/experiments/lib/CommandBar';
 
 export class CommandBarBasicExample extends React.Component<ICommandBarProps, {}> {
 
diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx
index 8e9dad90d677e..7880c3a408e92 100644
--- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx
@@ -84,15 +84,15 @@ describe('Pickers', () => {
           onRenderFloatingPicker={ basicRenderFloatingPicker }
         />
       );
-      let tree = component.toJSON();
+      const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('force resolves to the first suggestion', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
 
-      let picker: TypedBaseExtendedPicker = ReactDOM.render(
+      const picker: TypedBaseExtendedPicker = ReactDOM.render(
         <BaseExtendedPickerWithType
           floatingPickerProps={ floatingPickerProps }
           selectedItemsListProps={ selectedItemsListProps }
@@ -106,11 +106,11 @@ describe('Pickers', () => {
         picker.inputElement.value = 'bl';
       }
 
-      expect(picker.floatingPicker.value && picker.floatingPicker.value.suggestions.length).toBe(2);
-      expect(picker.floatingPicker.value && picker.floatingPicker.value.suggestions[0].name).toBe('black');
+      expect(picker.floatingPicker.current && picker.floatingPicker.current.suggestions.length).toBe(2);
+      expect(picker.floatingPicker.current && picker.floatingPicker.current.suggestions[0].name).toBe('black');
 
       // Force resolve to the first suggestions
-      picker.floatingPicker.value && picker.floatingPicker.value.forceResolveSuggestion();
+      picker.floatingPicker.current && picker.floatingPicker.current.forceResolveSuggestion();
       expect(picker.items.length).toBe(1);
       expect(picker.items[0].name).toBe('black');
 
@@ -118,10 +118,10 @@ describe('Pickers', () => {
     });
 
     it('Can hide and show picker', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
 
-      let picker: TypedBaseExtendedPicker = ReactDOM.render(
+      const picker: TypedBaseExtendedPicker = ReactDOM.render(
         <BaseExtendedPickerWithType
           floatingPickerProps={ floatingPickerProps }
           selectedItemsListProps={ selectedItemsListProps }
@@ -135,20 +135,20 @@ describe('Pickers', () => {
         picker.inputElement.value = 'bl';
       }
 
-      expect(picker.floatingPicker.value && picker.floatingPicker.value.isSuggestionsShown).toBeTruthy();
-      picker.floatingPicker.value && picker.floatingPicker.value.hidePicker();
-      expect(picker.floatingPicker.value && picker.floatingPicker.value.isSuggestionsShown).toBeFalsy();
-      picker.floatingPicker.value && picker.floatingPicker.value.showPicker();
-      expect(picker.floatingPicker.value && picker.floatingPicker.value.isSuggestionsShown).toBeTruthy();
+      expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeTruthy();
+      picker.floatingPicker.current && picker.floatingPicker.current.hidePicker();
+      expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeFalsy();
+      picker.floatingPicker.current && picker.floatingPicker.current.showPicker();
+      expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeTruthy();
 
       ReactDOM.unmountComponentAtNode(root);
     });
 
     it('Completes the suggestion', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
 
-      let picker: TypedBaseExtendedPicker = ReactDOM.render(
+      const picker: TypedBaseExtendedPicker = ReactDOM.render(
         <BaseExtendedPickerWithType
           floatingPickerProps={ floatingPickerProps }
           selectedItemsListProps={ selectedItemsListProps }
@@ -163,11 +163,11 @@ describe('Pickers', () => {
         ReactTestUtils.Simulate.keyDown(picker.inputElement, { which: KeyCodes.down });
       }
 
-      picker.floatingPicker.value && picker.floatingPicker.value.completeSuggestion();
-      expect(picker.selectedItemsList.value && picker.selectedItemsList.value.items.length).toBe(1);
-      expect(picker.selectedItemsList.value && picker.selectedItemsList.value.items[0].name).toBe('blue');
+      picker.floatingPicker.current && picker.floatingPicker.current.completeSuggestion();
+      expect(picker.selectedItemsList.current && picker.selectedItemsList.current.items.length).toBe(1);
+      expect(picker.selectedItemsList.current && picker.selectedItemsList.current.items[0].name).toBe('blue');
 
       ReactDOM.unmountComponentAtNode(root);
     });
   });
-});
+});
\ No newline at end of file
diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
index 46c0d32958d70..23befccb19dae 100644
--- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
@@ -46,7 +46,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   constructor(basePickerProps: P) {
     super(basePickerProps);
 
-    let items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
+    const items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
 
     this.selection = new Selection({ onSelectionChanged: () => this.onSelectionChange() });
     this.selection.setItems(items);
@@ -62,7 +62,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
 
   // tslint:disable-next-line:no-any
   public get items(): any {
-    return this.selectedItemsList.value ? this.selectedItemsList.value.items : [];
+    return this.selectedItemsList.current ? this.selectedItemsList.current.items : [];
   }
 
   public componentDidMount(): void {
@@ -70,24 +70,24 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   public focus(): void {
-    if (this.focusZone.value) {
-      this.focusZone.value.focus();
+    if (this.focusZone.current) {
+      this.focusZone.current.focus();
     }
   }
 
   public clearInput(): void {
-    if (this.input.value) {
-      this.input.value.clear();
+    if (this.input.current) {
+      this.input.current.clear();
     }
   }
 
   public get inputElement(): HTMLInputElement | null {
-    return this.input.value && this.input.value.inputElement;
+    return this.input.current && this.input.current.inputElement;
   }
 
   public render(): JSX.Element {
-    let { suggestedDisplayValue } = this.state;
-    let {
+    const { suggestedDisplayValue } = this.state;
+    const {
       className,
       inputProps,
       disabled
@@ -148,18 +148,18 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   protected renderSuggestions(): JSX.Element {
-    let onRenderFloatingPicker = this.props.onRenderFloatingPicker;
+    const onRenderFloatingPicker = this.props.onRenderFloatingPicker;
     return (onRenderFloatingPicker({
       componentRef: this.floatingPicker,
       onChange: this._onSuggestionSelected,
-      inputElement: this.input.value ? this.input.value.inputElement : undefined,
-      selectedItems: this.selectedItemsList.value ? this.selectedItemsList.value.items : [],
+      inputElement: this.input.current ? this.input.current.inputElement : undefined,
+      selectedItems: this.selectedItemsList.current ? this.selectedItemsList.current.items : [],
       ...this.floatingPickerProps
     }));
   }
 
   protected renderSelectedItemsList(): JSX.Element {
-    let onRenderSelectedItems = this.props.onRenderSelectedItems;
+    const onRenderSelectedItems = this.props.onRenderSelectedItems;
     return (onRenderSelectedItems({
       componentRef: this.selectedItemsList,
       ...this.selectedItemsListProps
@@ -167,37 +167,37 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   protected resetFocus(index?: number): void {
-    let { items } = this.state;
+    const { items } = this.state;
 
-    if (items.length && index! >= 0 && this.root.value) {
-      let newEl: HTMLElement = this.root.value
+    if (items.length && index! >= 0 && this.root.current) {
+      const newEl: HTMLElement = this.root.current
         .querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement;
-      if (newEl && this.focusZone.value) {
-        this.focusZone.value.focusElement(newEl);
+      if (newEl && this.focusZone.current) {
+        this.focusZone.current.focusElement(newEl);
       }
     } else if (!this.canAddItems()) {
       (items[items.length - 1] as IPickerItemProps<T>).selected = true;
       this.resetFocus(items.length - 1);
     } else {
-      if (this.input.value) {
-        this.input.value.focus();
+      if (this.input.current) {
+        this.input.current.focus();
       }
     }
   }
 
   protected onInputChange = (value: string): void => {
-    if (this.floatingPicker.value) {
-      this.floatingPicker.value.onQueryStringChanged(value);
+    if (this.floatingPicker.current) {
+      this.floatingPicker.current.onQueryStringChanged(value);
     }
   }
 
   protected onInputFocus = (ev: React.FocusEvent<HTMLInputElement | Autofill>): void => {
-    if (this.selectedItemsList.value) {
-      this.selectedItemsList.value.unselectAll();
+    if (this.selectedItemsList.current) {
+      this.selectedItemsList.current.unselectAll();
     }
 
-    if (this.floatingPicker.value) {
-      this.floatingPicker.value.showPicker(true /*updateValue*/);
+    if (this.floatingPicker.current) {
+      this.floatingPicker.current.showPicker(true /*updateValue*/);
     }
 
     if (this.props.inputProps && this.props.inputProps.onFocus) {
@@ -211,24 +211,24 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     if (ev.which !== KeyCodes.backspace) {
       return;
     }
-    if ((this.state.items.length && !this.input.value) || (this.input.value && !this.input.value.isValueSelected)) {
-      if (this.selectedItemsList.value && (this.input.value as Autofill).cursorLocation === 0) {
-        this.selectedItemsList.value.removeItemAt(this.items.length - 1);
+    if ((this.state.items.length && !this.input.current) || (this.input.current && !this.input.current.isValueSelected)) {
+      if (this.selectedItemsList.current && (this.input.current as Autofill).cursorLocation === 0) {
+        this.selectedItemsList.current.removeItemAt(this.items.length - 1);
         this._onSelectedItemsChanged();
       }
     }
   }
 
   protected onCopy = (ev: React.ClipboardEvent<HTMLElement>): void => {
-    if (this.selectedItemsList.value) {
+    if (this.selectedItemsList.current) {
       // Pass it down into the selected items list
-      this.selectedItemsList.value.onCopy(ev);
+      this.selectedItemsList.current.onCopy(ev);
     }
   }
 
   protected onPaste = (ev: React.ClipboardEvent<Autofill | HTMLInputElement>): void => {
     if (this.props.onPaste) {
-      let inputText = ev.clipboardData.getData('Text');
+      const inputText = ev.clipboardData.getData('Text');
       ev.preventDefault();
       this.props.onPaste(inputText);
     }
@@ -236,7 +236,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
 
   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 (this.floatingPicker.value && this.floatingPicker.value.isSuggestionsShown) {
+    if (this.floatingPicker.current && this.floatingPicker.current.isSuggestionsShown) {
       switch (ev.which) {
         case KeyCodes.up:
         case KeyCodes.down:
@@ -253,20 +253,20 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   protected _onSuggestionSelected = (item: T): void => {
-    if (this.selectedItemsList.value) {
-      this.selectedItemsList.value.addItems([item]);
+    if (this.selectedItemsList.current) {
+      this.selectedItemsList.current.addItems([item]);
     }
 
     if (this.props.onItemSelected) {
       this.props.onItemSelected(item);
     }
 
-    if (this.input.value) {
-      this.input.value.clear();
+    if (this.input.current) {
+      this.input.current.clear();
     }
 
-    if (this.floatingPicker.value) {
-      this.floatingPicker.value.hidePicker();
+    if (this.floatingPicker.current) {
+      this.floatingPicker.current.hidePicker();
     }
 
     this.focus();
diff --git a/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePickerPage.tsx b/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePickerPage.tsx
index 7666899525f2f..91978a5255887 100644
--- a/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePickerPage.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePickerPage.tsx
@@ -8,7 +8,7 @@ import {
 import { ExtendedPeoplePickerTypesExample } from '../examples/ExtendedPeoplePicker.Basic.Example';
 
 const ExtendedPeoplePickerBasicExampleCode = require(
-  '!raw-loader!experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx'
+  '!raw-loader!@uifabric/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx'
 ) as string;
 
 export class ExtendedPeoplePickerPage extends React.Component<IComponentDemoPageProps, {}> {
@@ -27,7 +27,7 @@ export class ExtendedPeoplePickerPage extends React.Component<IComponentDemoPage
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/ExtendedPicker/BaseExtendedPicker.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/ExtendedPicker/BaseExtendedPicker.types.ts')
             ] }
           />
         }
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 fcd82c94a542f..738e1504c3fc1 100644
--- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx
@@ -11,8 +11,7 @@ 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 { SuggestionsStore, FloatingPeoplePicker, IBaseFloatingPickerProps, IBaseFloatingPickerSuggestionProps } from '../../FloatingPicker';
-import { IBaseSelectedItemsListProps, ISelectedPeopleProps, SelectedPeopleList, IExtendedPersonaProps }
-  from '../../SelectedItemsList';
+import { IBaseSelectedItemsListProps, ISelectedPeopleProps, SelectedPeopleList, IExtendedPersonaProps } from '../../SelectedItemsList';
 
 import * as stylesImport from './ExtendedPeoplePicker.Basic.Example.scss';
 // tslint:disable-next-line:no-any
@@ -33,9 +32,9 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
 
   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);
@@ -62,8 +61,8 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
             && this._picker.inputElement.value.indexOf('@') > -1;
         },
         onExecute: () => {
-          if (this._picker.floatingPicker.value !== null) {
-            this._picker.floatingPicker.value.forceResolveSuggestion();
+          if (this._picker.floatingPicker.current !== null) {
+            this._picker.floatingPicker.current.forceResolveSuggestion();
           }
         }
       },
@@ -85,8 +84,8 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
         shouldShow: () => {
           return this._picker !== undefined
             && this._picker.floatingPicker !== undefined
-            && this._picker.floatingPicker.value !== null
-            && this._picker.floatingPicker.value.suggestions.length === 0;
+            && this._picker.floatingPicker.current !== null
+            && this._picker.floatingPicker.current.suggestions.length === 0;
         }
       },
       {
@@ -183,24 +182,25 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
   }
 
   private _onExpandItem = (item: IExtendedPersonaProps): void => {
-    if (this._picker.selectedItemsList.value) {
+    if (this._picker.selectedItemsList.current) {
       // tslint:disable-next-line:no-any
-      (this._picker.selectedItemsList.value as SelectedPeopleList).replaceItem(item, this._getExpandedGroupItems(item as any));
+      (this._picker.selectedItemsList.current as SelectedPeopleList).replaceItem(item, this._getExpandedGroupItems(item as any));
     }
   }
 
   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 });
     }
   }
@@ -239,9 +239,9 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
 
   private _shouldShowForceResolve = (): boolean => {
     return Boolean(
-      this._picker.floatingPicker.value &&
-      this._validateInput(this._picker.floatingPicker.value.inputText) &&
-      this._picker.floatingPicker.value.suggestions.length === 0
+      this._picker.floatingPicker.current &&
+      this._validateInput(this._picker.floatingPicker.current.inputText) &&
+      this._picker.floatingPicker.current.suggestions.length === 0
     );
   }
 
@@ -303,4 +303,4 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
         return [];
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/FileTypeIcon/FileTypeIconPage.tsx b/packages/experiments/src/components/FileTypeIcon/FileTypeIconPage.tsx
index 5b0ae7cc6f0b5..7a7cd849fa3a9 100644
--- a/packages/experiments/src/components/FileTypeIcon/FileTypeIconPage.tsx
+++ b/packages/experiments/src/components/FileTypeIcon/FileTypeIconPage.tsx
@@ -8,7 +8,7 @@ import {
 
 import { FileTypeIconBasicExample } from './examples/FileTypeIcon.Basic.Example';
 const FileTypeIconBasicExampleCode =
-  require('!raw-loader!experiments/src/components/FileTypeIcon/examples/FileTypeIcon.Basic.Example.tsx') as string;
+  require('!raw-loader!@uifabric/experiments/src/components/FileTypeIcon/examples/FileTypeIcon.Basic.Example.tsx') as string;
 
 export class FileTypeIconPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx
index 252a302b2cd10..4e651d5efc247 100644
--- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx
+++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx
@@ -60,17 +60,17 @@ describe('Pickers', () => {
           suggestionsStore={ new SuggestionsStore<ISimple>() }
         />
       );
-      let tree = component.toJSON();
+      const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('shows zero query options on empty input', () => {
-      let root = document.createElement('div');
-      let input = document.createElement('input');
+      const root = document.createElement('div');
+      const input = document.createElement('input');
       document.body.appendChild(input);
       document.body.appendChild(root);
 
-      let picker: TypedBaseFloatingPicker = ReactDOM.render(
+      const picker: TypedBaseFloatingPicker = ReactDOM.render(
         <BaseFloatingPickerWithType
           onResolveSuggestions={ onResolveSuggestions }
           onRenderSuggestionsItem={ basicSuggestionRenderer }
@@ -92,12 +92,12 @@ describe('Pickers', () => {
     });
 
     it('updates suggestions on query string changed', () => {
-      let root = document.createElement('div');
-      let input = document.createElement('input');
+      const root = document.createElement('div');
+      const input = document.createElement('input');
       document.body.appendChild(input);
       document.body.appendChild(root);
 
-      let picker: TypedBaseFloatingPicker = ReactDOM.render(
+      const picker: TypedBaseFloatingPicker = ReactDOM.render(
         <BaseFloatingPickerWithType
           onResolveSuggestions={ onResolveSuggestions }
           onRenderSuggestionsItem={ basicSuggestionRenderer }
@@ -114,4 +114,4 @@ describe('Pickers', () => {
       ReactDOM.unmountComponentAtNode(root);
     });
   });
-});
+});
\ No newline at end of file
diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx
index b0d7c7fa9a08f..05217da65bccf 100644
--- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx
+++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx
@@ -21,7 +21,6 @@ export interface IBaseFloatingPickerState {
   queryString: string;
   suggestedDisplayValue?: string;
   moreSuggestionsAvailable?: boolean;
-  isSearching?: boolean;
   isMostRecentlyUsedVisible?: boolean;
   suggestionsVisible?: boolean;
   suggestionsLoading?: boolean;
@@ -51,7 +50,6 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
       suggestedDisplayValue: '',
       isMostRecentlyUsedVisible: false,
       moreSuggestionsAvailable: false,
-      isSearching: false,
       didBind: false,
     };
   }
@@ -157,7 +155,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
   }
 
   public render(): JSX.Element {
-    let { className } = this.props;
+    const { className } = this.props;
     return (
       <div
         ref={ this.root }
@@ -169,7 +167,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
   }
 
   protected renderSuggestions(): JSX.Element | null {
-    let TypedSuggestionsControl = this.SuggestionsControlOfProperType;
+    const TypedSuggestionsControl = this.SuggestionsControlOfProperType;
     return this.state.suggestionsVisible ? (
       <Callout
         className={ styles.callout }
@@ -193,7 +191,6 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
           onSuggestionRemove={ this.onSuggestionRemove }
           suggestions={ this.suggestionStore.getSuggestions() }
           ref={ this._resolveRef('suggestionsControl') }
-          isSearching={ this.state.isSearching }
           completeSuggestion={ this.completeSuggestion }
           shouldLoopSelection={ false }
           { ...this.props.pickerSuggestionsProps as IBaseFloatingPickerSuggestionProps }
@@ -204,8 +201,8 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
 
   protected onSuggestionSelect(): void {
     if (this.suggestionsControl && this.suggestionsControl.currentSuggestion) {
-      let currentValue: string = this.state.queryString;
-      let itemValue: string = this._getTextFromItem(
+      const currentValue: string = this.state.queryString;
+      const itemValue: string = this._getTextFromItem(
         this.suggestionsControl.currentSuggestion.item,
         currentValue
       );
@@ -227,8 +224,8 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
 
   protected updateSuggestionWithZeroState(): void {
     if (this.props.onZeroQuerySuggestion) {
-      let onEmptyInputFocus = this.props.onZeroQuerySuggestion as (selectedItems?: T[]) => T[] | PromiseLike<T[]>;
-      let suggestions: T[] | PromiseLike<T[]> = onEmptyInputFocus(this.props.selectedItems);
+      const onEmptyInputFocus = this.props.onZeroQuerySuggestion as (selectedItems?: T[]) => T[] | PromiseLike<T[]>;
+      const suggestions: T[] | PromiseLike<T[]> = onEmptyInputFocus(this.props.selectedItems);
       this.updateSuggestionsList(suggestions);
     } else {
       this.hidePicker();
@@ -239,8 +236,8 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     suggestions: T[] | PromiseLike<T[]>,
     updatedValue?: string
   ): void {
-    let suggestionsArray: T[] = suggestions as T[];
-    let suggestionsPromiseLike: PromiseLike<T[]> = suggestions as PromiseLike<
+    const suggestionsArray: T[] = suggestions as T[];
+    const suggestionsPromiseLike: PromiseLike<T[]> = suggestions as PromiseLike<
       T[]
       >;
 
@@ -260,7 +257,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
       this._updateSuggestionsVisible(updatedValue !== undefined && updatedValue !== '');
 
       // Ensure that the promise will only use the callback if it was the most recent one.
-      let promise: PromiseLike<
+      const promise: PromiseLike<
         T[]
         > = (this.currentPromise = suggestionsPromiseLike);
       promise.then((newSuggestions: T[]) => {
@@ -334,7 +331,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
         !(this.props.inputElement as HTMLElement).contains(ev.target as HTMLElement))) {
       return;
     }
-    let keyCode = ev.which;
+    const keyCode = ev.which;
     switch (keyCode) {
       case KeyCodes.escape:
         this.hidePicker();
@@ -386,7 +383,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
   }
 
   private _onResolveSuggestions(updatedValue: string): void {
-    let suggestions: T[] | PromiseLike<T[]> | null = this.props.onResolveSuggestions(updatedValue, this.props.selectedItems);
+    const suggestions: T[] | PromiseLike<T[]> | null = this.props.onResolveSuggestions(updatedValue, this.props.selectedItems);
 
     if (suggestions !== null) {
       this.updateSuggestionsList(suggestions, updatedValue);
@@ -398,14 +395,14 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
       this.props.onValidateInput &&
       this.props.createGenericItem
     ) {
-      let itemToConvert: ISuggestionModel<T> = (this.props.createGenericItem as ((
+      const itemToConvert: ISuggestionModel<T> = (this.props.createGenericItem as ((
         input: string,
         isValid: boolean
       ) => ISuggestionModel<T>))(
         this.state.queryString,
         (this.props.onValidateInput as ((input: string) => boolean))(this.state.queryString)
         );
-      let convertedItems = this.suggestionStore.convertSuggestionsToSuggestionItems([itemToConvert]);
+      const convertedItems = this.suggestionStore.convertSuggestionsToSuggestionItems([itemToConvert]);
       this.onChange(convertedItems[0].item);
     }
   }
@@ -439,4 +436,4 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
       this.setState({ didBind: false });
     }
   }
-}
+}
\ 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 de027adbf4790..a2a787f36ca13 100644
--- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx
+++ b/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx
@@ -23,7 +23,7 @@ export class FloatingPeoplePicker extends BaseFloatingPeoplePicker {
 
 export function createGenericItem(name: string, isValid: boolean): ISuggestionModel<IPersonaProps> {
   // tslint:disable-next-line:no-any
-  let personaToConvert: any = {
+  const personaToConvert: any = {
     key: name,
     primaryText: name,
     imageInitials: '!',
diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePickerPage.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePickerPage.tsx
index acd19ba0fa671..f6dd311a42c1b 100644
--- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePickerPage.tsx
+++ b/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePickerPage.tsx
@@ -8,7 +8,7 @@ import {
 import { FloatingPeoplePickerTypesExample } from '../PeoplePicker/examples/FloatingPeoplePicker.Basic.Example';
 
 const FloatingPeoplePickerBasicExampleCode = require(
-  '!raw-loader!experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx'
+  '!raw-loader!@uifabric/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx'
 ) as string;
 
 export class FloatingPeoplePickerPage extends React.Component<IComponentDemoPageProps, {}> {
@@ -27,7 +27,7 @@ export class FloatingPeoplePickerPage extends React.Component<IComponentDemoPage
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/FloatingPicker/BaseFloatingPicker.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/FloatingPicker/BaseFloatingPicker.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
index 1799e953076ad..387f22c10d063 100644
--- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
+++ b/packages/experiments/src/components/FloatingPicker/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,
@@ -59,4 +59,4 @@ export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element
       />
     </div >
   );
-};
+};
\ No newline at end of file
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 e8e9760c18916..72571c6323c61 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,12 +7,12 @@ import {
 } from 'office-ui-fabric-react/lib/Utilities';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 import { SuggestionsStore } from '../../Suggestions/SuggestionsStore';
-import { IBaseFloatingPicker, IBaseFloatingPickerSuggestionProps } from '../../BaseFloatingPicker.types';
-import { FloatingPeoplePicker } from '../FloatingPeoplePicker';
+import { IBaseFloatingPicker, IBaseFloatingPickerSuggestionProps } from '@uifabric/experiments/lib/FloatingPicker';
+import { FloatingPeoplePicker } from '@uifabric/experiments/lib/FloatingPicker';
 import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types';
-import { people, mru } from '../../../ExtendedPicker';
-import './FloatingPeoplePicker.Basic.Example.scss';
+import { people, mru } from '@uifabric/experiments/lib/ExtendedPicker';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
+import './FloatingPeoplePicker.Basic.Example.scss';
 
 export interface IPeoplePickerExampleState {
   currentPicker?: number | string;
@@ -28,9 +28,9 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
 
   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);
@@ -73,7 +73,7 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
   }
 
   private _renderFloatingPicker(): JSX.Element {
-    let suggestionProps: IBaseFloatingPickerSuggestionProps = {
+    const suggestionProps: IBaseFloatingPickerSuggestionProps = {
       footerItemsProps: [{
         renderItem: () => { return (<div>Showing { this._picker.suggestions.length } results</div>); },
         shouldShow: () => {
@@ -116,17 +116,18 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
   }
 
   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 });
     }
   }
@@ -175,4 +176,4 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
       return false;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx
index b06b1bbd493c2..072957192b09c 100644
--- a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx
+++ b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx
@@ -29,7 +29,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
    * Increments the selected suggestion index
    */
   public nextSuggestion(): boolean {
-    let { suggestions } = this.props;
+    const { suggestions } = this.props;
 
     if (suggestions && suggestions.length > 0) {
       if (this.currentIndex === -1) {
@@ -51,7 +51,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
    * Decrements the selected suggestion index
    */
   public previousSuggestion(): boolean {
-    let { suggestions } = this.props;
+    const { suggestions } = this.props;
 
     if (suggestions && suggestions.length > 0) {
       if (this.currentIndex === -1) {
@@ -94,7 +94,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
   }
 
   public setSelectedSuggestion(index: number): void {
-    let { suggestions } = this.props;
+    const { suggestions } = this.props;
 
     if (index > suggestions.length - 1 || index < 0) {
       this.currentIndex = 0;
diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.types.ts b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.types.ts
index 6601e8147b9b0..b8e642cae14a2 100644
--- a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.types.ts
+++ b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.types.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers';
-import { IRenderFunction } from '../../../Utilities';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 
 // tslint:disable-next-line:no-any
@@ -75,10 +74,6 @@ export interface ISuggestionsControlProps<T> extends React.Props<any>, ISuggesti
    * Whether or not the first selectable item in the suggestions list should be selected
    */
   shouldSelectFirstItem?: () => boolean;
-  /**
-  * How the "no result found" should look in the suggestion list.
-  */
-  onRenderNoResultFound?: IRenderFunction<void>;
   /**
    * The callback that should be called when the user attempts to use the input text as as item
    */
@@ -87,22 +82,6 @@ export interface ISuggestionsControlProps<T> extends React.Props<any>, ISuggesti
    * The CSS classname of the suggestions list.
    */
   className?: string;
-  /**
-   * Used to indicate whether or not the component is searching for more results.
-   */
-  isSearching?: boolean;
-  /**
-   * The text to display while searching for more results in a limited sugesstions list.
-   */
-  searchingText?: string;
-  /**
-   * A renderer that adds an element at the end of the suggestions list it has more items than resultsMaximumNumber.
-   */
-  resultsFooterFull?: (props: ISuggestionsProps<T>) => JSX.Element;
-  /**
-   * A renderer that adds an element at the end of the suggestions list it has fewer items than resultsMaximumNumber.
-   */
-  resultsFooter?: (props: ISuggestionsProps<T>) => JSX.Element;
   /**
    * Completes the suggestion
    */
diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx b/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx
index b1cb55ae86dad..260b1ea130c5e 100644
--- a/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx
+++ b/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx
@@ -5,7 +5,6 @@ import {
   KeyCodes
 } from '../../../Utilities';
 import { IButton } from 'office-ui-fabric-react/lib/Button';
-import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
 import { ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers';
 import {
   ISuggestionsHeaderFooterItemProps,
@@ -110,8 +109,6 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
   public render(): JSX.Element {
     const {
       className,
-      isSearching,
-      searchingText,
       headerItemsProps,
       footerItemsProps
     } = this.props;
@@ -126,12 +123,6 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
         { headerItemsProps && this.renderHeaderItems() }
         { this._renderSuggestions() }
         { footerItemsProps && this.renderFooterItems() }
-        { isSearching ?
-          (<Spinner
-            className={ css('ms-Suggestions-spinner', styles.suggestionsSpinner) }
-            label={ searchingText }
-          />) : (null)
-        }
       </div>
     );
   }
@@ -145,23 +136,23 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
   }
 
   public hasSelection(): boolean {
-    let { selectedHeaderIndex, selectedFooterIndex } = this.state;
+    const { selectedHeaderIndex, selectedFooterIndex } = this.state;
     return selectedHeaderIndex !== -1 || this.hasSuggestionSelected() || selectedFooterIndex !== -1;
   }
 
   public executeSelectedAction(): void {
-    let { headerItemsProps, footerItemsProps } = this.props;
-    let { selectedHeaderIndex, selectedFooterIndex } = this.state;
+    const { headerItemsProps, footerItemsProps } = this.props;
+    const { selectedHeaderIndex, selectedFooterIndex } = this.state;
 
     if (headerItemsProps && selectedHeaderIndex !== -1 && selectedHeaderIndex < headerItemsProps.length) {
-      let selectedHeaderItem = headerItemsProps[selectedHeaderIndex];
+      const selectedHeaderItem = headerItemsProps[selectedHeaderIndex];
       if (selectedHeaderItem.onExecute) {
         selectedHeaderItem.onExecute();
       }
     } else if (this._suggestions.hasSuggestionSelected()) {
       this.props.completeSuggestion();
     } else if (footerItemsProps && selectedFooterIndex !== -1 && selectedFooterIndex < footerItemsProps.length) {
-      let selectedFooterItem = footerItemsProps[selectedFooterIndex];
+      const selectedFooterItem = footerItemsProps[selectedFooterIndex];
       if (selectedFooterItem.onExecute) {
         selectedFooterItem.onExecute();
       }
@@ -177,7 +168,7 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
    * @param keyCode The keyCode to handle
    */
   public handleKeyDown(keyCode: number): boolean {
-    let { selectedHeaderIndex, selectedFooterIndex } = this.state;
+    const { selectedHeaderIndex, selectedFooterIndex } = this.state;
     let isKeyDownHandled = false;
     if (keyCode === KeyCodes.down) {
       if (selectedHeaderIndex === -1 && !this._suggestions.hasSuggestionSelected() && selectedFooterIndex === -1) {
@@ -235,7 +226,7 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
         aria-label={ suggestionsHeaderContainerAriaLabel }
       >
         { headerItemsProps.map((headerItemProps: ISuggestionsHeaderFooterProps, index: number) => {
-          let isSelected = selectedHeaderIndex !== -1 && selectedHeaderIndex === index;
+          const isSelected = selectedHeaderIndex !== -1 && selectedHeaderIndex === index;
           return (
             headerItemProps.shouldShow() ? <div
               ref={ this._resolveRef(isSelected ? '_selectedElement' : '') }
@@ -258,7 +249,7 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
 
   protected renderFooterItems(): JSX.Element | null {
     const { footerItemsProps, suggestionsFooterContainerAriaLabel } = this.props;
-    let { selectedFooterIndex } = this.state;
+    const { selectedFooterIndex } = this.state;
     return footerItemsProps ? (
       <div
         className={ css('ms-Suggestions-footerContainer', styles.suggestionsContainer) }
@@ -267,7 +258,7 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
         aria-label={ suggestionsFooterContainerAriaLabel }
       >
         { footerItemsProps.map((footerItemProps: ISuggestionsHeaderFooterProps, index: number) => {
-          let isSelected = selectedFooterIndex !== -1 && selectedFooterIndex === index;
+          const isSelected = selectedFooterIndex !== -1 && selectedFooterIndex === index;
           return (
             footerItemProps.shouldShow() ? <div
               ref={ this._resolveRef(isSelected ? '_selectedElement' : '') }
@@ -310,11 +301,11 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
       return;
     }
 
-    let startedItemType = originalItemType !== undefined ? originalItemType : itemType;
+    const startedItemType = originalItemType !== undefined ? originalItemType : itemType;
 
     // Try to set the selection to the next selectable item, of the same suggestion item type group
     // If this is the original item type, use the current index
-    let selectionChanged = this._selectNextItemOfItemType(
+    const selectionChanged = this._selectNextItemOfItemType(
       itemType,
       startedItemType === itemType ? this._getCurrentIndexForType(itemType) : undefined);
 
@@ -337,10 +328,10 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
       return;
     }
 
-    let startedItemType = originalItemType !== undefined ? originalItemType : itemType;
+    const startedItemType = originalItemType !== undefined ? originalItemType : itemType;
 
     // Try to set the selection to the previous selectable item, of the same suggestion item type group
-    let selectionChanged = this._selectPreviousItemOfItemType(
+    const selectionChanged = this._selectPreviousItemOfItemType(
       itemType,
       startedItemType === itemType ? this._getCurrentIndexForType(itemType) : undefined);
 
@@ -408,12 +399,12 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
         return true;
       }
     } else {
-      let isHeader = itemType === SuggestionItemType.header;
-      let itemProps = isHeader ? this.props.headerItemsProps : this.props.footerItemsProps;
+      const isHeader = itemType === SuggestionItemType.header;
+      const itemProps = isHeader ? this.props.headerItemsProps : this.props.footerItemsProps;
 
       if (itemProps && itemProps.length > currentIndex + 1) {
         for (let i = currentIndex + 1; i < itemProps.length; i++) {
-          let item = itemProps[i];
+          const item = itemProps[i];
           if (item.onExecute && item.shouldShow()) {
             this.setState({ selectedHeaderIndex: isHeader ? i : -1 });
             this.setState({ selectedFooterIndex: isHeader ? -1 : i });
@@ -435,20 +426,20 @@ export class SuggestionsControl<T> extends BaseComponent<ISuggestionsControlProp
  */
   private _selectPreviousItemOfItemType(itemType: SuggestionItemType, currentIndex?: number): boolean {
     if (itemType === SuggestionItemType.suggestion) {
-      let index = currentIndex !== undefined ? currentIndex : this.props.suggestions.length;
+      const index = currentIndex !== undefined ? currentIndex : this.props.suggestions.length;
       if (index > 0) {
         this._suggestions.setSelectedSuggestion(index - 1);
         this.setState({ selectedHeaderIndex: -1, selectedFooterIndex: -1 });
         return true;
       }
     } else {
-      let isHeader = itemType === SuggestionItemType.header;
-      let itemProps = isHeader ? this.props.headerItemsProps : this.props.footerItemsProps;
+      const isHeader = itemType === SuggestionItemType.header;
+      const itemProps = isHeader ? this.props.headerItemsProps : this.props.footerItemsProps;
       if (itemProps) {
-        let index = currentIndex !== undefined ? currentIndex : itemProps.length;
+        const index = currentIndex !== undefined ? currentIndex : itemProps.length;
         if (index > 0) {
           for (let i = index - 1; i >= 0; i--) {
-            let item = itemProps[i];
+            const item = itemProps[i];
             if (item.onExecute && item.shouldShow()) {
               this.setState({ selectedHeaderIndex: isHeader ? i : -1 });
               this.setState({ selectedFooterIndex: isHeader ? -1 : i });
diff --git a/packages/experiments/src/components/FolderCover/FolderCoverPage.tsx b/packages/experiments/src/components/FolderCover/FolderCoverPage.tsx
index f119b8d64f1cd..bb19419ae4111 100644
--- a/packages/experiments/src/components/FolderCover/FolderCoverPage.tsx
+++ b/packages/experiments/src/components/FolderCover/FolderCoverPage.tsx
@@ -8,7 +8,7 @@ import {
 
 import { FolderCoverBasicExample } from './examples/FolderCover.Basic.Example';
 const FolderCoverBasicExampleCode =
-  require('!raw-loader!experiments/src/components/FolderCover/examples/FolderCover.Basic.Example.tsx') as string;
+  require('!raw-loader!@uifabric/experiments/src/components/FolderCover/examples/FolderCover.Basic.Example.tsx') as string;
 
 export class FolderCoverPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -26,7 +26,7 @@ export class FolderCoverPage extends React.Component<IComponentDemoPageProps, {}
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/FolderCover/FolderCover.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/FolderCover/FolderCover.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/FolderCover/examples/FolderCover.Basic.Example.tsx b/packages/experiments/src/components/FolderCover/examples/FolderCover.Basic.Example.tsx
index c769f4d50b34c..6fffefd31d317 100644
--- a/packages/experiments/src/components/FolderCover/examples/FolderCover.Basic.Example.tsx
+++ b/packages/experiments/src/components/FolderCover/examples/FolderCover.Basic.Example.tsx
@@ -1,8 +1,12 @@
 
 import * as React from 'react';
-import { FolderCover, getFolderCoverLayout, renderFolderCoverWithLayout } from '../FolderCover';
-import { IFolderCoverProps } from '../FolderCover.types';
-import { ISize, fitContentToBounds } from '../../../Utilities';
+import {
+  FolderCover,
+  getFolderCoverLayout,
+  renderFolderCoverWithLayout,
+  IFolderCoverProps
+} from '@uifabric/experiments/lib/FolderCover';
+import { ISize, fitContentToBounds } from '@uifabric/experiments/lib/Utilities';
 import { SharedSignal } from '../../signals/Signals';
 
 interface IFolderCoverWithImageProps extends IFolderCoverProps {
diff --git a/packages/experiments/src/components/Form/FormPage.tsx b/packages/experiments/src/components/Form/FormPage.tsx
index 84ee82c0d4927..d066a64fc7680 100644
--- a/packages/experiments/src/components/Form/FormPage.tsx
+++ b/packages/experiments/src/components/Form/FormPage.tsx
@@ -8,9 +8,15 @@ import {
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 
-const FormAutosaveExampleCode = require('!raw-loader!experiments/src/components/Form/examples/Form.Autosave.Example.tsx') as string;
-const FormBasicExampleCode = require('!raw-loader!experiments/src/components/Form/examples/Form.Basic.Example.tsx') as string;
-const FormValidationExampleCode = require('!raw-loader!experiments/src/components/Form/examples/Form.Validation.Example.tsx') as string;
+const FormAutosaveExampleCode = require(
+  '!raw-loader!@uifabric/experiments/src/components/Form/examples/Form.Autosave.Example.tsx'
+) as string;
+
+const FormBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Form/examples/Form.Basic.Example.tsx') as string;
+
+const FormValidationExampleCode = require(
+  '!raw-loader!@uifabric/experiments/src/components/Form/examples/Form.Validation.Example.tsx'
+) as string;
 
 import { FormAutosaveExample } from './examples/Form.Autosave.Example';
 import { FormBasicExample } from './examples/Form.Basic.Example';
@@ -38,8 +44,8 @@ export class FormPage extends React.Component<IComponentDemoPageProps, {}> {
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/Form/Form.types.ts'),
-              require<string>('!raw-loader!experiments/src/components/Form/FormBaseInput.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/Form/Form.types.ts'),
+              require<string>('!raw-loader!@uifabric/experiments/src/components/Form/FormBaseInput.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/Form/examples/Form.Autosave.Example.tsx b/packages/experiments/src/components/Form/examples/Form.Autosave.Example.tsx
index 5c0b7d7fc8fc6..e2ca8d6440060 100644
--- a/packages/experiments/src/components/Form/examples/Form.Autosave.Example.tsx
+++ b/packages/experiments/src/components/Form/examples/Form.Autosave.Example.tsx
@@ -1,6 +1,6 @@
 /* tslint:disable:no-any */
 import * as React from 'react';
-import { Form, FormDatePicker, FormTextInput, Validators } from '../../Form';
+import { Form, FormDatePicker, FormTextInput, Validators } from '@uifabric/experiments/lib/Form';
 
 export interface IFormAutosaveExampleState {
   formResults: any;
diff --git a/packages/experiments/src/components/Form/examples/Form.Basic.Example.tsx b/packages/experiments/src/components/Form/examples/Form.Basic.Example.tsx
index 20440295e792b..40a690560d62f 100644
--- a/packages/experiments/src/components/Form/examples/Form.Basic.Example.tsx
+++ b/packages/experiments/src/components/Form/examples/Form.Basic.Example.tsx
@@ -1,7 +1,7 @@
 /* tslint:disable:no-any */
 import * as React from 'react';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import { Form, FormTextInput } from '../../Form';
+import { Form, FormTextInput } from '@uifabric/experiments/lib/Form';
 
 export interface IFormBasicExampleState {
   formResults: any;
diff --git a/packages/experiments/src/components/Form/examples/Form.Validation.Example.tsx b/packages/experiments/src/components/Form/examples/Form.Validation.Example.tsx
index f4217c9a915cf..35d240d8369f4 100644
--- a/packages/experiments/src/components/Form/examples/Form.Validation.Example.tsx
+++ b/packages/experiments/src/components/Form/examples/Form.Validation.Example.tsx
@@ -1,6 +1,12 @@
 /* tslint:disable:no-any */
 import * as React from 'react';
-import { Form, FormConditionalSubmitButton, FormDatePicker, FormTextInput, Validators } from '../../Form';
+import {
+  Form,
+  FormConditionalSubmitButton,
+  FormDatePicker,
+  FormTextInput,
+  Validators
+} from '@uifabric/experiments/lib/Form';
 
 export interface IFormValidationExampleState {
   formResults: any;
diff --git a/packages/experiments/src/components/Keytip/examples/Keytip.Basic.Example.tsx b/packages/experiments/src/components/Keytip/examples/Keytip.Basic.Example.tsx
index 6695d48a76ba6..75f376588ff34 100644
--- a/packages/experiments/src/components/Keytip/examples/Keytip.Basic.Example.tsx
+++ b/packages/experiments/src/components/Keytip/examples/Keytip.Basic.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IKeytipProps, Keytip } from '../../Keytip';
+import { IKeytipProps, Keytip } from '@uifabric/experiments/lib/Keytip';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { convertSequencesToKeytipID } from '../../../utilities/keysequence/IKeySequence';
 
diff --git a/packages/experiments/src/components/Keytip/examples/Keytip.Disabled.Example.tsx b/packages/experiments/src/components/Keytip/examples/Keytip.Disabled.Example.tsx
index 71a3fd77aded8..c6be35d58185e 100644
--- a/packages/experiments/src/components/Keytip/examples/Keytip.Disabled.Example.tsx
+++ b/packages/experiments/src/components/Keytip/examples/Keytip.Disabled.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IKeytipProps, Keytip } from '../../Keytip';
+import { IKeytipProps, Keytip } from '@uifabric/experiments/lib/Keytip';
 import { convertSequencesToKeytipID } from '../../../utilities/keysequence/IKeySequence';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { IKeytipExampleState, onKeytipButtonClick } from './Keytip.Basic.Example';
diff --git a/packages/experiments/src/components/Keytip/examples/Keytip.Language.Example.tsx b/packages/experiments/src/components/Keytip/examples/Keytip.Language.Example.tsx
index e7baab3f1e9b9..605d1686d1d52 100644
--- a/packages/experiments/src/components/Keytip/examples/Keytip.Language.Example.tsx
+++ b/packages/experiments/src/components/Keytip/examples/Keytip.Language.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IKeytipProps, Keytip } from '../../Keytip';
+import { IKeytipProps, Keytip } from '@uifabric/experiments/lib/Keytip';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { convertSequencesToKeytipID } from '../../../utilities/keysequence/IKeySequence';
 import { IKeytipExampleState, onKeytipButtonClick } from './Keytip.Basic.Example';
diff --git a/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx b/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
index 19a1f657d123d..87cbaeb4aa495 100644
--- a/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
+++ b/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
@@ -126,7 +126,8 @@ export class KeytipLayer extends BaseComponent<IKeytipLayerProps, IKeytipLayerSt
    * @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) => {
+
+    this.setState((previousState: IKeytipLayerState) => {
       let currentKeytips: IKeytipProps[] = [...previousState.keytips];
       for (let keytip of currentKeytips) {
         let keytipId = convertSequencesToKeytipID(keytip.keySequences);
diff --git a/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx b/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx
index 8cc5d16a91b8b..be6851013308b 100644
--- a/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx
+++ b/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx
@@ -2,8 +2,8 @@ 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 { KeytipLayer } from '@uifabric/experiments/lib/KeytipLayer';
+import { IKeytipProps, KeytipTransitionModifier } from '@uifabric/experiments/lib/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';
diff --git a/packages/experiments/src/components/LayoutGroup/LayoutGroupPage.tsx b/packages/experiments/src/components/LayoutGroup/LayoutGroupPage.tsx
index cc76db6fd76e2..496de215c848b 100644
--- a/packages/experiments/src/components/LayoutGroup/LayoutGroupPage.tsx
+++ b/packages/experiments/src/components/LayoutGroup/LayoutGroupPage.tsx
@@ -8,7 +8,7 @@ import {
 
 import { LayoutGroupBasicExample } from './examples/LayoutGroup.Basic.Example';
 const LayoutGroupBasicExampleCode =
-  require('!raw-loader!experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx') as string;
+  require('!raw-loader!@uifabric/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx') as string;
 
 export class LayoutGroupPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -26,7 +26,7 @@ export class LayoutGroupPage extends React.Component<IComponentDemoPageProps, {}
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/LayoutGroup/LayoutGroup.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/LayoutGroup/LayoutGroup.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx b/packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx
index fbddd8c7e9a83..4491a37d6b0ad 100644
--- a/packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx
+++ b/packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx
@@ -1,6 +1,6 @@
 
 import * as React from 'react';
-import { LayoutGroup } from '../LayoutGroup';
+import { LayoutGroup } from '@uifabric/experiments/lib/LayoutGroup';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
@@ -37,8 +37,15 @@ export class LayoutGroupBasicExample extends React.Component<{}, {}> {
             }
           />
           <LayoutGroup layoutGap={ 20 } direction='horizontal' justify='fill'>
-            <TextField label='TextField with a placeholder' placeholder='Now I am a Placeholder' ariaLabel='Please enter text here' />
-            <TextField label='TextField with an icon' iconProps={ { iconName: 'Calendar' } } />
+            <TextField
+              label='TextField with a placeholder'
+              placeholder='Now I am a Placeholder'
+              ariaLabel='Please enter text here'
+            />
+            <TextField
+              label='TextField with an icon'
+              iconProps={ { iconName: 'Calendar' } }
+            />
           </LayoutGroup>
 
           <LayoutGroup layoutGap={ 20 } direction='horizontal' justify='fill'>
diff --git a/packages/experiments/src/components/Nav/Nav.styles.ts b/packages/experiments/src/components/Nav/Nav.styles.ts
new file mode 100644
index 0000000000000..6817c25320fdf
--- /dev/null
+++ b/packages/experiments/src/components/Nav/Nav.styles.ts
@@ -0,0 +1,166 @@
+/* tslint:disable */
+import { IStyle, AnimationClassNames } from 'office-ui-fabric-react/lib/Styling';
+import {
+  INavStyleProps,
+  INavStyles
+} from './Nav.types';
+
+export type INavItemStyle = {
+  root?: IStyle;
+  iconColumn?: IStyle;
+  nameColumn?: IStyle;
+};
+
+export type IFloatingNavStyle = IStyle & {
+  root?: IStyle;
+  withChild?: IStyle;
+};
+
+const navFontSize = 13;
+const navTextColor = '#FFF';
+const navWidth = 280;
+const navCollapsedWidth = 50;
+const navFloatingWidth = 230;
+const navItemHeight = 50;
+const navBackgroundColor = '#333333';
+const navItemHoverColor = '#767676';
+const navGroupSeparatorItemHeight = 40;
+const navItemWithChildBgColor = '#505050';
+const navItemSelectedColor = '#666666';
+const navItemIndentSize = 50;
+
+export const getStyles = (
+  props: INavStyleProps
+): INavStyles => {
+  const {
+    isSelected,
+    hasChildren,
+    nestingLevel,
+    isCollapsed,
+    scrollTop
+  } = props;
+
+  return ({
+    root: {
+      width: isCollapsed ? navCollapsedWidth : navWidth,
+      backgroundColor: navBackgroundColor,
+      color: navTextColor,
+      selectors: {
+        ul: {
+          listStyleType: 'none',
+          padding: 0,
+          margin: 0,
+          fontSize: navFontSize,
+          selectors: {
+            li: {
+              selectors: {
+                ':hover': {
+                  selectors: {
+                    '>div[class*=ms-Nav-FloatingNav]': {
+                      visibility: 'visible'
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        a: {
+          color: `${navTextColor} !important`,
+          outline: 'none'
+        }
+      }
+    },
+    navItemRoot: {
+      height: navItemHeight,
+      cursor: 'pointer',
+      backgroundColor: isSelected ? navItemSelectedColor : 'inherit',
+      paddingLeft: !!nestingLevel && nestingLevel > 0 ? nestingLevel * navItemIndentSize : 'inherit',
+      selectors: {
+        ':hover': {
+          backgroundColor: hasChildren ? navItemWithChildBgColor : navItemHoverColor
+        }
+      }
+    },
+    navItemIconColumn: {
+      width: navCollapsedWidth,
+      fontSize: '15px',
+      lineHeight: navItemHeight,
+      textAlign: 'center'
+    },
+    navItemNameColumn: {
+      width: '100%',
+      lineHeight: navItemHeight,
+      verticalAlign: 'top',
+      display: 'inline-block',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap'
+    },
+    navSlimItemRoot: {
+      selectors: {
+        ':hover': {
+          backgroundColor: hasChildren ? navItemWithChildBgColor : navItemHoverColor
+        }
+      }
+    },
+    navFloatingRoot: [
+      {
+        displayName: 'ms-Nav-FloatingNav',
+        display: 'block',
+        visibility: 'hidden',
+        position: 'absolute',
+        marginLeft: navCollapsedWidth,
+        marginTop: -navItemHeight - (!!scrollTop && scrollTop > 0 ? scrollTop : 0),
+        width: navFloatingWidth,
+        color: navTextColor,
+        backgroundColor: hasChildren ? navItemWithChildBgColor : navItemHoverColor,
+        selectors: {
+          a: {
+            width: '100%',
+            backgroundColor: 'inherit'
+          }
+        }
+      },
+      AnimationClassNames.slideRightIn20
+    ],
+    navFloatingItemRoot: {
+      height: navItemHeight,
+      cursor: 'pointer',
+      backgroundColor: !!nestingLevel && nestingLevel > 0 && isSelected ? navItemSelectedColor : 'inherit',
+      paddingLeft: !!nestingLevel && nestingLevel > 0 ? nestingLevel * navItemIndentSize : 'inherit',
+      selectors: {
+        ':hover': {
+          backgroundColor: !!nestingLevel && nestingLevel > 0 ? navItemHoverColor : 'unset'
+        }
+      }
+    },
+    navGroupSeparatorRoot: {
+      width: '100%',
+      height: navGroupSeparatorItemHeight,
+      textAlign: 'center'
+    },
+    navGroupSeparatorHrLine: {
+      height: '20px',
+      borderBottom: `1px solid ${navItemWithChildBgColor}`
+    },
+    navGroupSeparatorGroupName: {
+      lineHeight: navGroupSeparatorItemHeight,
+      padding: '0 8px',
+      color: '#9B9B9B',
+      backgroundColor: navBackgroundColor
+    },
+    navToggler: {
+      height: navItemHeight,
+      cursor: 'pointer',
+      selectors: {
+        ':hover': {
+          backgroundColor: navItemHoverColor
+        }
+      },
+      textAlign: 'right'
+    }
+  });
+};
+
+/* tslint:enable */
diff --git a/packages/experiments/src/components/Nav/Nav.tsx b/packages/experiments/src/components/Nav/Nav.tsx
new file mode 100644
index 0000000000000..98fa6816bd649
--- /dev/null
+++ b/packages/experiments/src/components/Nav/Nav.tsx
@@ -0,0 +1,236 @@
+/* tslint:disable */
+import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/components/FocusZone';
+import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
+import { INavLinkGroup } from 'office-ui-fabric-react/lib/components/Nav';
+import { INavState } from 'office-ui-fabric-react/lib/components/Nav/Nav.base';
+import { AnimationClassNames } from 'office-ui-fabric-react/lib/Styling';
+import * as React from 'react';
+import {
+  INavProps,
+  INavLink,
+  INavStyleProps,
+  INavStyles
+} from './Nav.types';
+import {
+  getStyles
+} from './Nav.styles';
+import { NavBase } from './NavBase';
+import {
+  styled,
+  classNamesFunction
+} from 'office-ui-fabric-react/lib/Utilities';
+
+const getClassNames = classNamesFunction<INavStyleProps, INavStyles>();
+
+class NavComponent extends NavBase {
+  constructor(props: INavProps) {
+    super(props);
+
+    this.state = {
+      isLinkExpandStateChanged: false,
+      selectedKey: props.initialSelectedKey || props.selectedKey
+    };
+  }
+
+  public render() {
+    if (!this.props.groups || this.props.groups.length === 0) {
+      return null;
+    }
+
+    return (
+      <FocusZone direction={ FocusZoneDirection.vertical }>
+        <nav role='navigation'>
+          {
+            this.props.groups.map((group: INavLinkGroup, groupIndex: number) => {
+              return this._renderGroup(group, groupIndex);
+            })
+          }
+        </nav>
+      </FocusZone>
+    );
+  }
+
+  private _onLinkClicked(link: INavLink, ev: React.MouseEvent<HTMLElement>): void {
+    let nextState: INavState = {
+      selectedKey: link.key
+    };
+
+    const hasChildren = link.links && link.links.length > 0;
+
+    if (hasChildren) {
+      // show child links
+      link.isExpanded = !link.isExpanded;
+      nextState.isLinkExpandStateChanged = true;
+    }
+    else if (link.onClick) {
+      // if there is a onClick defined, call it
+      link.onClick(ev, link);
+    }
+
+    this.setState(nextState);
+
+    if (hasChildren || link.onClick) {
+      // prevent further action if the link has children or onClick handler is defined
+      ev.preventDefault();
+    }
+
+    ev.stopPropagation();
+  }
+
+  private _renderCompositeLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> | null {
+    if (!link) {
+      return null;
+    }
+
+    let rightIconName = null;
+    if (link.links && link.links.length > 0 && nestingLevel === 0) {
+      // for the first level link, show chevron icon if there is a children
+      rightIconName = link.isExpanded ? 'ChevronUp' : 'ChevronDown'
+    }
+    else if (link.url && link.target && link.target === '_blank') {
+      // for external links, show an icon
+      rightIconName = 'OpenInNewWindow';
+    }
+
+    // show nav icon for the first level only
+    const leftIconName = nestingLevel === 0 ? link.icon : null;
+
+    let linkTextStyle: React.CSSProperties = {};
+    if (!rightIconName && !leftIconName) {
+      linkTextStyle.width = '100%';
+    }
+    else if (!leftIconName || !rightIconName) {
+      linkTextStyle.width = 'calc(100% - 50px)';
+    }
+    else {
+      // leave 50px to the icon on the right
+      linkTextStyle.width = 'calc(100% - 100px)';
+    }
+
+    const isLinkSelected = this.isLinkSelected(link, false /* includeChildren */);
+    const isChildLinkSelected = this.isChildLinkSelected(link);
+    const hasChildren = !!link.links && link.links.length > 0;
+    const isSelected = (isLinkSelected && !hasChildren) || (isChildLinkSelected && !link.isExpanded);
+
+    const { getStyles } = this.props;
+    const classNames = getClassNames(getStyles!, { isSelected, nestingLevel });
+
+    return (
+      <a
+        href={ link.url ? link.url : undefined }
+        target={ link.target ? link.target : undefined }
+        key={ link.key || linkIndex }
+        onClick={ this._onLinkClicked.bind(this, link) }
+        data-hint='ReactLeftNav'
+        data-value={ link.name }
+        aria-label={ link.name }
+        role='menu'>
+        <div className={ classNames.navItemRoot } aria-hidden='true'>
+          {
+
+            leftIconName ?
+              <Icon
+                className={ classNames.navItemIconColumn }
+                iconName={ leftIconName }
+              />
+              : null
+          }
+          {
+            <div className={ classNames.navItemNameColumn } style={ linkTextStyle }>
+              { link.name }
+            </div>
+          }
+          {
+            rightIconName ?
+              <Icon
+                className={ classNames.navItemIconColumn }
+                iconName={ rightIconName }
+              />
+              : null
+          }
+        </div>
+      </a>
+    );
+  }
+
+  private _renderLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> | null {
+    if (!link) {
+      return null;
+    }
+
+    return (
+      <li
+        role='listitem'
+        key={ link.key || linkIndex }
+        title={ link.name }>
+        {
+          this._renderCompositeLink(link, linkIndex, nestingLevel)
+        }
+        {
+          // show child links
+          // 1. only for the first level and
+          // 2. if the link is expanded
+          nestingLevel == 0 && link.isExpanded ?
+            <div className={ AnimationClassNames.slideDownIn20 }>
+              {
+                this._renderLinks(link.links as INavLink[], ++nestingLevel)
+              }
+            </div>
+            : null
+        }
+      </li>
+    );
+  }
+
+  private _renderLinks(links: INavLink[], nestingLevel: number): React.ReactElement<{}> | null {
+    if (!links || links.length === 0) {
+      return null;
+    }
+
+    return (
+      <ul role='list'>
+        {
+          links.map((link: INavLink, linkIndex: number) => {
+            return this._renderLink(link, linkIndex, nestingLevel);
+          })
+        }
+      </ul>
+    );
+  }
+
+  private _renderGroup(group: INavLinkGroup, groupIndex: number): React.ReactElement<{}> | null {
+    if (!group || !group.links || group.links.length === 0) {
+      return null;
+    }
+
+    const { getStyles } = this.props;
+    const classNames = getClassNames(getStyles!, {});
+
+    return (
+      <div key={ groupIndex }>
+        {
+          groupIndex > 0 && group.name ?
+            <div className={ classNames.navGroupSeparatorRoot }>
+              <div className={ classNames.navGroupSeparatorHrLine }>
+                {
+                  <span className={ classNames.navGroupSeparatorGroupName }>
+                    {
+                      group.name
+                    }
+                  </span>
+                }
+              </div>
+            </div> : null
+        }
+        { this._renderLinks(group.links, 0 /* nestingLevel */) }
+      </div>
+    );
+  }
+}
+
+export const Nav = styled<INavProps, INavStyleProps, INavStyles>(
+  NavComponent,
+  getStyles
+);
+
+/* tslint:enable */
diff --git a/packages/experiments/src/components/Nav/Nav.types.ts b/packages/experiments/src/components/Nav/Nav.types.ts
new file mode 100644
index 0000000000000..64619f5653e2f
--- /dev/null
+++ b/packages/experiments/src/components/Nav/Nav.types.ts
@@ -0,0 +1,143 @@
+/* tslint:disable */
+import { IStyle } from 'office-ui-fabric-react/lib/Styling';
+import { IStyleFunction } from 'office-ui-fabric-react/lib/Utilities';
+import {
+  INavLink,
+  INavLinkGroup
+} from 'office-ui-fabric-react/lib/components/Nav';
+import { INavState } from 'office-ui-fabric-react/lib/components/Nav/Nav.base';
+/* tslint:enable */
+
+export interface INavProps {
+  /**
+   * A collection of link groups to display in the navigation bar
+   */
+  groups: INavLinkGroup[] | null;
+
+  /**
+   * (Optional) The key of the nav item initially selected.
+   */
+  initialSelectedKey?: string;
+
+  /**
+   * (Optional) The key of the nav item selected by caller.
+   */
+  selectedKey?: string;
+
+  /**
+   * (Optional) Used to toggle the nav component between expanded and collapsed state
+   */
+  isNavCollapsed?: boolean;
+
+  /**
+   * (Optional) If used inside a parent element with scrollbar, provide the parent element id to properly position
+   * the floating nav by considering the scroll bar.
+   */
+  navScrollerId?: string;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<INavStyleProps, INavStyles>;
+
+  /**
+   * (Optional) callback for the parent component when the nav component is toggled between expanded and collapsed state
+   */
+  onNavCollapsedCallback?(isCollapsed: boolean): void;
+}
+
+export interface INavState extends INavState {
+  /**
+   * Used to toggle the nav component between expanded and collapsed state.
+   */
+  isNavCollapsed?: boolean;
+}
+
+export interface INavLink extends INavLink {
+  /* used to adjust the floating nav when the scrollbar appears */
+  scrollTop?: number;
+}
+
+export interface INavStyleProps {
+  /**
+   * is element selected boolean
+   */
+  isSelected?: boolean;
+
+  /**
+   * has children boolean
+   */
+  hasChildren?: boolean;
+
+  /**
+   * nesting level of the nav item in the nav tree
+   */
+  nestingLevel?: number;
+
+  /**
+   * is nav collapsed boolean
+   */
+  isCollapsed?: boolean;
+
+  /**
+   * if the component is hosted inside a scroll bar, send the scrollTop to position the floating nav relative to it's parent
+   */
+  scrollTop?: number;
+}
+
+export interface INavStyles {
+  /**
+   * Style set for the nav component root
+   */
+  root: IStyle;
+
+  /**
+   * Style set for the nav item root
+   */
+  navItemRoot: IStyle;
+
+  /**
+   * Style set for the icon column in the nav item
+   */
+  navItemIconColumn: IStyle;
+
+  /**
+   * Style set for the name column in the nav item
+   */
+  navItemNameColumn: IStyle;
+
+  /**
+   * Style set for the slim version of nav item
+   */
+  navSlimItemRoot: IStyle;
+
+  /**
+   * Style set for the floating nav root in the slim version
+   */
+  navFloatingRoot: IStyle;
+
+  /**
+   * Style set for the floating nav item root
+   */
+  navFloatingItemRoot: IStyle;
+
+  /**
+   * Style set for the nav group separator
+   */
+  navGroupSeparatorRoot: IStyle;
+
+  /**
+   * Style set for the horizontal line in nav group separator
+   */
+  navGroupSeparatorHrLine: IStyle;
+
+  /**
+   * Style set for the group name in nav group separator
+   */
+  navGroupSeparatorGroupName: IStyle;
+
+  /**
+   * Style set for the nav toggler which toggles expanded and slim nav
+   */
+  navToggler: IStyle;
+}
diff --git a/packages/experiments/src/components/Nav/NavBase.tsx b/packages/experiments/src/components/Nav/NavBase.tsx
new file mode 100644
index 0000000000000..22c1de439d030
--- /dev/null
+++ b/packages/experiments/src/components/Nav/NavBase.tsx
@@ -0,0 +1,55 @@
+/* tslint:disable */
+import { INavLink, INavProps } from './Nav.types';
+import { INav } from 'office-ui-fabric-react/lib/components/Nav';
+import { INavState } from 'office-ui-fabric-react/lib/components/Nav/Nav.base';
+import * as React from 'react';
+/* tslint:enable */
+
+export class NavBase extends React.Component<INavProps, INavState> implements INav {
+  constructor(props: INavProps) {
+    super(props);
+  }
+
+  public get selectedKey(): string | undefined {
+    return this.state.selectedKey;
+  }
+
+  protected getPreferredSelectedKey(): string {
+    let selectedKey = '';
+
+    // if caller passes in selectedKey, use it as first choice or use current state.selectedKey
+    if (this.props.selectedKey) {
+      selectedKey = this.props.selectedKey;
+    } else if (this.state.selectedKey) {
+      selectedKey = this.state.selectedKey;
+    }
+
+    return selectedKey;
+  }
+
+  /* given a link, find if one of the child is selected */
+  protected isChildLinkSelected(link: INavLink): boolean {
+    const selectedKey = this.getPreferredSelectedKey();
+
+    if (!selectedKey || !link || !link.links || link.links.length === 0) {
+      return false;
+    }
+
+    return link.links.some((childLink: INavLink) => {
+      return !!childLink && childLink.key === selectedKey;
+    });
+  }
+
+  // given a link and an optional includeChildren parameter, find if the link or any of the children is selected
+  protected isLinkSelected(link: INavLink, includeChildren: boolean): boolean {
+    const selectedKey = this.getPreferredSelectedKey();
+
+    if (!selectedKey || !link) {
+      return false;
+    }
+
+    // check if the link or any of the child link is selected
+    return link.key === selectedKey ||
+      (includeChildren && this.isChildLinkSelected(link));
+  }
+}
diff --git a/packages/experiments/src/components/Nav/NavPage.tsx b/packages/experiments/src/components/Nav/NavPage.tsx
new file mode 100644
index 0000000000000..5d800379094b8
--- /dev/null
+++ b/packages/experiments/src/components/Nav/NavPage.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {
+  ExampleCard,
+  IComponentDemoPageProps,
+  ComponentPage,
+  PropertiesTableSet
+} from '@uifabric/example-app-base';
+import { NavExample } from './examples/Nav.Example';
+const NavExampleCode =
+  require('!raw-loader!@uifabric/experiments/src/components/Nav/examples/Nav.Example.tsx') as string;
+
+export class NavPage extends React.Component<IComponentDemoPageProps, {}> {
+  public render(): JSX.Element {
+    return (
+      <ComponentPage
+        title=' Nav'
+        componentName='NavToggler'
+        exampleCards={
+          <div>
+            <ExampleCard title='Nav' isOptIn={ true } code={ NavExampleCode }>
+              <NavExample />
+            </ExampleCard>
+          </div>
+        }
+        propertiesTables={
+          <PropertiesTableSet
+            sources={ [
+              require<string>('!raw-loader!@uifabric/experiments/src/components/Nav/Nav.types.ts')
+            ] }
+            renderOnly={ ['INavProps', 'INavState'] }
+          />
+        }
+        overview={
+          <div />
+        }
+        bestPractices={
+          <div />
+        }
+        dos={
+          <div>
+            <ul>
+              <li>Use the hamburger icon at the top to switch between expanded and collapsed state</li>
+              <li>Use the optional named second menu group if needed to split/categorize the menu items.</li>
+              <li>Use only supported actions on leaf nodes - expand if there is child menu or script execution
+                through onClick props or open url (includes hashtag) based on target property</li>
+            </ul>
+          </div>
+        }
+        donts={
+          <div>
+            <ul>
+              <li>Provide script or url for the parent node. Parent node is used to expand/collapse it's child nodes.</li>
+            </ul>
+          </div>
+        }
+        isHeaderVisible={ this.props.isHeaderVisible }
+      />
+    );
+  }
+}
diff --git a/packages/experiments/src/components/Nav/NavToggler.tsx b/packages/experiments/src/components/Nav/NavToggler.tsx
new file mode 100644
index 0000000000000..8f313815ddf32
--- /dev/null
+++ b/packages/experiments/src/components/Nav/NavToggler.tsx
@@ -0,0 +1,102 @@
+/* tslint:disable */
+import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
+import * as React from 'react';
+import { Nav } from './Nav';
+import {
+  INavProps,
+  INavState,
+  INavStyleProps,
+  INavStyles
+} from "./Nav.types";
+import { SlimNav } from './SlimNav';
+import {
+  getStyles
+} from './Nav.styles';
+import {
+  styled,
+  classNamesFunction
+} from 'office-ui-fabric-react/lib/Utilities';
+
+const getClassNames = classNamesFunction<INavStyleProps, INavStyles>();
+
+class NavTogglerComponent extends React.Component<INavProps, INavState> {
+  constructor(props: INavProps) {
+    super(props);
+
+    this.state = {
+      isNavCollapsed: props.isNavCollapsed ? props.isNavCollapsed : false
+    };
+  }
+
+  public render() {
+    if (!this.props.groups || this.props.groups.length == 0) {
+      return null;
+    }
+
+    const isCollapsed = this.state.isNavCollapsed;
+    const { getStyles } = this.props;
+    const classNames = getClassNames(getStyles!, { isCollapsed });
+
+    return (
+      <div className={ classNames.root }>
+        {
+          this._renderExpandCollapseNavItem()
+        }
+        {
+          isCollapsed ?
+            <SlimNav
+              groups={ this.props.groups }
+              selectedKey={ this.props.selectedKey }
+              navScrollerId={ this.props.navScrollerId } />
+            :
+            <Nav
+              groups={ this.props.groups }
+              selectedKey={ this.props.selectedKey } />
+        }
+      </div>
+    );
+  }
+
+  private _onNavCollapseClicked(_ev: React.MouseEvent<HTMLElement>): void {
+    this.setState((prevState: INavState) => {
+      const isNavCollapsed = !prevState.isNavCollapsed;
+
+      // inform the caller about the collapse event
+      if (!!this.props.onNavCollapsedCallback) {
+        this.props.onNavCollapsedCallback(isNavCollapsed);
+      }
+
+      return {
+        isNavCollapsed: isNavCollapsed
+      } as INavState;
+    });
+  }
+
+  private _renderExpandCollapseNavItem(): React.ReactElement<{}> {
+    const isNavCollapsed = this.state.isNavCollapsed;
+    const { getStyles } = this.props;
+    const classNames = getClassNames(getStyles!, {});
+
+    return (
+      <a
+        onClick={ this._onNavCollapseClicked.bind(this) }
+        aria-expanded={ isNavCollapsed ? "false" : "true" }
+        data-hint="ReactLeftNav"
+        data-value="ToggleNavCollapse">
+        <div className={ classNames.navToggler }>
+          <Icon
+            className={ classNames.navItemIconColumn }
+            iconName="GlobalNavButton"
+            aria-hidden="true"
+          />
+        </div>
+      </a >
+    );
+  }
+}
+
+export const NavToggler = styled<INavProps, INavStyleProps, INavStyles>(
+  NavTogglerComponent,
+  getStyles
+);
+/* tslint:enable */
diff --git a/packages/experiments/src/components/Nav/SlimNav.tsx b/packages/experiments/src/components/Nav/SlimNav.tsx
new file mode 100644
index 0000000000000..55a0b98de6604
--- /dev/null
+++ b/packages/experiments/src/components/Nav/SlimNav.tsx
@@ -0,0 +1,301 @@
+/* tslint:disable */
+import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/components/FocusZone';
+import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
+import { INavLinkGroup } from 'office-ui-fabric-react/lib/components/Nav';
+import { INavState } from 'office-ui-fabric-react/lib/components/Nav/Nav.base';
+import * as React from 'react';
+import {
+  INavProps,
+  INavLink,
+  INavStyleProps,
+  INavStyles
+} from './Nav.types';
+import {
+  getStyles
+} from './Nav.styles';
+import { NavBase } from './NavBase';
+import {
+  styled,
+  classNamesFunction
+} from 'office-ui-fabric-react/lib/Utilities';
+
+const getClassNames = classNamesFunction<INavStyleProps, INavStyles>();
+
+class SlimNavComponent extends NavBase {
+  constructor(props: INavProps) {
+    super(props);
+
+    this.state = {
+      isLinkExpandStateChanged: false,
+      selectedKey: props.initialSelectedKey || props.selectedKey
+    };
+  }
+
+  public get selectedKey(): string | undefined {
+    return this.state.selectedKey;
+  }
+
+  public render() {
+    if (!this.props.groups || this.props.groups.length === 0) {
+      return null;
+    }
+
+    return (
+      <FocusZone direction={ FocusZoneDirection.vertical }>
+        <nav role='navigation'>
+          {
+            this.props.groups.map((group: INavLinkGroup, groupIndex: number) => {
+              return this._renderGroup(group, groupIndex);
+            })
+          }
+        </nav>
+      </FocusZone>
+    );
+  }
+
+  private _onLinkClicked(link: INavLink, ev: React.MouseEvent<HTMLElement>): void {
+    // set selected node
+    const nextState: INavState = {
+      selectedKey: link.key
+    };
+    this.setState(nextState);
+
+    const hasChildren = link.links && link.links.length > 0;
+
+    // if there is no children and onClick handler is defined, call it
+    if (!hasChildren && link.onClick) {
+      link.onClick(ev, link);
+    }
+
+    // prevent url action on anchor tag if the node has a children or if the onClick handler is defined
+    if (hasChildren || link.onClick) {
+      ev.preventDefault();
+    }
+
+    ev.stopPropagation();
+  }
+
+  private _getScrollTop(): number | undefined {
+    if (!this.props.navScrollerId) {
+      return undefined;
+    }
+
+    const navScroller = document.getElementById(this.props.navScrollerId) as HTMLElement;
+
+    if (navScroller && navScroller.scrollTop > 0) {
+      return navScroller.scrollTop;
+    }
+
+    return undefined;
+  }
+
+
+  private _onLinkMouseEnterOrLeave(link: INavLink, ev: React.SyntheticEvent<HTMLElement>): void {
+    link.scrollTop = this._getScrollTop();
+    this.setState({ isLinkExpandStateChanged: true });
+
+    ev.preventDefault();
+    ev.stopPropagation();
+  }
+
+  private _renderCompositeLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> | null {
+    if (!link) {
+      return null;
+    }
+
+    let rightIconName = null;
+    if (link.url && link.target && link.target === '_blank') {
+      // for external links, show an icon
+      rightIconName = 'OpenInNewWindow';
+    }
+
+    let linkTextStyle: React.CSSProperties = {};
+    if (!rightIconName) {
+      linkTextStyle.width = '100%';
+    }
+    else {
+      // leave 50px to the icon on the right
+      linkTextStyle.width = 'calc(100% - 50px)';
+    }
+
+    const isSelected = nestingLevel > 0 && this.isLinkSelected(link, false /* includeChildren */);
+    const { getStyles } = this.props;
+    const classNames = getClassNames(getStyles!, { isSelected, nestingLevel });
+
+    return (
+      <a
+        href={ link.url ? link.url : undefined }
+        target={ link.target ? link.target : undefined }
+        key={ link.key || linkIndex }
+        data-hint='SlimReactLeftNav'
+        data-value={ link.name }
+        aria-label={ link.name }
+        onClick={ this._onLinkClicked.bind(this, link) }>
+        <div className={ classNames.navFloatingItemRoot }>
+          {
+            <div className={ classNames.navItemNameColumn } style={ linkTextStyle }>
+              { link.name }
+            </div>
+          }
+          {
+            rightIconName ?
+              <Icon
+                className={ classNames.navItemIconColumn }
+                iconName={ rightIconName }
+              />
+              : null
+          }
+        </div>
+      </a>
+    );
+  }
+
+  private _renderFloatingLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> | null {
+    if (!link) {
+      return null;
+    }
+
+    return (
+      <li
+        role='listitem'
+        key={ link.key || linkIndex }
+        title={ link.name }>
+        {
+          this._renderCompositeLink(link, linkIndex, nestingLevel)
+        }
+        {
+          // show child links
+          // 1. only for the first level
+          nestingLevel == 0 ?
+            <div>
+              {
+                this._renderFloatingLinks(link.links as INavLink[], ++nestingLevel)
+              }
+            </div>
+            : null
+        }
+      </li>
+    )
+  }
+
+  private _renderFloatingLinks(links: INavLink[], nestingLevel: number): React.ReactElement<{}> | null {
+    if (!links || links.length === 0) {
+      return null;
+    }
+
+    return (
+      <ul role='list'>
+        {
+          links.map((link: INavLink, linkIndex: number) => {
+            return this._renderFloatingLink(link, linkIndex, nestingLevel);
+          })
+        }
+      </ul>
+    );
+  }
+
+  private _renderFloatingNav(link: INavLink, _linkIndex: number): React.ReactElement<{}> | null {
+    if (!link) {
+      return null;
+    }
+
+    const hasChildren = (!!link.links && link.links.length > 0);
+    const { getStyles } = this.props;
+    const classNames = getClassNames(getStyles!, { hasChildren, scrollTop: link.scrollTop });
+
+    return (
+      <div className={ classNames.navFloatingRoot }>
+        {
+          this._renderFloatingLinks([link], 0 /* nestingLevel */)
+        }
+      </div>
+    );
+  }
+
+  private _renderLink(link: INavLink, linkIndex: number, _nestingLevel: number): React.ReactElement<{}> | null {
+    if (!link) {
+      return null;
+    }
+
+    const isSelected = this.isLinkSelected(link, true /* includeChildren */);
+    const hasChildren = (!!link.links && link.links.length > 0);
+    const { getStyles } = this.props;
+    const classNames = getClassNames(getStyles!, { isSelected, hasChildren });
+
+    return (
+      <li
+        role='listitem'
+        key={ link.key || linkIndex }
+        onMouseEnter={ this._onLinkMouseEnterOrLeave.bind(this, link) }
+        onMouseLeave={ this._onLinkMouseEnterOrLeave.bind(this, link) }
+        title={ link.name }
+        className={ classNames.navSlimItemRoot }>
+        <a
+          href={ link.url ? link.url : undefined }
+          target={ link.target ? link.target : undefined }
+          key={ link.key || linkIndex }
+          data-hint='SlimReactLeftNav'
+          data-value={ link.name }
+          onClick={ this._onLinkClicked.bind(this, link) }>
+          <div className={ classNames.navItemRoot }>
+            <Icon
+              className={ classNames.navItemIconColumn }
+              iconName={ link.icon }
+            />
+          </div>
+        </a>
+        {
+          this._renderFloatingNav(link, linkIndex)
+        }
+      </li>
+    );
+  }
+
+  private _renderLinks(links: INavLink[], nestingLevel: number): React.ReactElement<{}> | null {
+    if (!links || links.length === 0) {
+      return null;
+    }
+
+    return (
+      <ul role='list'>
+        {
+          links.map((link: INavLink, linkIndex: number) => {
+            return this._renderLink(link, linkIndex, nestingLevel);
+          })
+        }
+      </ul>
+    );
+  }
+
+  private _renderGroup(group: INavLinkGroup, groupIndex: number): React.ReactElement<{}> | null {
+    if (!group || !group.links || group.links.length === 0) {
+      return null;
+    }
+
+    const { getStyles } = this.props;
+    const classNames = getClassNames(getStyles!, {});
+
+    return (
+      <div key={ groupIndex }>
+        {
+          // do not render group header for the first group
+          groupIndex > 0 && group.name ?
+            <div className={ classNames.navGroupSeparatorRoot }>
+              <div className={ classNames.navGroupSeparatorHrLine }>
+              </div>
+            </div>
+            : null
+        }
+        {
+          this._renderLinks(group.links, 0 /* nestingLevel */)
+        }
+      </div>
+    );
+  }
+}
+
+export const SlimNav = styled<INavProps, INavStyleProps, INavStyles>(
+  SlimNavComponent,
+  getStyles
+);
+/* tslint:enable */
diff --git a/packages/experiments/src/components/Nav/examples/Nav.Example.tsx b/packages/experiments/src/components/Nav/examples/Nav.Example.tsx
new file mode 100644
index 0000000000000..9ed205d85757d
--- /dev/null
+++ b/packages/experiments/src/components/Nav/examples/Nav.Example.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { INavLinkGroup } from 'office-ui-fabric-react/lib/components/Nav';
+import { NavToggler } from '../NavToggler';
+
+export class NavExample extends React.Component<{}, {}> {
+  constructor(props: {}) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const navLinkGroups: INavLinkGroup[] = [
+      {
+        name: 'default group',
+        links: [
+          {
+            name: 'Home - no action supported', url: 'http://example.com', isExpanded: true, icon: 'Home',
+            links: [
+              { name: 'Activity', url: 'http://msn.com', key: 'key1' },
+              { name: 'News - test with long name to show ellipse', url: 'http://msn.com', target: '_blank', key: 'key2' }
+            ]
+          },
+          { name: 'Documents', url: 'http://example.com', key: 'key3', icon: 'Document' },
+          { name: 'Pages', url: 'http://msn.com', target: '_blank', key: 'key4', icon: 'Page' },
+          {
+            name: 'Notebook - test with long name to show ellipse',
+            url: 'http://msn.com',
+            target: '_blank',
+            key: 'key5',
+            icon: 'DietPlanNotebook'
+          },
+        ]
+      },
+      {
+        name: 'named menu group',
+        links: [
+          {
+            name: 'Home - no action supported', url: 'http://example.com', isExpanded: false, icon: 'Home',
+            links: [
+              { name: 'Activity', url: 'http://msn.com', key: 'key6' },
+              { name: 'News - test with long name to show ellipse', url: 'http://msn.com', target: '_blank', key: 'key7' }
+            ]
+          },
+          { name: 'Documents', url: 'http://example.com', key: 'key8', icon: 'Document' },
+          { name: 'Pages', url: 'http://msn.com', target: '_blank', key: 'key9', icon: 'Page' },
+          {
+            name: 'Notebook - test with long name to show ellipse',
+            url: 'http://msn.com',
+            target: '_blank',
+            key: 'key10',
+            icon: 'DietPlanNotebook'
+          },
+        ]
+      }
+    ];
+
+    return (
+      <div>
+        <NavToggler groups={ navLinkGroups } />
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Nav/index.ts b/packages/experiments/src/components/Nav/index.ts
new file mode 100644
index 0000000000000..7669f46817a36
--- /dev/null
+++ b/packages/experiments/src/components/Nav/index.ts
@@ -0,0 +1,2 @@
+export * from './NavToggler';
+export * from './Nav.types';
diff --git a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx
index f725e47c0a009..40790c614dd6b 100644
--- a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx
@@ -28,7 +28,7 @@ describe('SelectedItemsList', () => {
         <BaseSelectedItemsListWithType
         />
       );
-      let tree = component.toJSON();
+      const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -62,7 +62,7 @@ describe('SelectedItemsList', () => {
         root
       ) as TypedBaseSelectedItemsList;
 
-      let items: ISimple[] = [{ key: '1', name: 'a' }, { key: '2', name: 'b' }];
+      const 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 f3116a45f136e..a24a6f1549228 100644
--- a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
@@ -28,7 +28,7 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
   constructor(basePickerProps: P) {
     super(basePickerProps);
 
-    let items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
+    const items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
     this.state = {
       items: items,
     };
@@ -45,35 +45,35 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
 
   public addItems = (items: T[]): void => {
     // tslint:disable-next-line:no-any
-    let processedItems: T[] | PromiseLike<T[]> = this.props.onItemSelected ? (this.props.onItemSelected as any)(items) : items;
+    const processedItems: T[] | PromiseLike<T[]> = this.props.onItemSelected ? (this.props.onItemSelected as any)(items) : items;
 
-    let processedItemObjects: T[] = processedItems as T[];
-    let processedItemPromiseLikes: PromiseLike<T[]> = processedItems as PromiseLike<T[]>;
+    const processedItemObjects: T[] = processedItems as T[];
+    const processedItemPromiseLikes: PromiseLike<T[]> = processedItems as PromiseLike<T[]>;
 
     if (processedItemPromiseLikes && processedItemPromiseLikes.then) {
       processedItemPromiseLikes.then((resolvedProcessedItems: T[]) => {
-        let newItems: T[] = this.state.items.concat(resolvedProcessedItems);
+        const newItems: T[] = this.state.items.concat(resolvedProcessedItems);
         this.updateItems(newItems);
       });
     } else {
-      let newItems: T[] = this.state.items.concat(processedItemObjects);
+      const newItems: T[] = this.state.items.concat(processedItemObjects);
       this.updateItems(newItems);
     }
     this.setState({ suggestedDisplayValue: '' });
   }
 
   public removeItemAt = (index: number): void => {
-    let { items } = this.state;
+    const { items } = this.state;
     // tslint:disable-next-line:no-any
     if (index > -1) {
-      let newItems = items.slice(0, index).concat(items.slice(index + 1));
+      const newItems = items.slice(0, index).concat(items.slice(index + 1));
       this.updateItems(newItems);
     }
   }
 
   public onCopy = (ev: React.ClipboardEvent<HTMLElement>): void => {
     if (this.props.onCopyItems && this.selection.getSelectedCount() > 0) {
-      let selectedItems: T[] = this.selection.getSelection() as T[];
+      const selectedItems: T[] = this.selection.getSelection() as T[];
       this.copyItems(selectedItems);
     }
   }
@@ -93,7 +93,7 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
   }
 
   public componentWillReceiveProps(newProps: P): void {
-    let newItems = newProps.selectedItems;
+    const newItems = newProps.selectedItems;
 
     if (newItems) {
       this.setState({ items: newProps.selectedItems });
@@ -110,10 +110,10 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
   }
 
   protected renderItems = (): JSX.Element[] => {
-    let { removeButtonAriaLabel } = this.props;
-    let onRenderItem = this.props.onRenderItem as (props: ISelectedItemProps<T>) => JSX.Element;
+    const { removeButtonAriaLabel } = this.props;
+    const onRenderItem = this.props.onRenderItem as (props: ISelectedItemProps<T>) => JSX.Element;
 
-    let { items } = this.state;
+    const { items } = this.state;
     // tslint:disable-next-line:no-any
     return items.map((item: any, index: number) => onRenderItem({
       item,
@@ -150,10 +150,10 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
   }
 
   protected onItemChange = (changedItem: T, index: number): void => {
-    let { items } = this.state;
+    const { items } = this.state;
 
     if (index >= 0) {
-      let newItems: T[] = items;
+      const newItems: T[] = items;
       newItems[index] = changedItem;
 
       this.updateItems(newItems);
@@ -161,22 +161,22 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
   }
 
   protected removeItem = (item: ISelectedItemProps<T>): void => {
-    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.updateItems(newItems);
     }
   }
 
   // tslint:disable-next-line:no-any
   protected removeItems = (itemsToRemove: any[]): void => {
-    let { items } = this.state;
+    const { items } = this.state;
     // tslint:disable-next-line:no-any
-    let newItems: T[] = items.filter((item: any) => itemsToRemove.indexOf(item) === -1);
-    let firstItemToRemove = itemsToRemove[0];
-    let index: number = items.indexOf(firstItemToRemove);
+    const newItems: T[] = items.filter((item: any) => itemsToRemove.indexOf(item) === -1);
+    const firstItemToRemove = itemsToRemove[0];
+    const index: number = items.indexOf(firstItemToRemove);
 
     this.updateItems(newItems, index);
   }
@@ -211,9 +211,9 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
   protected copyItems(items: T[]): void {
     if (this.props.onCopyItems) {
       // tslint:disable-next-line:no-any
-      let copyText = (this.props.onCopyItems as any)(items);
+      const copyText = (this.props.onCopyItems as any)(items);
 
-      let copyInput = document.createElement('input') as HTMLInputElement;
+      const copyInput = document.createElement('input') as HTMLInputElement;
       document.body.appendChild(copyInput);
 
       try {
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
index 1639da03805bc..3f4049867221f 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
@@ -44,9 +44,9 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
   }
 
   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);
+    const getEditingItemText = this.props.getEditingItemText as (item: IExtendedPersonaProps) => string;
+    const itemText = getEditingItemText(this.props.item);
+    this._editingFloatingPicker.current && this._editingFloatingPicker.current.onQueryStringChanged(itemText);
     this._editingInput.value = itemText;
     this._editingInput.focus();
   }
@@ -74,7 +74,7 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
   }
 
   private _renderEditingSuggestions = (): JSX.Element => {
-    let onRenderFloatingPicker = this._onRenderFloatingPicker;
+    const onRenderFloatingPicker = this._onRenderFloatingPicker;
     return (onRenderFloatingPicker({
       componentRef: this._editingFloatingPicker,
       onChange: this._onSuggestionSelected,
@@ -91,26 +91,26 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
   }
 
   private _onInputClick = (): void => {
-    this._editingFloatingPicker.value && this._editingFloatingPicker.value.showPicker(true /*updatevalue*/);
+    this._editingFloatingPicker.current && this._editingFloatingPicker.current.showPicker(true /*updatevalue*/);
   }
 
   private _onInputBlur = (ev: React.FocusEvent<HTMLElement>): void => {
-    if (this._editingFloatingPicker.value &&
+    if (this._editingFloatingPicker.current &&
       (ev.relatedTarget === null || (ev.relatedTarget as HTMLElement).className.indexOf('ms-SearchMore-button') === -1)
     ) {
-      this._editingFloatingPicker.value.forceResolveSuggestion();
+      this._editingFloatingPicker.current.forceResolveSuggestion();
     }
   }
 
   private _onInputChange = (ev: React.FormEvent<HTMLElement>): void => {
-    let value: string = (ev.target as HTMLInputElement).value;
+    const 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);
+      this._editingFloatingPicker.current && this._editingFloatingPicker.current.onQueryStringChanged(value);
     }
   }
 
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx
index 296b6cf76819b..4352ac823eb93 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx
@@ -22,7 +22,7 @@ export class ExtendedSelectedItem extends BaseComponent<ISelectedPeopleItemProps
   }
 
   public render(): JSX.Element {
-    let {
+    const {
       item,
       onExpandItem,
       onRemoveItem,
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx
index 76d64899af892..511abbe04cb38 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx
@@ -37,7 +37,7 @@ export class SelectedItemWithContextMenu extends BaseComponent<ISelectedItemWith
           <ContextualMenu
             items={ this.props.menuItems }
             shouldFocusOnMount={ true }
-            target={ this.itemElement.value }
+            target={ this.itemElement.current }
             onDismiss={ this._onCloseContextualMenu }
             directionalHint={ DirectionalHint.bottomLeftEdge }
           />)
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
index c667611f15cc2..7311289ef7cbd 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
@@ -49,24 +49,24 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList {
   };
 
   public replaceItem = (itemToReplace: IExtendedPersonaProps, itemsToReplaceWith: IExtendedPersonaProps[]): void => {
-    let { items } = this.state;
-    let index: number = items.indexOf(itemToReplace);
+    const { items } = this.state;
+    const index: number = items.indexOf(itemToReplace);
     if (index > -1) {
-      let newItems = items.slice(0, index).concat(itemsToReplaceWith).concat(items.slice(index + 1));
+      const newItems = items.slice(0, index).concat(itemsToReplaceWith).concat(items.slice(index + 1));
       this.updateItems(newItems);
     }
   }
 
   protected renderItems = (): JSX.Element[] => {
-    let { items } = this.state;
+    const { items } = this.state;
     // tslint:disable-next-line:no-any
     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 = {
+    const { removeButtonAriaLabel } = this.props;
+    const props = {
       item,
       index,
       key: item.key ? item.key : index,
@@ -90,8 +90,8 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList {
         />
       );
     } else {
-      let onRenderItem = this.props.onRenderItem as (props: ISelectedPeopleItemProps) => JSX.Element;
-      let renderedItem = onRenderItem(props);
+      const onRenderItem = this.props.onRenderItem as (props: ISelectedPeopleItemProps) => JSX.Element;
+      const renderedItem = onRenderItem(props);
       return (
         props.menuItems.length > 0 ?
           (
@@ -120,7 +120,7 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList {
 
   // tslint:disable-next-line:no-any
   private _createMenuItems(item: any): IContextualMenuItem[] {
-    let menuItems: IContextualMenuItem[] = [];
+    const menuItems: IContextualMenuItem[] = [];
 
     if (this.props.editMenuItemText && this.props.getEditingItemText) {
       menuItems.push({
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleListPage.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleListPage.tsx
index eb750081f9e61..85a80fa24bde5 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleListPage.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleListPage.tsx
@@ -8,7 +8,7 @@ import {
 
 import { PeopleSelectedItemsListExample } from '../examples/SelectedPeopleList.Basic.Example';
 const PeopleSelectedItemsListExampleCode =
-  require('!raw-loader!experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example') as string;
+  require('!raw-loader!@uifabric/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example') as string;
 
 export class SelectedPeopleListPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -26,7 +26,7 @@ export class SelectedPeopleListPage extends React.Component<IComponentDemoPagePr
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/SelectedItemsList/BaseSelectedItemsList.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/Shimmer/Shimmer.base.tsx b/packages/experiments/src/components/Shimmer/Shimmer.base.tsx
index af50bd05af2d1..eae8306ce21ea 100644
--- a/packages/experiments/src/components/Shimmer/Shimmer.base.tsx
+++ b/packages/experiments/src/components/Shimmer/Shimmer.base.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
-import {
-  BaseComponent,
-  classNamesFunction,
-} from '../../Utilities';
+import { BaseComponent, classNamesFunction } from '../../Utilities';
+import { DefaultPalette, IStyleSet } from '../../Styling';
 import {
   IShimmerProps,
   IShimmerStyleProps,
@@ -13,10 +11,6 @@ import {
   IGap,
   ShimmerElementVerticalAlign,
 } from './Shimmer.types';
-import {
-  DefaultPalette,
-  IStyleSet
-} from '../../Styling';
 import { ShimmerLine } from './ShimmerLine/ShimmerLine';
 import { ShimmerGap } from './ShimmerGap/ShimmerGap';
 import { ShimmerCircle } from './ShimmerCircle/ShimmerCircle';
@@ -66,7 +60,7 @@ export function getRenderedElements(lineElements?: Array<ICircle | IGap | ILine>
   const renderedElements: React.ReactNode = lineElements ?
     lineElements.map((elem: ICircle | ILine | IGap, index: number): JSX.Element => {
       switch (elem.type) {
-        case ShimmerElementType.CIRCLE:
+        case ShimmerElementType.circle:
           return (
             <ShimmerCircle
               key={ index }
@@ -74,7 +68,7 @@ export function getRenderedElements(lineElements?: Array<ICircle | IGap | ILine>
               borderStyle={ getBorderStyles(elem, rowHeight) }
             />
           );
-        case ShimmerElementType.GAP:
+        case ShimmerElementType.gap:
           return (
             <ShimmerGap
               key={ index }
@@ -82,7 +76,7 @@ export function getRenderedElements(lineElements?: Array<ICircle | IGap | ILine>
               borderStyle={ getBorderStyles(elem, rowHeight) }
             />
           );
-        case ShimmerElementType.LINE:
+        case ShimmerElementType.line:
           return (
             <ShimmerLine
               key={ index }
@@ -107,17 +101,17 @@ export function getBorderStyles(elem: ICircle | IGap | ILine, rowHeight?: number
 
   let borderStyle: IStyleSet | undefined;
 
-  if (!elem.verticalAlign || elem.verticalAlign === ShimmerElementVerticalAlign.CENTER) {
+  if (!elem.verticalAlign || elem.verticalAlign === ShimmerElementVerticalAlign.center) {
     borderStyle = {
       borderBottom: `${dif ? Math.floor(dif / 2) : 0}px solid ${DefaultPalette.white}`,
       borderTop: `${dif ? Math.ceil(dif / 2) : 0}px solid ${DefaultPalette.white}`
     };
-  } else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.TOP) {
+  } else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.top) {
     borderStyle = {
       borderBottom: `${dif ? dif : 0}px solid ${DefaultPalette.white}`,
       borderTop: `0px solid ${DefaultPalette.white}`
     };
-  } else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.BOTTOM) {
+  } else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.bottom) {
     borderStyle = {
       borderBottom: `0px solid ${DefaultPalette.white}`,
       borderTop: `${dif ? dif : 0}px solid ${DefaultPalette.white}`
@@ -130,15 +124,15 @@ export function getBorderStyles(elem: ICircle | IGap | ILine, rowHeight?: number
 export function findMaxElementHeight(elements: Array<ICircle | IGap | ILine>): number {
   const itemsDefaulted: Array<ICircle | IGap | ILine> = elements.map((elem: ICircle | IGap | ILine): ICircle | IGap | ILine => {
     switch (elem.type) {
-      case ShimmerElementType.CIRCLE:
+      case ShimmerElementType.circle:
         if (!elem.height) {
           elem.height = CIRCLE_DEFAULT_HEIGHT;
         }
-      case ShimmerElementType.LINE:
+      case ShimmerElementType.line:
         if (!elem.height) {
           elem.height = LINE_DEFAULT_HEIGHT;
         }
-      case ShimmerElementType.GAP:
+      case ShimmerElementType.gap:
         if (!elem.height) {
           elem.height = GAP_DEFAULT_HEIGHT;
         }
diff --git a/packages/experiments/src/components/Shimmer/Shimmer.styles.ts b/packages/experiments/src/components/Shimmer/Shimmer.styles.ts
index 3e07eb4c8d6f4..ff78b19e0442a 100644
--- a/packages/experiments/src/components/Shimmer/Shimmer.styles.ts
+++ b/packages/experiments/src/components/Shimmer/Shimmer.styles.ts
@@ -1,8 +1,5 @@
 import { IShimmerStyleProps, IShimmerStyles } from './Shimmer.types';
-import {
-  keyframes,
-  DefaultPalette
-} from '../../Styling';
+import { keyframes, DefaultPalette } from '../../Styling';
 
 export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
   const {
diff --git a/packages/experiments/src/components/Shimmer/Shimmer.types.ts b/packages/experiments/src/components/Shimmer/Shimmer.types.ts
index 6fe6293f99841..d868f5e522338 100644
--- a/packages/experiments/src/components/Shimmer/Shimmer.types.ts
+++ b/packages/experiments/src/components/Shimmer/Shimmer.types.ts
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import {
-  IStyle
-} from '../../Styling';
+import { IStyle } from '../../Styling';
 import { IStyleFunction } from '../../Utilities';
 
 export interface IShimmer {
@@ -136,14 +134,28 @@ export interface IShimmerStyles {
   dataWrapper?: IStyle;
 }
 
+/**
+ * The CAPS lock values will be deprecated soon.
+ * @deprecated
+ */
 export const enum ShimmerElementType {
   LINE = 'line',
   CIRCLE = 'circle',
-  GAP = 'gap'
+  GAP = 'gap',
+  line = 'line',
+  circle = 'circle',
+  gap = 'gap'
 }
 
+/**
+ * The CAPS lock values will be deprecated soon.
+ * @deprecated
+ */
 export const enum ShimmerElementVerticalAlign {
   CENTER = 'center',
   BOTTOM = 'bottom',
-  TOP = 'top'
+  TOP = 'top',
+  center = 'center',
+  bottom = 'bottom',
+  top = 'top'
 }
\ 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
index 872d0586ba60f..6ca7cf7207b03 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
@@ -2,10 +2,7 @@ import {
   IShimmerCircleStyleProps,
   IShimmerCircleStyles
 } from './ShimmerCircle.types';
-import {
-  IStyleSet,
-  DefaultPalette
-} from 'office-ui-fabric-react/lib/Styling';
+import { IStyleSet, DefaultPalette } from '../../../Styling';
 
 export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles {
   const {
diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx
index 63b114832079d..a98c19d89acb9 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx
+++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx
@@ -1,6 +1,4 @@
-import {
-  styled
-} from '../../../Utilities';
+import { styled } from '../../../Utilities';
 import { getStyles } from './ShimmerCircle.styles';
 import {
   IShimmerCircleProps,
diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
index ce8294cc1fd27..9c606d96728a1 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  IStyle,
-  IStyleSet
-} from '../../../Styling';
+import { IStyle, IStyleSet } from '../../../Styling';
 import { IStyleFunction } from '../../../Utilities';
 
 export interface IShimmerCircle {
diff --git a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
index 2cb14db58a6e2..cf5bbfb0842e7 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
@@ -2,7 +2,7 @@ import {
   IShimmerGapStyleProps,
   IShimmerGapStyles
 } from './ShimmerGap.types';
-import { IStyleSet, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
+import { IStyleSet, DefaultPalette } from '../../../Styling';
 
 export function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles {
   const {
diff --git a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.tsx b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.tsx
index dff5780583ed5..87f3a113252e7 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.tsx
+++ b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.tsx
@@ -1,6 +1,4 @@
-import {
-  styled
-} from '../../../Utilities';
+import { styled } from '../../../Utilities';
 import {
   IShimmerGapProps,
   IShimmerGapStyleProps,
diff --git a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
index 325adaff895d0..2c7e0525782a4 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  IStyle,
-  IStyleSet
-} from '../../../Styling';
+import { IStyle, IStyleSet } from '../../../Styling';
 import { IStyleFunction } from '../../../Utilities';
 
 export interface IShimmerGap {
diff --git a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
index 60015d7b943fd..3025743b7437b 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
@@ -2,7 +2,7 @@ import {
   IShimmerLineStyleProps,
   IShimmerLineStyles
 } from './ShimmerLine.types';
-import { IStyleSet } from 'office-ui-fabric-react/lib/Styling';
+import { IStyleSet } from '../../../Styling';
 
 export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {
   const {
diff --git a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.tsx b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.tsx
index af52b5638fb8f..5003aa37fac4e 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.tsx
+++ b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.tsx
@@ -1,6 +1,4 @@
-import {
-  styled
-} from '../../../Utilities';
+import { styled } from '../../../Utilities';
 import {
   IShimmerLineProps,
   IShimmerLineStyleProps,
diff --git a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
index 1d8c2262c19fd..c37742f5269f5 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  IStyle,
-  IStyleSet
-} from '../../../Styling';
+import { IStyle, IStyleSet } from '../../../Styling';
 import { IStyleFunction } from '../../../Utilities';
 
 export interface IShimmerLine {
diff --git a/packages/experiments/src/components/Shimmer/ShimmerPage.tsx b/packages/experiments/src/components/Shimmer/ShimmerPage.tsx
index d5c4ece6fbfe7..c6856225b2518 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerPage.tsx
+++ b/packages/experiments/src/components/Shimmer/ShimmerPage.tsx
@@ -7,13 +7,19 @@ import {
 } from '@uifabric/example-app-base';
 import { ShimmerBasicExample } from './examples/Shimmer.Basic.Example';
 import { ShimmerLoadDataExample } from './examples/Shimmer.LoadData.Example';
-import { ShimmerApplicationExample } from 'experiments/lib/components/Shimmer/examples/Shimmer.Application.Example';
+import { ShimmerApplicationExample } from './examples/Shimmer.Application.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;
-// tslint:disable-next-line:max-line-length
-const ShimmerApplicationExampleCode = require('!raw-loader!experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx') as string;
+const ShimmerBasicExampleCode = require(
+  '!raw-loader!@uifabric/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx'
+) as string;
+
+const ShimmerLoadDataExampleCode = require(
+  '!raw-loader!@uifabric/experiments/src/components/Shimmer/examples/Shimmer.LoadData.Example.tsx'
+) as string;
+
+const ShimmerApplicationExampleCode = require(
+  '!raw-loader!@uifabric/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx'
+) as string;
 
 export class ShimmerPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -46,7 +52,7 @@ export class ShimmerPage extends React.Component<IComponentDemoPageProps, {}> {
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/Shimmer/Shimmer.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/Shimmer/Shimmer.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx b/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx
index ec32842026ae1..76ec1eb52a549 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx
+++ b/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx
@@ -8,10 +8,10 @@ import {
   IShimmerTileStyleProps,
   IShimmerTileStyles
 } from './ShimmerTile.types';
-import { TileLayoutSizes, TileSize } from 'experiments/lib/Tile';
+import { TileLayoutSizes, TileSize } from '../../../Tile';
 import { ShimmerGap } from '../ShimmerGap/ShimmerGap';
 import { getRenderedElements } from '../Shimmer.base';
-import { ShimmerElementType as ElemType } from 'experiments/lib/Shimmer';
+import { ShimmerElementType as ElemType } from '../Shimmer.types';
 
 const enum ShimmerTileLayoutValues {
   largeSquareWidth = 96,
@@ -59,7 +59,7 @@ const PLACEHOLDER_SIZES: {
 const getClassNames = classNamesFunction<IShimmerTileStyleProps, IShimmerTileStyles>();
 
 export class ShimmerTileBase extends BaseComponent<IShimmerTileProps, {}> {
-  private _classNames: {[key in keyof IShimmerTileStyles]: string};
+  private _classNames: { [key in keyof IShimmerTileStyles]: string };
 
   constructor(props: IShimmerTileProps) {
     super(props);
@@ -120,23 +120,23 @@ export class ShimmerTileBase extends BaseComponent<IShimmerTileProps, {}> {
             getRenderedElements(
               [
                 {
-                  type: ElemType.GAP,
+                  type: ElemType.gap,
                   widthInPixel: (contentSize.width - squareWidth) / 2,
                   height: squareHeight
                 },
                 itemThumbnail ?
                   {
-                    type: ElemType.LINE,
+                    type: ElemType.line,
                     widthInPixel: squareWidth,
                     height: squareHeight
                   } :
                   {
-                    type: ElemType.GAP,
+                    type: ElemType.gap,
                     widthInPixel: squareWidth,
                     height: squareHeight
                   },
                 {
-                  type: ElemType.GAP,
+                  type: ElemType.gap,
                   widthInPixel: (contentSize.width - squareWidth) / 2,
                   height: squareHeight
                 }
@@ -161,17 +161,17 @@ export class ShimmerTileBase extends BaseComponent<IShimmerTileProps, {}> {
                       getRenderedElements(
                         [
                           {
-                            type: ElemType.GAP,
+                            type: ElemType.gap,
                             widthInPixel: (contentSize.width - nameWidth) / 2,
                             height: nameplateNameHeight
                           },
                           {
-                            type: ElemType.LINE,
+                            type: ElemType.line,
                             widthInPixel: nameWidth,
                             height: nameHeight
                           },
                           {
-                            type: ElemType.GAP,
+                            type: ElemType.gap,
                             widthInPixel: (contentSize.width - nameWidth) / 2,
                             height: nameplateNameHeight
                           }
@@ -190,17 +190,17 @@ export class ShimmerTileBase extends BaseComponent<IShimmerTileProps, {}> {
                       getRenderedElements(
                         [
                           {
-                            type: ElemType.GAP,
+                            type: ElemType.gap,
                             widthInPixel: (contentSize.width - activityWidth) / 2,
                             height: nameplateActivityHeight
                           },
                           {
-                            type: ElemType.LINE,
+                            type: ElemType.line,
                             widthInPixel: activityWidth,
                             height: activityHeight
                           },
                           {
-                            type: ElemType.GAP,
+                            type: ElemType.gap,
                             widthInPixel: (contentSize.width - activityWidth) / 2,
                             height: nameplateActivityHeight
                           }
@@ -219,4 +219,4 @@ export class ShimmerTileBase extends BaseComponent<IShimmerTileProps, {}> {
       </div>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.tsx b/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.tsx
index 4244fd0d72900..0ee9a5b155d46 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.tsx
+++ b/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.tsx
@@ -1,6 +1,4 @@
-import {
-  styled
-} from '../../../Utilities';
+import { styled } from '../../../Utilities';
 import {
   IShimmerTileProps,
   IShimmerTileStyleProps,
diff --git a/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.types.ts b/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.types.ts
index 111897b785bba..3ed78c64d9e48 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.types.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.types.ts
@@ -1,12 +1,7 @@
 import * as React from 'react';
-import {
-  IStyle
-} from 'office-ui-fabric-react/lib/Styling';
-import {
-  ISize,
-  IStyleFunction
-} from 'office-ui-fabric-react/lib/Utilities';
-import { TileSize } from 'experiments/lib/Tile';
+import { IStyle } from '../../../Styling';
+import { ISize, IStyleFunction } from '../../../Utilities';
+import { TileSize } from '../../Tile';
 
 export interface IShimmerTile {
 
diff --git a/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx b/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx
index 1b5c24b355a52..549181fbba92f 100644
--- a/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx
@@ -6,7 +6,7 @@ import {
   HoverCard,
   IExpandingCardProps
 } from 'office-ui-fabric-react/lib/HoverCard';
-import { createListItems } from '@uifabric/example-app-base';
+import { createListItems } from '@uifabric/example-app-base/lib/utilities/data';
 import {
   IColumn,
   DetailsList,
@@ -16,7 +16,7 @@ import {
   IDetailsRowProps,
   DetailsRow
 } from 'office-ui-fabric-react';
-import { Shimmer } from 'experiments/lib/Shimmer';
+import { Shimmer } from '@uifabric/experiments/lib/Shimmer';
 import './Shimmer.Example.scss';
 
 export interface IItem {
diff --git a/packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx b/packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx
index 2b93b32869906..0f98651586fe6 100644
--- a/packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import {
   Shimmer,
+  getRenderedElements,
   ShimmerElementType as ElemType,
   ShimmerElementVerticalAlign as ElemVerticalAlign
-} from 'experiments/lib/Shimmer';
+} from '@uifabric/experiments/lib/Shimmer';
+import './Shimmer.Example.scss';
 
 export class ShimmerBasicExample extends React.Component<{}, {}> {
 
@@ -27,55 +29,108 @@ export class ShimmerBasicExample extends React.Component<{}, {}> {
         Custom Shimmer with elements provided.
         <Shimmer
           lineElements={ [
-            { type: ElemType.CIRCLE },
-            { type: ElemType.GAP, widthInPercentage: 2 },
-            { type: ElemType.LINE },
+            { type: ElemType.circle },
+            { type: ElemType.gap, widthInPercentage: 2 },
+            { type: ElemType.line },
           ] }
         />
         Notice how the same elements change relative to the shimmer width provided.
         <Shimmer
           lineElements={ [
-            { type: ElemType.CIRCLE, height: 24 },
-            { type: ElemType.GAP, widthInPercentage: 2 },
-            { type: ElemType.LINE, height: 16, widthInPercentage: 20 },
-            { type: ElemType.GAP, widthInPercentage: 5 },
-            { type: ElemType.LINE, height: 16, widthInPercentage: 20 },
-            { type: ElemType.GAP, widthInPercentage: 10 },
-            { type: ElemType.LINE, height: 16, widthInPercentage: 15 },
-            { type: ElemType.GAP, widthInPercentage: 10 },
-            { type: ElemType.LINE, height: 16 }
+            { type: ElemType.circle, height: 24 },
+            { type: ElemType.gap, widthInPercentage: 2 },
+            { type: ElemType.line, height: 16, widthInPercentage: 20 },
+            { type: ElemType.gap, widthInPercentage: 5 },
+            { type: ElemType.line, height: 16, widthInPercentage: 20 },
+            { type: ElemType.gap, widthInPercentage: 10 },
+            { type: ElemType.line, height: 16, widthInPercentage: 15 },
+            { type: ElemType.gap, widthInPercentage: 10 },
+            { type: ElemType.line, height: 16 }
           ] }
         />
         <Shimmer
           width={ 70 }
           lineElements={ [
-            { type: ElemType.CIRCLE, height: 24 },
-            { type: ElemType.GAP, widthInPercentage: 2 },
-            { type: ElemType.LINE, height: 16, widthInPercentage: 20 },
-            { type: ElemType.GAP, widthInPercentage: 5 },
-            { type: ElemType.LINE, height: 16, widthInPercentage: 20 },
-            { type: ElemType.GAP, widthInPercentage: 10 },
-            { type: ElemType.LINE, height: 16, widthInPercentage: 15 },
-            { type: ElemType.GAP, widthInPercentage: 10 },
-            { type: ElemType.LINE, height: 16 }
+            { type: ElemType.circle, height: 24 },
+            { type: ElemType.gap, widthInPercentage: 2 },
+            { type: ElemType.line, height: 16, widthInPercentage: 20 },
+            { type: ElemType.gap, widthInPercentage: 5 },
+            { type: ElemType.line, height: 16, widthInPercentage: 20 },
+            { type: ElemType.gap, widthInPercentage: 10 },
+            { type: ElemType.line, height: 16, widthInPercentage: 15 },
+            { type: ElemType.gap, widthInPercentage: 10 },
+            { type: ElemType.line, height: 16 }
           ] }
         />
         Variations of vertical alignment for Circles and Lines.
         <Shimmer
           lineElements={ [
-            { type: ElemType.CIRCLE },
-            { type: ElemType.GAP, widthInPercentage: 2 },
-            { type: ElemType.CIRCLE, height: 15, verticalAlign: ElemVerticalAlign.TOP },
-            { type: ElemType.GAP, widthInPercentage: 2 },
-            { type: ElemType.LINE, verticalAlign: ElemVerticalAlign.BOTTOM, widthInPercentage: 20 },
-            { type: ElemType.GAP, widthInPercentage: 2 },
-            { type: ElemType.LINE, height: 5, verticalAlign: ElemVerticalAlign.TOP, widthInPercentage: 20 },
-            { type: ElemType.GAP, widthInPercentage: 2 },
-            { type: ElemType.LINE, height: 16, widthInPercentage: 15 },
-            { type: ElemType.GAP, widthInPercentage: 2 },
-            { type: ElemType.LINE, height: 10, verticalAlign: ElemVerticalAlign.BOTTOM }
+            { type: ElemType.circle },
+            { type: ElemType.gap, widthInPercentage: 2 },
+            { type: ElemType.circle, height: 15, verticalAlign: ElemVerticalAlign.top },
+            { type: ElemType.gap, widthInPercentage: 2 },
+            { type: ElemType.line, verticalAlign: ElemVerticalAlign.bottom, widthInPercentage: 20 },
+            { type: ElemType.gap, widthInPercentage: 2 },
+            { type: ElemType.line, height: 5, verticalAlign: ElemVerticalAlign.top, widthInPercentage: 20 },
+            { type: ElemType.gap, widthInPercentage: 2 },
+            { type: ElemType.line, height: 16, widthInPercentage: 15 },
+            { type: ElemType.gap, widthInPercentage: 2 },
+            { type: ElemType.line, height: 10, verticalAlign: ElemVerticalAlign.bottom }
           ] }
         />
+        Split line examples.
+        <div className='shimmerBasicExample-wrapper'>
+          <Shimmer
+            isBaseStyle={ true }
+          >
+            { getRenderedElements([
+              { type: ElemType.line, widthInPixel: 40, height: 40 },
+              { type: ElemType.gap, widthInPixel: 10, height: 40 }
+            ], 40) }
+            <div
+              // tslint:disable-next-line:jsx-ban-props
+              style={
+                {
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  width: '300px'
+                }
+              }
+            >
+              { getRenderedElements([
+                { type: ElemType.line, widthInPixel: 300, height: 10 },
+                { type: ElemType.line, widthInPixel: 200, height: 10 },
+                { type: ElemType.gap, widthInPixel: 100, height: 20 }
+              ], 20) }
+            </div>
+          </Shimmer>
+        </div>
+        <div className='shimmerBasicExample-wrapper'>
+          <Shimmer
+            isBaseStyle={ true }
+          >
+            { getRenderedElements([
+              { type: ElemType.circle, height: 40 },
+              { type: ElemType.gap, widthInPixel: 10, height: 40 }
+            ], 40) }
+            <div
+              // tslint:disable-next-line:jsx-ban-props
+              style={
+                {
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  width: '500px'
+                }
+              }
+            >
+              { getRenderedElements([
+                { type: ElemType.line, widthInPixel: 400, height: 10 },
+                { type: ElemType.gap, widthInPixel: 100, height: 20 },
+                { type: ElemType.line, widthInPixel: 500, height: 10 }
+              ], 20) }
+            </div>
+          </Shimmer>
+        </div>
       </div>
     );
   }
diff --git a/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss b/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss
index 5352eda584c45..2e6f3ba1a5ac5 100644
--- a/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss
@@ -22,4 +22,8 @@
       margin-right: 30px;
     }
   }
+
+  .shimmerBasicExample-wrapper {
+    margin: 10px;
+  }
 }
\ 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
index b0db227a6fded..7864e1ed4805e 100644
--- a/packages/experiments/src/components/Shimmer/examples/Shimmer.LoadData.Example.tsx
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.LoadData.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Shimmer } from 'experiments/lib/Shimmer';
+import { Shimmer } from '@uifabric/experiments/lib/Shimmer';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 
 export interface IShimmerLoadDataExample {
diff --git a/packages/experiments/src/components/Shimmer/index.ts b/packages/experiments/src/components/Shimmer/index.ts
index ff79f4663bead..616724aa5a726 100644
--- a/packages/experiments/src/components/Shimmer/index.ts
+++ b/packages/experiments/src/components/Shimmer/index.ts
@@ -1,2 +1,11 @@
 export * from './Shimmer';
-export * from './Shimmer.types';
\ No newline at end of file
+export * from './Shimmer.base';
+export * from './Shimmer.types';
+export * from './ShimmerTile/ShimmerTile';
+export * from './ShimmerTile/ShimmerTile.types';
+export * from './ShimmerLine/ShimmerLine';
+export * from './ShimmerLine/ShimmerLine.types';
+export * from './ShimmerCircle/ShimmerCircle';
+export * from './ShimmerCircle/ShimmerCircle.types';
+export * from './ShimmerGap/ShimmerGap';
+export * from './ShimmerGap/ShimmerGap.types';
\ No newline at end of file
diff --git a/packages/experiments/src/components/StaticList/StaticListPage.tsx b/packages/experiments/src/components/StaticList/StaticListPage.tsx
index 8759342a4063a..8b11d2d879884 100644
--- a/packages/experiments/src/components/StaticList/StaticListPage.tsx
+++ b/packages/experiments/src/components/StaticList/StaticListPage.tsx
@@ -17,7 +17,7 @@ export class StaticListPage extends React.Component<IComponentDemoPageProps, {}>
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/StaticList/StaticList.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/StaticList/StaticList.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/Tile/Tile.tsx b/packages/experiments/src/components/Tile/Tile.tsx
index 6f86d42cc5f77..61a0b7252c93d 100644
--- a/packages/experiments/src/components/Tile/Tile.tsx
+++ b/packages/experiments/src/components/Tile/Tile.tsx
@@ -343,10 +343,12 @@ export class Tile extends BaseComponent<ITileProps, ITileState> {
   }: {
       isSelected: boolean;
     }): JSX.Element {
+    const { toggleSelectionAriaLabel } = this.props;
+
     return (
       <span
         role='checkbox'
-        aria-label={ this.props.toggleSelectionAriaLabel }
+        aria-label={ String(toggleSelectionAriaLabel) }
         className={ css('ms-Tile-check', TileStyles.check, CheckStyles.checkHost, {
           [CheckStyles.hostShowCheck]: this.state.isModal
         }) }
diff --git a/packages/experiments/src/components/Tile/Tile.types.ts b/packages/experiments/src/components/Tile/Tile.types.ts
index aceaf8f7829e8..20190f10fc5af 100644
--- a/packages/experiments/src/components/Tile/Tile.types.ts
+++ b/packages/experiments/src/components/Tile/Tile.types.ts
@@ -120,10 +120,10 @@ export interface ITileProps extends IBaseProps, React.AllHTMLAttributes<HTMLSpan
   /**
    * The accessible label for the selection checkbox.
    *
-   * @type {boolean}
+   * @type {string | boolean}
    * @memberof ITileProps
    */
-  toggleSelectionAriaLabel?: boolean;
+  toggleSelectionAriaLabel?: string | boolean;
 
   /**
    * Link ref
diff --git a/packages/experiments/src/components/Tile/TilePage.tsx b/packages/experiments/src/components/Tile/TilePage.tsx
index f4163fe5e44f5..21ebfda1d6929 100644
--- a/packages/experiments/src/components/Tile/TilePage.tsx
+++ b/packages/experiments/src/components/Tile/TilePage.tsx
@@ -7,13 +7,15 @@ import {
 } from '@uifabric/example-app-base';
 
 import { TileFolderExample } from './examples/Tile.Folder.Example';
-const TileFolderExampleCode = require('!raw-loader!experiments/src/components/Tile/examples/Tile.Folder.Example.tsx') as string;
+const TileFolderExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Tile/examples/Tile.Folder.Example.tsx') as string;
 
 import { TileMediaExample } from './examples/Tile.Media.Example';
-const TileMediaExampleCode = require('!raw-loader!experiments/src/components/Tile/examples/Tile.Media.Example.tsx') as string;
+const TileMediaExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Tile/examples/Tile.Media.Example.tsx') as string;
 
 import { TileDocumentExample } from './examples/Tile.Document.Example';
-const TileDocumentExampleCode = require('!raw-loader!experiments/src/components/Tile/examples/Tile.Document.Example.tsx') as string;
+const TileDocumentExampleCode = require(
+  '!raw-loader!@uifabric/experiments/src/components/Tile/examples/Tile.Document.Example.tsx'
+) as string;
 
 export class TilePage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -37,7 +39,7 @@ export class TilePage extends React.Component<IComponentDemoPageProps, {}> {
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/Tile/Tile.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/Tile/Tile.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/Tile/examples/Tile.Document.Example.tsx b/packages/experiments/src/components/Tile/examples/Tile.Document.Example.tsx
index 8cb61b5eddfc5..927851045e7e5 100644
--- a/packages/experiments/src/components/Tile/examples/Tile.Document.Example.tsx
+++ b/packages/experiments/src/components/Tile/examples/Tile.Document.Example.tsx
@@ -1,6 +1,6 @@
 
 import * as React from 'react';
-import { Tile, getTileLayout, renderTileWithLayout } from '../Tile';
+import { Tile, getTileLayout, renderTileWithLayout } from '@uifabric/experiments/lib/Tile';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import {
   SignalField,
@@ -9,8 +9,8 @@ import {
   TrendingSignal,
   SharedSignal
 } from '../../signals/Signals';
-import { lorem } from '@uifabric/example-app-base';
-import { css, ISize, fitContentToBounds } from '../../../Utilities';
+import { lorem } from '@uifabric/example-app-base/lib/utilities/data';
+import { css, ISize, fitContentToBounds } from '@uifabric/experiments/lib/Utilities';
 import * as TileExampleStylesModule from './Tile.Example.scss';
 
 // tslint:disable-next-line:no-any
diff --git a/packages/experiments/src/components/Tile/examples/Tile.Folder.Example.tsx b/packages/experiments/src/components/Tile/examples/Tile.Folder.Example.tsx
index 2901cb977a474..16037035dc287 100644
--- a/packages/experiments/src/components/Tile/examples/Tile.Folder.Example.tsx
+++ b/packages/experiments/src/components/Tile/examples/Tile.Folder.Example.tsx
@@ -8,10 +8,14 @@ import {
   CommentsSignal,
   SharedSignal
 } from '../../signals/Signals';
-import { FolderCover, getFolderCoverLayout, renderFolderCoverWithLayout } from '../../FolderCover/FolderCover';
-import { FolderCoverType } from '../../FolderCover/FolderCover.types';
-import { lorem } from '@uifabric/example-app-base';
-import { css, ISize, fitContentToBounds } from '../../../Utilities';
+import {
+  FolderCover,
+  getFolderCoverLayout,
+  renderFolderCoverWithLayout,
+  FolderCoverType
+} from '@uifabric/experiments/lib/FolderCover';
+import { lorem } from '@uifabric/example-app-base/lib/utilities/data';
+import { css, ISize, fitContentToBounds } from '@uifabric/experiments/lib/Utilities';
 import * as TileExampleStylesModule from './Tile.Example.scss';
 
 // tslint:disable-next-line:no-any
diff --git a/packages/experiments/src/components/Tile/examples/Tile.Media.Example.tsx b/packages/experiments/src/components/Tile/examples/Tile.Media.Example.tsx
index 7c7b079189777..a57b288690b89 100644
--- a/packages/experiments/src/components/Tile/examples/Tile.Media.Example.tsx
+++ b/packages/experiments/src/components/Tile/examples/Tile.Media.Example.tsx
@@ -1,9 +1,9 @@
 
 import * as React from 'react';
-import { Tile, getTileLayout, renderTileWithLayout } from '../Tile';
+import { Tile, getTileLayout, renderTileWithLayout } from '@uifabric/experiments/lib/Tile';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
-import { css, ISize, fitContentToBounds } from '../../../Utilities';
+import { css, ISize, fitContentToBounds } from '@uifabric/experiments/lib/Utilities';
 import {
   SignalField,
   Signal,
@@ -11,7 +11,7 @@ import {
   SharedSignal,
   MentionSignal
 } from '../../signals/Signals';
-import { lorem } from '@uifabric/example-app-base';
+import { lorem } from '@uifabric/example-app-base/lib/utilities/data';
 import * as TileExampleStylesModule from './Tile.Example.scss';
 
 const ITEMS: { name: string; activity: string; }[] = [
diff --git a/packages/experiments/src/components/TilesList/TilesListPage.tsx b/packages/experiments/src/components/TilesList/TilesListPage.tsx
index 919bde9b67efe..a46d4c6d9bf9a 100644
--- a/packages/experiments/src/components/TilesList/TilesListPage.tsx
+++ b/packages/experiments/src/components/TilesList/TilesListPage.tsx
@@ -11,18 +11,18 @@ import {
 /* tslint:disable:max-line-length */
 import { TilesListBasicExample } from './examples/TilesList.Basic.Example';
 const TilesListBasicExampleCode = require(
-  '!raw-loader!experiments/src/components/TilesList/examples/TilesList.Basic.Example.tsx'
+  '!raw-loader!@uifabric/experiments/src/components/TilesList/examples/TilesList.Basic.Example.tsx'
 ) as string;
 
 import { TilesListDocumentExample } from './examples/TilesList.Document.Example';
 const TilesListDocumentExampleCode = require(
-  '!raw-loader!experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx'
+  '!raw-loader!@uifabric/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx'
 ) as string;
 
 import { TilesListMediaExample } from './examples/TilesList.Media.Example';
 
 const TilesListMediaExampleCode = require(
-  '!raw-loader!experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx'
+  '!raw-loader!@uifabric/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx'
 ) as string;
 
 export interface ITilesListPageState {
@@ -70,7 +70,7 @@ export class TilesListPage extends React.Component<IComponentDemoPageProps, ITil
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/TilesList/TilesList.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/TilesList/TilesList.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/TilesList/examples/TilesList.Basic.Example.tsx b/packages/experiments/src/components/TilesList/examples/TilesList.Basic.Example.tsx
index cf8293f455a8b..decdb8c17a0c1 100644
--- a/packages/experiments/src/components/TilesList/examples/TilesList.Basic.Example.tsx
+++ b/packages/experiments/src/components/TilesList/examples/TilesList.Basic.Example.tsx
@@ -6,7 +6,7 @@ import {
   ITilesGridItem,
   TilesGridMode,
   ITileSize
-} from '../../TilesList';
+} from '@uifabric/experiments/lib/TilesList';
 
 export interface IBasicItem {
   color: string;
diff --git a/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx b/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx
index bb457ddae2d39..c245b495d7267 100644
--- a/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx
+++ b/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx
@@ -4,10 +4,10 @@ import {
   TilesList,
   ITilesGridItem,
   ITilesGridSegment
-} from '../../TilesList';
+} from '@uifabric/experiments/lib/TilesList';
 import {
   Tile
-} from '../../../Tile';
+} from '@uifabric/experiments/lib/Tile';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { Selection, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
@@ -20,12 +20,12 @@ import {
   getTileCells,
   createShimmerGroups
 } from './ExampleHelpers';
-import { ISize } from 'experiments/lib/Utilities';
-import { ShimmerTile } from '../../Shimmer/ShimmerTile/ShimmerTile';
-import { getRenderedElements } from '../../Shimmer/Shimmer.base';
+import { ISize } from '@uifabric/experiments/lib/Utilities';
 import {
+  ShimmerTile,
   ShimmerElementType as ElemType,
-} from 'experiments/lib/Shimmer';
+  getRenderedElements
+} from '@uifabric/experiments/lib/Shimmer';
 
 const HEADER_VERTICAL_PADDING = 13;
 const HEADER_FONT_SIZE = 18;
@@ -267,7 +267,7 @@ export class TilesListDocumentExample extends React.Component<ITilesListDocument
         {
           getRenderedElements(
             [
-              { type: ElemType.LINE, height: HEADER_FONT_SIZE, widthInPercentage: 100 },
+              { type: ElemType.line, height: HEADER_FONT_SIZE, widthInPercentage: 100 },
             ],
             HEADER_VERTICAL_PADDING * 2 + HEADER_FONT_SIZE
           )
diff --git a/packages/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx b/packages/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx
index 149ae4ddcebab..af8f073627804 100644
--- a/packages/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx
+++ b/packages/experiments/src/components/TilesList/examples/TilesList.Media.Example.tsx
@@ -5,7 +5,7 @@ import {
   ITileSize,
   ITilesGridItem,
   ITilesGridSegment
-} from '../../TilesList';
+} from '@uifabric/experiments/lib/TilesList';
 import { Tile, getTileLayout, renderTileWithLayout } from '../../../Tile';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { Selection, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
diff --git a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
index 15817e321616c..0251e03d5915d 100644
--- a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
+++ b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
@@ -212,7 +212,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.value) {
+    while (target !== this._root.current) {
       let indexString = target.getAttribute('data-selection-index');
 
       if (indexString) {
diff --git a/packages/experiments/src/components/VirtualizedList/VirtualizedListPage.tsx b/packages/experiments/src/components/VirtualizedList/VirtualizedListPage.tsx
index 15668d30bae77..7b951bac86b14 100644
--- a/packages/experiments/src/components/VirtualizedList/VirtualizedListPage.tsx
+++ b/packages/experiments/src/components/VirtualizedList/VirtualizedListPage.tsx
@@ -9,9 +9,9 @@ import { VirtualizedListBasicExample } from './examples/VirtualizedList.Basic.Ex
 import { VirtualizedListBasicExample2 } from './examples/VirtualizedList.Basic.Example2';
 
 const VirtualizedListBasicExampleCode =
-  require('!raw-loader!experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx') as string;
+  require('!raw-loader!@uifabric/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx') as string;
 const VirtualizedListBasicExample2Code =
-  require('!raw-loader!experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx') as string;
+  require('!raw-loader!@uifabric/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx') as string;
 
 export class VirtualizedListPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -33,7 +33,7 @@ export class VirtualizedListPage extends React.Component<IComponentDemoPageProps
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/VirtualizedList/VirtualizedList.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/VirtualizedList/VirtualizedList.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx b/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx
index cfc525d1f66c6..00ab1217dc794 100644
--- a/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx
+++ b/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { VirtualizedList } from '../VirtualizedList';
+import { VirtualizedList } from '@uifabric/experiments/lib/VirtualizedList';
 import { ScrollContainer } from '../../../utilities/scrolling/ScrollContainer';
 
 import * as VirtualizedListExampleStylesModule from './VirtualizedList.Example.scss';
diff --git a/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx b/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx
index 5e0bf6313e00f..58af36247d5c0 100644
--- a/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx
+++ b/packages/experiments/src/components/VirtualizedList/examples/VirtualizedList.Basic.Example2.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { VirtualizedList } from '../VirtualizedList';
+import { VirtualizedList } from '@uifabric/experiments/lib/VirtualizedList';
 import { ScrollContainer } from '../../../utilities/scrolling/ScrollContainer';
 
 import * as VirtualizedListExampleStylesModule from './VirtualizedList.Example.scss';
diff --git a/packages/experiments/src/components/signals/SignalsPage.tsx b/packages/experiments/src/components/signals/SignalsPage.tsx
index 16421d0744363..0bd04b27ee7fb 100644
--- a/packages/experiments/src/components/signals/SignalsPage.tsx
+++ b/packages/experiments/src/components/signals/SignalsPage.tsx
@@ -9,12 +9,12 @@ import {
 /* tslint:disable:max-line-length */
 import { SignalFieldBasicExample } from './examples/SignalField.Basic.Example';
 const SignalFieldBasicExampleCode = require(
-  '!raw-loader!experiments/src/components/signals/examples/SignalField.Basic.Example.tsx'
+  '!raw-loader!@uifabric/experiments/src/components/signals/examples/SignalField.Basic.Example.tsx'
 ) as string;
 
 import { SignalsBasicExample } from './examples/Signals.Basic.Example';
 const SignalsBasicExampleCode = require(
-  '!raw-loader!experiments/src/components/signals/examples/Signals.Basic.Example.tsx'
+  '!raw-loader!@uifabric/experiments/src/components/signals/examples/Signals.Basic.Example.tsx'
 ) as string;
 
 export class SignalsPage extends React.Component<IComponentDemoPageProps, {}> {
@@ -36,7 +36,7 @@ export class SignalsPage extends React.Component<IComponentDemoPageProps, {}> {
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/signals/Signals.Props.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/signals/Signals.Props.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/demo/AppDefinition.tsx b/packages/experiments/src/demo/AppDefinition.tsx
index 4452a2655f980..63b18fd7415f2 100644
--- a/packages/experiments/src/demo/AppDefinition.tsx
+++ b/packages/experiments/src/demo/AppDefinition.tsx
@@ -105,6 +105,12 @@ export const AppDefinition: IAppDefinition = {
           key: 'StaticList',
           name: 'StaticList',
           url: '#/examples/staticlist'
+        },
+        {
+          component: require<any>('../components/Nav/NavPage').NavPage,
+          key: 'Nav',
+          name: 'Nav',
+          url: '#/examples/nav'
         }
       ]
     }
diff --git a/packages/experiments/tsconfig.json b/packages/experiments/tsconfig.json
index f48edfbaad5c2..004cefc996195 100644
--- a/packages/experiments/tsconfig.json
+++ b/packages/experiments/tsconfig.json
@@ -24,7 +24,7 @@
       "webpack-env"
     ],
     "paths": {
-      "experiments/lib/*": [
+      "@uifabric/experiments/lib/*": [
         "./src/*"
       ]
     }
diff --git a/packages/experiments/webpack.config.js b/packages/experiments/webpack.config.js
index 03853809cfc19..2cf1066c09017 100644
--- a/packages/experiments/webpack.config.js
+++ b/packages/experiments/webpack.config.js
@@ -20,6 +20,13 @@ module.exports = resources.createConfig(
     externals: [
       { 'react': 'React' },
       { 'react-dom': 'ReactDOM' }
-    ]
+    ],
+
+    resolve: {
+      alias: {
+        '@uifabric/experiments/src': path.join(__dirname, 'src'),
+        '@uifabric/experiments/lib': path.join(__dirname, 'lib')
+      }
+    }
   }
 );
diff --git a/packages/experiments/webpack.serve.config.js b/packages/experiments/webpack.serve.config.js
index 5e1a6492ce696..cbf1be6f00f6e 100644
--- a/packages/experiments/webpack.serve.config.js
+++ b/packages/experiments/webpack.serve.config.js
@@ -18,8 +18,8 @@ module.exports = resources.createServeConfig({
 
   resolve: {
     alias: {
-      'experiments/src': path.join(__dirname, 'src'),
-      'experiments/lib': path.join(__dirname, 'src'),
+      '@uifabric/experiments/src': path.join(__dirname, 'src'),
+      '@uifabric/experiments/lib': path.join(__dirname, 'src'),
       'Props.ts.js': 'Props',
       'Example.tsx.js': 'Example'
     }
diff --git a/packages/file-type-icons/CHANGELOG.json b/packages/file-type-icons/CHANGELOG.json
index e1b8ecf420608..57283ad4c2423 100644
--- a/packages/file-type-icons/CHANGELOG.json
+++ b/packages/file-type-icons/CHANGELOG.json
@@ -1,6 +1,30 @@
 {
   "name": "@uifabric/file-type-icons",
   "entries": [
+    {
+      "version": "0.6.1",
+      "tag": "@uifabric/file-type-icons_v0.6.1",
+      "date": "Mon, 16 Apr 2018 10:23:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4",
+            "comment": "Removing module entry temporarily. (Will be added back in 6.0.)"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e",
+            "comment": "Updating build to React 16.3.1."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.0 <6.0.0` to `>=5.23.1 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "0.6.0",
       "tag": "@uifabric/file-type-icons_v0.6.0",
diff --git a/packages/file-type-icons/CHANGELOG.md b/packages/file-type-icons/CHANGELOG.md
index 1b3c25d8e0b5d..20fd399cc6fa9 100644
--- a/packages/file-type-icons/CHANGELOG.md
+++ b/packages/file-type-icons/CHANGELOG.md
@@ -1,6 +1,14 @@
 # Change Log - @uifabric/file-type-icons
 
-This log was last generated on Sun, 25 Mar 2018 03:08:03 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified.
+
+## 0.6.1
+Mon, 16 Apr 2018 10:23:26 GMT
+
+### Patches
+
+- Removing module entry temporarily. (Will be added back in 6.0.)
+- Updating build to React 16.3.1.
 
 ## 0.6.0
 Sun, 25 Mar 2018 03:08:03 GMT
diff --git a/packages/file-type-icons/package.json b/packages/file-type-icons/package.json
index fd0a966d935cc..825cf8ce80060 100644
--- a/packages/file-type-icons/package.json
+++ b/packages/file-type-icons/package.json
@@ -1,9 +1,8 @@
 {
   "name": "@uifabric/file-type-icons",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Office UI Fabric file type icon set.",
   "main": "lib/index.js",
-  "module": "lib-es2015/index.js",
   "typings": "lib-es2015/index.d.ts",
   "sideEffects": false,
   "repository": {
@@ -21,14 +20,14 @@
     "jest"
   ],
   "devDependencies": {
-    "@types/react": "16.0.25",
-    "@types/react-dom": "16.0.3",
+    "@types/react": "16.3.10",
+    "@types/react-dom": "16.0.5",
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1"
   },
   "dependencies": {
-    "@uifabric/styling": ">=5.23.0 <6.0.0",
+    "@uifabric/styling": ">=5.25.0 <6.0.0",
     "tslib": "^1.7.1"
   },
   "peerDependencies": {
diff --git a/packages/icons/CHANGELOG.json b/packages/icons/CHANGELOG.json
index 59545bead5519..6c202a8fc75c0 100644
--- a/packages/icons/CHANGELOG.json
+++ b/packages/icons/CHANGELOG.json
@@ -1,6 +1,25 @@
 {
   "name": "@uifabric/icons",
   "entries": [
+    {
+      "version": "5.7.1",
+      "tag": "@uifabric/icons_v5.7.1",
+      "date": "Mon, 16 Apr 2018 10:23:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4",
+            "comment": "Removing module entry temporarily. (Will be added back in 6.0.)"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.0 <6.0.0` to `>=5.23.1 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.7.0",
       "tag": "@uifabric/icons_v5.7.0",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 641bd0a6687ec..2dbe4fc4159b8 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,6 +1,13 @@
 # Change Log - @uifabric/icons
 
-This log was last generated on Sun, 25 Mar 2018 03:08:03 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified.
+
+## 5.7.1
+Mon, 16 Apr 2018 10:23:26 GMT
+
+### Patches
+
+- Removing module entry temporarily. (Will be added back in 6.0.)
 
 ## 5.7.0
 Sun, 25 Mar 2018 03:08:03 GMT
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 93b3d1e1f4992..b353ceb509512 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,9 +1,8 @@
 {
   "name": "@uifabric/icons",
-  "version": "5.7.0",
+  "version": "5.7.1",
   "description": "Office UI Fabric icon set.",
   "main": "lib/index.js",
-  "module": "lib-es2015/index.js",
   "typings": "lib-es2015/index.d.ts",
   "sideEffects": false,
   "repository": {
@@ -24,7 +23,7 @@
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0"
   },
   "dependencies": {
-    "@uifabric/styling": ">=5.23.0 <6.0.0",
+    "@uifabric/styling": ">=5.25.0 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/packages/jest-serializer-merge-styles/package.json b/packages/jest-serializer-merge-styles/package.json
index 3b974a9b93175..9455a70cda0aa 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.15.0 <6.0.0"
+    "@uifabric/merge-styles": ">=5.15.2 <6.0.0"
   }
 }
\ No newline at end of file
diff --git a/packages/merge-styles/CHANGELOG.json b/packages/merge-styles/CHANGELOG.json
index f2ec5f548aaa5..a92ccc99a06c9 100644
--- a/packages/merge-styles/CHANGELOG.json
+++ b/packages/merge-styles/CHANGELOG.json
@@ -1,6 +1,34 @@
 {
   "name": "@uifabric/merge-styles",
   "entries": [
+    {
+      "version": "5.15.2",
+      "tag": "@uifabric/merge-styles_v5.15.2",
+      "date": "Tue, 17 Apr 2018 18:47:11 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "68acb9b5f356c7b76ef334984ce4a9258a926061",
+            "comment": "mergeStyles: rules are now registered in separate styling objects, improving performance significantly."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.15.1",
+      "tag": "@uifabric/merge-styles_v5.15.1",
+      "date": "Mon, 16 Apr 2018 10:23:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4",
+            "comment": "Removing module entry temporarily. (Will be added back in 6.0.)"
+          }
+        ]
+      }
+    },
     {
       "version": "5.15.0",
       "tag": "@uifabric/merge-styles_v5.15.0",
diff --git a/packages/merge-styles/CHANGELOG.md b/packages/merge-styles/CHANGELOG.md
index 4a4c5761757cf..942654e152fca 100644
--- a/packages/merge-styles/CHANGELOG.md
+++ b/packages/merge-styles/CHANGELOG.md
@@ -1,6 +1,20 @@
 # Change Log - @uifabric/merge-styles
 
-This log was last generated on Tue, 10 Apr 2018 17:37:28 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Apr 2018 18:47:11 GMT and should not be manually modified.
+
+## 5.15.2
+Tue, 17 Apr 2018 18:47:11 GMT
+
+### Patches
+
+- mergeStyles: rules are now registered in separate styling objects, improving performance significantly.
+
+## 5.15.1
+Mon, 16 Apr 2018 10:23:26 GMT
+
+### Patches
+
+- Removing module entry temporarily. (Will be added back in 6.0.)
 
 ## 5.15.0
 Tue, 10 Apr 2018 17:37:28 GMT
diff --git a/packages/merge-styles/package.json b/packages/merge-styles/package.json
index 3d58effa0300a..d7e946e7d33b9 100644
--- a/packages/merge-styles/package.json
+++ b/packages/merge-styles/package.json
@@ -1,9 +1,8 @@
 {
   "name": "@uifabric/merge-styles",
-  "version": "5.15.0",
+  "version": "5.15.2",
   "description": "Office UI Fabric style loading utilities.",
   "main": "lib/index.js",
-  "module": "lib-es2015/index.js",
   "typings": "lib-es2015/index.d.ts",
   "sideEffects": false,
   "repository": {
diff --git a/packages/merge-styles/src/Stylesheet.ts b/packages/merge-styles/src/Stylesheet.ts
index 12de4f0d2f5b2..c3b1a87a52ee6 100644
--- a/packages/merge-styles/src/Stylesheet.ts
+++ b/packages/merge-styles/src/Stylesheet.ts
@@ -215,6 +215,11 @@ export class Stylesheet {
   private _getElement(): HTMLStyleElement | undefined {
     if (!this._styleElement && typeof document !== 'undefined') {
       this._styleElement = _createStyleElement();
+
+      // Reset the style element on the next frame.
+      window.requestAnimationFrame(() => {
+        this._styleElement = undefined;
+      });
     }
     return this._styleElement;
   }
diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json
index 9029894649136..ad33ca4149644 100644
--- a/packages/office-ui-fabric-react/CHANGELOG.json
+++ b/packages/office-ui-fabric-react/CHANGELOG.json
@@ -1,6 +1,376 @@
 {
   "name": "office-ui-fabric-react",
   "entries": [
+    {
+      "version": "5.85.0",
+      "tag": "office-ui-fabric-react_v5.85.0",
+      "date": "Fri, 20 Apr 2018 10:12:34 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "b6c5fde0d4ede388e05014b2f1f480610b8aef17",
+            "comment": "DetailsRow: applying `flex-shrink:0` to the check cell to prevent it from squishing in the flex layout."
+          },
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "ef0cfe45e059432b609973bdc710b3e0aaf2534b",
+            "comment": "Revert unintended changes to Dropdown styles from #4512"
+          }
+        ],
+        "minor": [
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "bd2e7b195acadb05c7a98381017df4b1bee4df09",
+            "comment": "TextField: Implemented input masking."
+          },
+          {
+            "author": "Chris Mohr <chrismohr@users.noreply.github.com>",
+            "commit": "5cab1cf94fb150c78e059c4158410df8d57d4e9f",
+            "comment": "add onRenderDescription to TextField"
+          },
+          {
+            "author": "Brian Garland <v-brgarl@microsoft.com>",
+            "commit": "ffd046eb362ce46c9f9ef4dc7c22ee5db00167c2",
+            "comment": "Added support for native props on Panel for the root div with class ms-Panel"
+          },
+          {
+            "author": "Brian Garland <v-brgarl@microsoft.com>",
+            "commit": "f2dc9cbc3b00abe1af545917f9908ce7e08a5b9b",
+            "comment": "Added headerButtonProps prop to PivotItem to allow passing native props (data-* & aria-*) to the header/link/CommandButton element. Also depricated linkText and added headerText for semantic purposes."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.84.0",
+      "tag": "office-ui-fabric-react_v5.84.0",
+      "date": "Thu, 19 Apr 2018 18:25:59 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Samuel Timbó <samuelmtimbo@gmail.com>",
+            "commit": "775e1f5a6a2478d6223e405e2b18082c183adf36",
+            "comment": "Add the option of collapsing breadcrumb overflow items into a position other than the first one"
+          },
+          {
+            "author": "Josh Chang <coralbue@gmail.com>",
+            "commit": "02b098f9465226896abe323304d9ae379a947d91",
+            "comment": "ComboBox: Add Event as additional paramater to onChanged callback for saving pending changes"
+          }
+        ],
+        "none": [
+          {
+            "author": "Cliff Koh <kohzihan@outlook.com>",
+            "commit": "6c70a9e55408212d258d41269af4daf50abffca4",
+            "comment": "Fix minor typos"
+          }
+        ],
+        "patch": [
+          {
+            "author": "Christian Gonzalez <christianjordangonzalez@gmail.com>",
+            "commit": "c86fc5bd6fe2385309833fd746a7a46dd3b0f8bb",
+            "comment": "Remove usage of Number.isNaN from SpinButton.tsx since it doesn't exist in IE11"
+          },
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "e77a31bee560440bae3737eca6b19fce2c1ae3db",
+            "comment": "Update createRef to match React.createRef api"
+          },
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "5954ea49f9c4e059868a57a6b597068ef905108a",
+            "comment": "Remove unused variables and re-enable no-unused-variable for office-ui-fabric-react"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.24.0 <6.0.0` to `>=5.25.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.10.1 <6.0.0` to `>=5.10.2 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.83.0",
+      "tag": "office-ui-fabric-react_v5.83.0",
+      "date": "Thu, 19 Apr 2018 00:17:37 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "7d066299cd2f3a13014ff2a43a2b2f76a0efb0d7",
+            "comment": "ActivityItem: Added the pulsing beacon animation for the compact size."
+          },
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "5f6ae67eeec2283e6bc0dd890ac614ec2f73d687",
+            "comment": "SearchBox: Clicks on element before input field set cursor to start of input text."
+          }
+        ],
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "7c592e981fd8c16272bfa0f8451172467ae1c8ef",
+            "comment": "ChoiceGroup: Style polish for focus, high contrast focus, and high contrast hover."
+          },
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "dfc9c2cd1e9e50c27e8f62768fb72e4272f5d2b7",
+            "comment": "Fix PersonaCoin index import"
+          },
+          {
+            "author": "rebeccaballantyne <rebeccaballantyne@gmail.com>",
+            "commit": "9686b87ca379e171f773e6765bde8c0f012d1c5e",
+            "comment": "Updates aria-owns on BasePicker (and snapshot tests) so its only set when suggestions are rendered"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.24.0 <6.0.0` to `>=5.25.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.82.4",
+      "tag": "office-ui-fabric-react_v5.82.4",
+      "date": "Wed, 18 Apr 2018 17:02:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "9cc47f548636e7b952aed80cb75e2adce39a2a32",
+            "comment": "ContextualMenu: Update mousemove to only do anything if there is not another pending mouse enter/move/leave to improve the snappiness of the updates"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.82.3",
+      "tag": "office-ui-fabric-react_v5.82.3",
+      "date": "Wed, 18 Apr 2018 10:15:04 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "4efff92981d7301ac16bc8a2cbd7624585f9c42b",
+            "comment": "Convert documentation to markdown for HIG."
+          },
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "4efff92981d7301ac16bc8a2cbd7624585f9c42b",
+            "comment": "Revamp Themes documentation"
+          },
+          {
+            "author": "Kevin Coughlin <kevintcoughlin@gmail.com>",
+            "commit": "9e838b8674558c1eae4ebfea9278668ad8ad992a",
+            "comment": "Passes item when href set onClick for CommandBar control"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.1 <6.0.0` to `>=5.24.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.10.0 <6.0.0` to `>=5.10.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.82.2",
+      "tag": "office-ui-fabric-react_v5.82.2",
+      "date": "Tue, 17 Apr 2018 18:47:11 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "4dc9071ade20efb98eded9b97aa9124a9232f84a",
+            "comment": "Fix improper imports from index files"
+          },
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "7ed1f9d2f87a4630cc8e3005a5b9d92e6cd1d5a4",
+            "comment": "Mark Panel content as scrollable"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.1 <6.0.0` to `>=5.15.2 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.82.1",
+      "tag": "office-ui-fabric-react_v5.82.1",
+      "date": "Mon, 16 Apr 2018 21:49:29 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "5ab46126a513abf87f63a9447b5cbf960b18265e",
+            "comment": "Do not call the onMenuClick on every keyDown event"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.82.0",
+      "tag": "office-ui-fabric-react_v5.82.0",
+      "date": "Mon, 16 Apr 2018 10:23:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Hugo Dolemieux <hugodolemieux@verizon.net>",
+            "commit": "706932515cd11f2f65da2a22210b6990de1681be",
+            "comment": "Add focus method to Breadcrumb"
+          },
+          {
+            "author": "David De La Brena <36862912+ddlbrena@users.noreply.github.com>",
+            "commit": "944bee5f8e150ef80793f44dc485e33ba1259645",
+            "comment": "Fix scroll bar shows when it should not."
+          },
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "be86d92568d91ccc75731322d148213475214971",
+            "comment": "Fix style and alignment issues with DetailsList headers"
+          },
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "ebbb57390d6fbaba5106ea5d0ca18aa022348f4b",
+            "comment": "Add new component page prop for editing on GitHub."
+          },
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "3ab70bd14836c4298784d8733e474073ef37a870",
+            "comment": "SpinButton: Make sure up/down Arrow do not leave the spinButton"
+          },
+          {
+            "author": "kysedate <35615581+kysedate@users.noreply.github.com>",
+            "commit": "8ef07e5a6fe206a89cbd3291bcecc3c721510e06",
+            "comment": "Handling the scenario where embedded text is passed in as the option's text. In This case, the ariaLabel prop will be displayed in the input and used for autocomplete matching. The value rendered in the menu will not change."
+          },
+          {
+            "author": "kysedate <35615581+kysedate@users.noreply.github.com>",
+            "commit": "589eb521fa6ec57b6c9b61744b2e81d6f17e7be2",
+            "comment": "Wrapping combobox options in an internal component which only performs an update if the props have changed. We are currently updating every option on every mouse or keyboard event. This gives awful performance in comboboxes with many elements. "
+          },
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "3628c32bef64366f39f051d95ca6d352dc4b7286",
+            "comment": "Adds tests for DocumentCardTitle title truncation"
+          },
+          {
+            "author": "Hugo Dolemieux <hugodolemieux@verizon.net>",
+            "commit": "e924e27c0442d63556bf53582f6b44eb7364e96f",
+            "comment": "Add focus method to Pivot."
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "1e2afca81ae952207f798d11c66cb935c847cdbb",
+            "comment": "FocusZone: redoing the \"reset alignment on mouse down\" change in a less intrusive manner, with test coverage."
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4",
+            "comment": "Removing module entry until we change `lib` to output es6 modules in 6.0. If you would like tree shaking to work, please use webpack aliasing to alias `{packageName}/lib` to `{packageName}/lib-es2015`. In 6.0, we will change `lib` to be es6, so that current partners will just get tree shaking out of the box without aliasing."
+          },
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "acc2c4b47318d1ac54be9e22c906c78af0eb3fa5",
+            "comment": "Prevent SelectionZone from interfering with links and buttons"
+          },
+          {
+            "author": "Brian Garland <v-brgarl@microsoft.com>",
+            "commit": "547c418585c4b78e6047a61eb78955aaba1cdf91",
+            "comment": "Added missing role to TagPicker's TagItem."
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "c3d5683deb1309f464e04218a952439e8eb207d8",
+            "comment": "FocusZone: undoing the \"click\" change, which was causing non-focusable targets to be tracked as the \"active\" element. This created side-effects such as elements becoming focusable upon clicking them more than once, leaving behind unexpected focus outlines."
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e",
+            "comment": "Updating build to React 16.3.1."
+          },
+          {
+            "author": "Preet Sai Mutneja <preetsaimutneja@gmail.com>",
+            "commit": "0803ee2b1dd00b67b7ec61f902f0ebb609c92faf",
+            "comment": "DetailsList: Starting aria-rowIndex from 1 instead of 0 as mentioned in https://www.w3.org/TR/wai-aria-1.1/#aria-rowindex"
+          },
+          {
+            "author": "wutonghao <38301383+wutonghao@users.noreply.github.com>",
+            "commit": "6d4cfa6bd31dbc0b39b78511a5a1505982b0a21f",
+            "comment": "ColorPicker: text fields now update when `alphaSliderHidden` is `true`."
+          }
+        ],
+        "minor": [
+          {
+            "author": "Josh Chang <coralbue@gmail.com>",
+            "commit": "51e5f2304e859b56007e931a856e046f49b59a6c",
+            "comment": "Contextual Split Button: Change styling to only have one split button container instead of two"
+          },
+          {
+            "author": "Brian Garland <v-brgarl@microsoft.com>",
+            "commit": "0e2e8bd053fc2d77341ea03c4d76a25ab9d7c768",
+            "comment": "Changed Dropdown components role from combobox to dropdown"
+          },
+          {
+            "author": "Joe Zhang <zerojozhan@gmail.com>",
+            "commit": "836bffff34d84ae46aab18edde50ca9d4a9e17c6",
+            "comment": "Bring back isResultsFooterVisible that is props but never used."
+          },
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "4ea06e597851f76cdf3482dcb4046fc664b2e492",
+            "comment": "ContextualMenu/Button: Improve perf and add hiddenvariable to buttons"
+          },
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "40b585d6ba42d45a2302c9161612461d8ab2fca9",
+            "comment": "Add ability to use Customer to provide a default layer host"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "0c830b2d32319e5455c2c652765b9d4d6cda8268",
+            "comment": "Fabric component: all logic that was in the component has moved to a helper which is initialized within BaseComponent. This ensures that focus rectangles show up even if you don't use the Fabric wrapper."
+          },
+          {
+            "author": "Brian Garland <v-brgarl@microsoft.com>",
+            "commit": "0e488caa96a9ca0d8b48567aa2b87cc04c415e76",
+            "comment": "Set Panel's FocusTrapZone prop isClickableOutsideFocusTrap to true by default to allow click interactions while panel is open"
+          },
+          {
+            "author": "Christian Gonzalez <christianjordangonzalez@gmail.com>",
+            "commit": "a79de6bee8a344b392da6308988ce075c0206382",
+            "comment": "Upgrade to TypeScript 2.8.1"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/icons\" from `>=5.7.0 <6.0.0` to `>=5.7.1 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.0 <6.0.0` to `>=5.15.1 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.0 <6.0.0` to `>=5.23.1 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.23.0 <6.0.0` to `>=5.24.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.9.0 <6.0.0` to `>=5.10.0 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.81.1",
       "tag": "office-ui-fabric-react_v5.81.1",
diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md
index 4e2ec9e59ac13..704ea62fd07c0 100644
--- a/packages/office-ui-fabric-react/CHANGELOG.md
+++ b/packages/office-ui-fabric-react/CHANGELOG.md
@@ -1,6 +1,114 @@
 # Change Log - office-ui-fabric-react
 
-This log was last generated on Thu, 12 Apr 2018 15:59:01 GMT and should not be manually modified.
+This log was last generated on Fri, 20 Apr 2018 10:12:34 GMT and should not be manually modified.
+
+## 5.85.0
+Fri, 20 Apr 2018 10:12:34 GMT
+
+### Minor changes
+
+- TextField: Implemented input masking.
+- add onRenderDescription to TextField
+- Added support for native props on Panel for the root div with class ms-Panel
+- Added headerButtonProps prop to PivotItem to allow passing native props (data-* & aria-*) to the header/link/CommandButton element. Also depricated linkText and added headerText for semantic purposes.
+
+### Patches
+
+- DetailsRow: applying `flex-shrink:0` to the check cell to prevent it from squishing in the flex layout.
+- Revert unintended changes to Dropdown styles from #4512
+
+## 5.84.0
+Thu, 19 Apr 2018 18:25:59 GMT
+
+### Minor changes
+
+- Add the option of collapsing breadcrumb overflow items into a position other than the first one
+- ComboBox: Add Event as additional paramater to onChanged callback for saving pending changes
+
+### Patches
+
+- Remove usage of Number.isNaN from SpinButton.tsx since it doesn't exist in IE11
+- Update createRef to match React.createRef api
+- Remove unused variables and re-enable no-unused-variable for office-ui-fabric-react
+
+## 5.83.0
+Thu, 19 Apr 2018 00:17:37 GMT
+
+### Minor changes
+
+- ActivityItem: Added the pulsing beacon animation for the compact size.
+- SearchBox: Clicks on element before input field set cursor to start of input text.
+
+### Patches
+
+- ChoiceGroup: Style polish for focus, high contrast focus, and high contrast hover.
+- Fix PersonaCoin index import
+- Updates aria-owns on BasePicker (and snapshot tests) so its only set when suggestions are rendered
+
+## 5.82.4
+Wed, 18 Apr 2018 17:02:26 GMT
+
+### Patches
+
+- ContextualMenu: Update mousemove to only do anything if there is not another pending mouse enter/move/leave to improve the snappiness of the updates
+
+## 5.82.3
+Wed, 18 Apr 2018 10:15:04 GMT
+
+### Patches
+
+- Convert documentation to markdown for HIG.
+- Revamp Themes documentation
+- Passes item when href set onClick for CommandBar control
+
+## 5.82.2
+Tue, 17 Apr 2018 18:47:11 GMT
+
+### Patches
+
+- Fix improper imports from index files
+- Mark Panel content as scrollable
+
+## 5.82.1
+Mon, 16 Apr 2018 21:49:29 GMT
+
+### Patches
+
+- Do not call the onMenuClick on every keyDown event
+
+## 5.82.0
+Mon, 16 Apr 2018 10:23:26 GMT
+
+### Minor changes
+
+- Contextual Split Button: Change styling to only have one split button container instead of two
+- Changed Dropdown components role from combobox to dropdown
+- Bring back isResultsFooterVisible that is props but never used.
+- ContextualMenu/Button: Improve perf and add hiddenvariable to buttons
+- Add ability to use Customer to provide a default layer host
+- Fabric component: all logic that was in the component has moved to a helper which is initialized within BaseComponent. This ensures that focus rectangles show up even if you don't use the Fabric wrapper.
+- Set Panel's FocusTrapZone prop isClickableOutsideFocusTrap to true by default to allow click interactions while panel is open
+- Upgrade to TypeScript 2.8.1
+
+### Patches
+
+- Add focus method to Breadcrumb
+- Fix scroll bar shows when it should not.
+- Fix style and alignment issues with DetailsList headers
+- Add new component page prop for editing on GitHub.
+- SpinButton: Make sure up/down Arrow do not leave the spinButton
+- Handling the scenario where embedded text is passed in as the option's text. In This case, the ariaLabel prop will be displayed in the input and used for autocomplete matching. The value rendered in the menu will not change.
+- Wrapping combobox options in an internal component which only performs an update if the props have changed. We are currently updating every option on every mouse or keyboard event. This gives awful performance in comboboxes with many elements. 
+- Adds tests for DocumentCardTitle title truncation
+- Add focus method to Pivot.
+- FocusZone: redoing the "reset alignment on mouse down" change in a less intrusive manner, with test coverage.
+- Removing module entry until we change `lib` to output es6 modules in 6.0. If you would like tree shaking to work, please use webpack aliasing to alias `{packageName}/lib` to `{packageName}/lib-es2015`. In 6.0, we will change `lib` to be es6, so that current partners will just get tree shaking out of the box without aliasing.
+- Prevent SelectionZone from interfering with links and buttons
+- Added missing role to TagPicker's TagItem.
+- FocusZone: undoing the "click" change, which was causing non-focusable targets to be tracked as the "active" element. This created side-effects such as elements becoming focusable upon clicking them more than once, leaving behind unexpected focus outlines.
+- Updating build to React 16.3.1.
+- DetailsList: Starting aria-rowIndex from 1 instead of 0 as mentioned in https://www.w3.org/TR/wai-aria-1.1/#aria-rowindex
+- ColorPicker: text fields now update when `alphaSliderHidden` is `true`.
 
 ## 5.81.1
 Thu, 12 Apr 2018 15:59:01 GMT
diff --git a/packages/office-ui-fabric-react/index.html b/packages/office-ui-fabric-react/index.html
index 813079539bef0..486a3ed979f7c 100644
--- a/packages/office-ui-fabric-react/index.html
+++ b/packages/office-ui-fabric-react/index.html
@@ -37,12 +37,12 @@
       }
     }
     loadScript(isProduction ? [
-      '//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js',
-      '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js',
+      '//cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js',
+      '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js',
       'demo-app.js'
     ] : [
-        '//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js',
-        '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js',
+        '//cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.development.js',
+        '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.development.js',
         'demo-app.js'
       ]);
   </script>
diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json
index 4193fb70d0dfd..eed983858c04c 100644
--- a/packages/office-ui-fabric-react/package.json
+++ b/packages/office-ui-fabric-react/package.json
@@ -1,9 +1,8 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "5.81.1",
+  "version": "5.85.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
-  "module": "lib-es2015/index.js",
   "typings": "lib-es2015/index.d.ts",
   "sideEffects": true,
   "repository": {
@@ -24,14 +23,14 @@
     "@types/es6-promise": "0.0.32",
     "@types/jest": "21.1.8",
     "@types/prop-types": "15.5.2",
-    "@types/react": "16.0.25",
-    "@types/react-dom": "16.0.3",
+    "@types/react": "16.3.10",
+    "@types/react-dom": "16.0.5",
     "@types/react-test-renderer": "^16.0.0",
     "@types/resemblejs": "~1.3.28",
     "@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.9.0 <6.0.0",
+    "@uifabric/example-app-base": ">=5.10.2 <6.0.0",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "es6-promise": "^4.1.0",
@@ -40,19 +39,19 @@
     "highlight.js": "^9.12.0",
     "office-ui-fabric-core": ">=9.0.0 <10.0.0",
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
     "react-highlight": "0.10.0",
-    "react-test-renderer": "^16.2.0",
+    "react-test-renderer": "^16.3.0",
     "resemblejs": "~2.2.3",
     "sinon": "^4.1.3"
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
-    "@uifabric/icons": ">=5.7.0 <6.0.0",
-    "@uifabric/merge-styles": ">=5.15.0 <6.0.0",
-    "@uifabric/styling": ">=5.23.0 <6.0.0",
-    "@uifabric/utilities": ">=5.23.0 <6.0.0",
+    "@uifabric/icons": ">=5.7.1 <6.0.0",
+    "@uifabric/merge-styles": ">=5.15.2 <6.0.0",
+    "@uifabric/styling": ">=5.25.0 <6.0.0",
+    "@uifabric/utilities": ">=5.25.0 <6.0.0",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"
   },
diff --git a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
index 30636a3504872..eddd4e3b345d7 100644
--- a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
+++ b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
@@ -50,6 +50,8 @@ $menuHeaderColor: "[theme:menuHeader, default: #0078d4]";
 /* Lists */
 $listBackgroundColor: "[theme:listBackground, default: #ffffff]";
 $listTextColor: "[theme:listText, default: #333333]";
+$listItemHeaderHoveredColor: "[theme:listItemHeaderHovered, default: #f4f4f4]";
+$listItemHeaderActivatedColor: "[theme:listItemActivatedHovered, default: #eaeaea]";
 $listItemBackgroundHoveredColor: "[theme:listItemBackgroundHovered, default: #f8f8f8]";
 $listItemBackgroundCheckedColor: "[theme:listItemBackgroundChecked, default: #eaeaea]";
-$listItemBackgroundCheckedHoveredColor: "[theme:listItemBackgroundCheckedHovered, default: #d0d0d0]";
\ No newline at end of file
+$listItemBackgroundCheckedHoveredColor: "[theme:listItemBackgroundCheckedHovered, default: #d0d0d0]";
diff --git a/packages/office-ui-fabric-react/src/common/testUtilities.ts b/packages/office-ui-fabric-react/src/common/testUtilities.ts
index c736e61c938cc..3dce4b398b3bc 100644
--- a/packages/office-ui-fabric-react/src/common/testUtilities.ts
+++ b/packages/office-ui-fabric-react/src/common/testUtilities.ts
@@ -3,7 +3,7 @@ import { ReactWrapper } from 'enzyme';
 export const findNodes = (wrapper: ReactWrapper<any, any>, className: string): ReactWrapper<any, any> => (
   wrapper
     .find(className)
-    .filterWhere((node => typeof node.type() === 'string'))
+    .filterWhere(((node: ReactWrapper<any, any>) => typeof node.type() === 'string'))
 );
 
 export const expectNodes = (wrapper: ReactWrapper<any, any>, className: string, n: number): void => (
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 4bc5f7842f2c6..71344018de9b6 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
@@ -16,6 +16,7 @@ export interface IActivityItemClassNames {
   activityTypeIcon?: string;
   commentText?: string;
   timeStamp?: string;
+  pulsingBeacon?: string;
 }
 
 export const getClassNames = memoizeFunction((
@@ -32,6 +33,11 @@ export const getClassNames = memoizeFunction((
       isCompact && styles.isCompactRoot
     ),
 
+    pulsingBeacon: mergeStyles(
+      'ms-ActivityItem-pulsingBeacon',
+      styles.pulsingBeacon
+    ),
+
     personaContainer: mergeStyles(
       'ms-ActivityItem-personaContainer',
       styles.personaContainer,
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 4833241cd5c22..e6fe80298c0e9 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
@@ -2,22 +2,66 @@ import {
   concatStyleSets,
   ITheme,
   getTheme,
-  HighContrastSelector
+  HighContrastSelector,
+  keyframes,
+  PulsingBeaconAnimationStyles
 } from '../../Styling';
 import {
   memoizeFunction
 } from '../../Utilities';
-import { IActivityItemStyles } from './ActivityItem.types';
+import { IActivityItemStyles, IActivityItemProps } from './ActivityItem.types';
 
 const DEFAULT_PERSONA_SIZE = '32px';
 const COMPACT_PERSONA_SIZE = '16px';
 const DEFAULT_ICON_SIZE = '16px';
 const COMPACT_ICON_SIZE = '13px';
+const ANIMATION_INNER_DIMENSION = '4px';
+const ANIMATION_OUTER_DIMENSION = '28px';
+const ANIMATION_BORDER_WIDTH = '4px';
 
 export const getStyles = memoizeFunction((
+  props: IActivityItemProps,
   theme: ITheme = getTheme(),
   customStyles?: IActivityItemStyles
 ): IActivityItemStyles => {
+
+  const continuousPulse = PulsingBeaconAnimationStyles.continuousPulseAnimationSingle(
+    props.beaconColorOne ? props.beaconColorOne : theme.palette.themePrimary,
+    props.beaconColorTwo ? props.beaconColorTwo : theme.palette.themeTertiary,
+    ANIMATION_INNER_DIMENSION,
+    ANIMATION_OUTER_DIMENSION,
+    ANIMATION_BORDER_WIDTH
+  );
+
+  const fadeIn: string = keyframes({
+    from: { opacity: 0, },
+    to: { opacity: 1, }
+  });
+
+  const slideIn: string = keyframes({
+    from: { transform: 'translateX(-10px)' },
+    to: { transform: 'translateX(0)' }
+  });
+
+  const continuousPulseAnimation = {
+    animationName: continuousPulse,
+    animationIterationCount: '1',
+    animationDuration: '.8s',
+    zIndex: 1
+  };
+
+  const slideInAnimation = {
+    animationName: slideIn,
+    animationIterationCount: '1',
+    animationDuration: '.5s',
+  };
+
+  const fadeInAnimation = {
+    animationName: fadeIn,
+    animationIterationCount: '1',
+    animationDuration: '.5s',
+  };
+
   const ActivityItemStyles: IActivityItemStyles = {
 
     root: [
@@ -29,7 +73,23 @@ export const getStyles = memoizeFunction((
         lineHeight: '17px',
         boxSizing: 'border-box',
         color: theme.palette.neutralSecondary
-      }
+      },
+      (props.isCompact && props.animateBeaconSignal) && fadeInAnimation
+    ],
+
+    pulsingBeacon: [
+      {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '0px',
+        height: '0px',
+        borderRadius: '225px',
+        borderStyle: 'solid',
+        opacity: 0
+      },
+      (props.isCompact && props.animateBeaconSignal) && continuousPulseAnimation
     ],
 
     isCompactRoot: {
@@ -63,19 +123,24 @@ export const getStyles = memoizeFunction((
 
     isCompactIcon: {
       height: COMPACT_PERSONA_SIZE,
+      minWidth: COMPACT_PERSONA_SIZE,
       fontSize: COMPACT_ICON_SIZE,
       lineHeight: COMPACT_ICON_SIZE,
       color: theme.palette.themePrimary,
       marginTop: '1px',
+      position: 'relative',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       selectors: {
         '.ms-Persona-imageArea': {
-          marginTop: '-2px',
+          margin: '-2px 0 0 -2px',
           border: '2px solid' + theme.palette.white,
           borderRadius: '50%',
           selectors: {
             [HighContrastSelector]: {
               border: 'none',
-              marginTop: '0'
+              margin: '0'
             }
           }
         }
@@ -101,9 +166,12 @@ export const getStyles = memoizeFunction((
       overflow: 'visible'
     },
 
-    activityContent: {
-      padding: '0 8px'
-    },
+    activityContent: [
+      {
+        padding: '0 8px'
+      },
+      (props.isCompact && props.animateBeaconSignal) && slideInAnimation
+    ],
 
     activityText: {
       display: 'inline'
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 462414f66dd3d..56359571948d5 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
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 import { ActivityItem } from './ActivityItem';
-import { Icon } from '../Icon';
+import { Icon } from '../../Icon';
 import { TestImages } from '../../common/TestImages';
 
 const defaultProps = {
@@ -34,7 +34,7 @@ describe('ActivityItem', () => {
   it('renders with an icon correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityIcon={ <Icon iconName={ 'Message' } /> }
       />
     );
@@ -45,7 +45,7 @@ describe('ActivityItem', () => {
   it('renders with a single persona correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityPersonas={ [defaultPersonaProps[0]] }
       />
     );
@@ -56,7 +56,7 @@ describe('ActivityItem', () => {
   it('renders with multiple personas correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityPersonas={ defaultPersonaProps }
       />
     );
@@ -67,7 +67,7 @@ describe('ActivityItem', () => {
   it('renders compact with an icon correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityIcon={ <Icon iconName={ 'Message' } /> }
         isCompact={ true }
       />
@@ -79,7 +79,7 @@ describe('ActivityItem', () => {
   it('renders compact with a single persona correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityPersonas={ [defaultPersonaProps[0]] }
         isCompact={ true }
       />
@@ -91,7 +91,7 @@ describe('ActivityItem', () => {
   it('renders compact with multiple personas correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityPersonas={ defaultPersonaProps }
         isCompact={ true }
       />
@@ -100,4 +100,17 @@ describe('ActivityItem', () => {
     expect(tree).toMatchSnapshot();
   });
 
-});
\ No newline at end of file
+  it('renders compact with animation correctly', () => {
+    const component = renderer.create(
+      <ActivityItem
+        { ...defaultProps }
+        activityPersonas={ [defaultPersonaProps[0]] }
+        isCompact={ true }
+        animateBeaconSignal={ true }
+      />
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+});
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 978f0f9f80461..7f11a08413276 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
@@ -1,25 +1,27 @@
-/* tslint:disable */
-import * as React from 'react';
-/* tslint:enable */
 
+import * as React from 'react';
 import { BaseComponent } from '../../Utilities';
-import { IActivityItemProps, IActivityItemStyles } from './ActivityItem.types';
+import { IActivityItemProps } from './ActivityItem.types';
 import { IActivityItemClassNames, getClassNames } from './ActivityItem.classNames';
 import { getStyles } from './ActivityItem.styles';
-import { PersonaSize, PersonaCoin, IPersonaSharedProps } from '../../Persona';
+import { PersonaSize, PersonaCoin, IPersonaSharedProps, IPersonaCoinProps } from '../../Persona';
+
+type OptionalReactKey = { key?: React.Key };
 
 export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
+
   constructor(props: IActivityItemProps) {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       onRenderIcon = this._onRenderIcon,
       onRenderActivityDescription = this._onRenderActivityDescription,
       onRenderComments = this._onRenderComments,
       onRenderTimeStamp = this._onRenderTimeStamp,
-      styles: customStyles
+      animateBeaconSignal,
+      isCompact
     } = this.props;
 
     const classNames = this._getClassNames(this.props);
@@ -29,6 +31,9 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
 
         { (this.props.activityPersonas || this.props.activityIcon || this.props.onRenderIcon) &&
           <div className={ classNames.activityTypeIcon }>
+            { animateBeaconSignal && isCompact &&
+              <div className={ classNames.pulsingBeacon } />
+            }
             { onRenderIcon(this.props) }
           </div>
         }
@@ -90,7 +95,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
     const classNames = this._getClassNames(props);
 
     let personaElement: JSX.Element | null = null;
-    const activityPersonas = props.activityPersonas as Array<IPersonaSharedProps & { key?: string | number }>;
+    const activityPersonas = props.activityPersonas as Array<IPersonaSharedProps & OptionalReactKey>;
     if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) {
       const personaList: Array<JSX.Element> = [];
       const showSize16Personas = (activityPersonas.length > 1 || props.isCompact);
@@ -104,24 +109,26 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
           overflow: 'visible'
         };
       }
-      activityPersonas.filter((person, index) => index < personaLimit).forEach((person, index) => {
-        personaList.push(
-          <PersonaCoin
-            { ...person }
-            // tslint:disable-next-line:no-string-literal
-            key={ person['key'] ? person['key'] : index }
-            className={ classNames.activityPersona }
-            size={ showSize16Personas ? PersonaSize.size16 : PersonaSize.size32 }
-            style={ style }
-          />
-        );
-      });
+      activityPersonas
+        .filter((person: IPersonaCoinProps & OptionalReactKey, index: number) => index < personaLimit)
+        .forEach((person: IPersonaCoinProps & OptionalReactKey, index: number) => {
+          personaList.push(
+            <PersonaCoin
+              { ...person }
+              // tslint:disable-next-line:no-string-literal
+              key={ person['key'] ? person['key'] : index }
+              className={ classNames.activityPersona }
+              size={ showSize16Personas ? PersonaSize.size16 : PersonaSize.size32 }
+              style={ style }
+            />
+          );
+        });
       personaElement = <div className={ classNames.personaContainer }>{ personaList }</div>;
     }
     return personaElement;
   }
 
   private _getClassNames(props: IActivityItemProps): IActivityItemClassNames {
-    return getClassNames(getStyles(undefined, props.styles), props.className!, props.activityPersonas!, props.isCompact!);
+    return getClassNames(getStyles(props, undefined, props.styles), props.className!, props.activityPersonas!, props.isCompact!);
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts
index cb9ac03a1c519..f869598ee9e8c 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts
@@ -76,6 +76,23 @@ export interface IActivityItemProps extends React.AllHTMLAttributes<HTMLElement>
    * Element shown as a timestamp on this activity. If not included, no timestamp is shown.
    */
   timeStamp?: string | React.ReactNode[] | React.ReactNode;
+
+  /**
+   * Beacon color one
+   */
+  beaconColorOne?: string;
+
+  /**
+   * Beacon color two
+   */
+  beaconColorTwo?: string;
+
+  /**
+   * Enables/Disables the beacon that radiates
+   * from the center of the center of the activity icon. Signals an activity has started.
+   * @default false
+   */
+  animateBeaconSignal?: boolean;
 }
 
 export interface IActivityItemStyles {
@@ -84,6 +101,11 @@ export interface IActivityItemStyles {
    */
   root?: IStyle;
 
+  /**
+   * Styles applied to the root activity item container.
+   */
+  pulsingBeacon?: IStyle;
+
   /**
    * Styles applied to the main container of the activity's description.
    */
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 99638c9cefbe2..cb3f0972a3891 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx
@@ -12,20 +12,17 @@ import { ActivityItemBasicExample } from './examples/ActivityItem.Basic.Example'
 import { ActivityItemPersonaExample } from './examples/ActivityItem.Persona.Example';
 import { ActivityItemCompactExample } from './examples/ActivityItem.Compact.Example';
 
-const ActivityItemOverview = require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemOverview.md');
-const ActivityItemDos = require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDos.md');
-const ActivityItemDonts = require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDonts.md');
-
 const ActivityItemBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx') as string;
 const ActivityItemPersonaExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx') as string;
 const ActivityItemCompactExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx') as string;
 
 export class ActivityItemPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='ActivityItem'
         componentName='ActivityItem'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/ActivityItem'
         exampleCards={
           <div>
             <ExampleCard title='Activity Items with Icons' code={ ActivityItemBasicExampleCode }>
@@ -48,7 +45,7 @@ export class ActivityItemPage extends React.Component<IComponentDemoPageProps, {
         }
         overview={
           <PageMarkdown>
-            { ActivityItemOverview }
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemOverview.md') }
           </PageMarkdown>
         }
         bestPractices={
@@ -56,12 +53,12 @@ export class ActivityItemPage extends React.Component<IComponentDemoPageProps, {
         }
         dos={
           <PageMarkdown>
-            { ActivityItemDos }
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDos.md') }
           </PageMarkdown>
         }
         donts={
           <PageMarkdown>
-            { ActivityItemDonts }
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ActivityItem/docs/ActivityItemDonts.md') }
           </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
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 080d69cf5cce9..164b56b09f407 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
@@ -23,19 +23,30 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = `
     className=
         ms-ActivityItem-activityTypeIcon
         {
+          align-items: center;
           color: #0078d4;
+          display: flex;
           font-size: 13px;
           height: 16px;
+          justify-content: center;
           line-height: 13px;
           margin-top: 1px;
+          min-width: 16px;
+          position: relative;
         }
         & .ms-Persona-imageArea {
           border-radius: 50%;
           border: 2px solid#ffffff;
+          margin-bottom: 0;
+          margin-left: -2px;
+          margin-right: 0;
           margin-top: -2px;
         }
         @media screen and (-ms-high-contrast: active){& .ms-Persona-imageArea {
           border: none;
+          margin-bottom: 0;
+          margin-left: 0;
+          margin-right: 0;
           margin-top: 0;
         }
   >
@@ -214,19 +225,30 @@ exports[`ActivityItem renders compact with an icon correctly 1`] = `
     className=
         ms-ActivityItem-activityTypeIcon
         {
+          align-items: center;
           color: #0078d4;
+          display: flex;
           font-size: 13px;
           height: 16px;
+          justify-content: center;
           line-height: 13px;
           margin-top: 1px;
+          min-width: 16px;
+          position: relative;
         }
         & .ms-Persona-imageArea {
           border-radius: 50%;
           border: 2px solid#ffffff;
+          margin-bottom: 0;
+          margin-left: -2px;
+          margin-right: 0;
           margin-top: -2px;
         }
         @media screen and (-ms-high-contrast: active){& .ms-Persona-imageArea {
           border: none;
+          margin-bottom: 0;
+          margin-left: 0;
+          margin-right: 0;
           margin-top: 0;
         }
   >
@@ -270,6 +292,233 @@ exports[`ActivityItem renders compact with an icon correctly 1`] = `
 </div>
 `;
 
+exports[`ActivityItem renders compact with animation correctly 1`] = `
+<div
+  className=
+      ms-ActivityItem
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        align-items: center;
+        animation-duration: .5s;
+        animation-iteration-count: 1;
+        animation-name: css-93;
+        box-sizing: border-box;
+        color: #666666;
+        display: flex;
+        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;
+        line-height: 17px;
+      }
+  style={undefined}
+>
+  <div
+    className=
+        ms-ActivityItem-activityTypeIcon
+        {
+          align-items: center;
+          color: #0078d4;
+          display: flex;
+          font-size: 13px;
+          height: 16px;
+          justify-content: center;
+          line-height: 13px;
+          margin-top: 1px;
+          min-width: 16px;
+          position: relative;
+        }
+        & .ms-Persona-imageArea {
+          border-radius: 50%;
+          border: 2px solid#ffffff;
+          margin-bottom: 0;
+          margin-left: -2px;
+          margin-right: 0;
+          margin-top: -2px;
+        }
+        @media screen and (-ms-high-contrast: active){& .ms-Persona-imageArea {
+          border: none;
+          margin-bottom: 0;
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+        }
+  >
+    <div
+      className=
+          ms-ActivityItem-pulsingBeacon
+          {
+            animation-duration: .8s;
+            animation-iteration-count: 1;
+            animation-name: css-92;
+            border-radius: 225px;
+            border-style: solid;
+            height: 0px;
+            left: 50%;
+            opacity: 0;
+            position: absolute;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 0px;
+            z-index: 1;
+          }
+    />
+    <div
+      className=
+          ms-ActivityItem-personaContainer
+          {
+            display: inline-flex;
+            flex-basis: auto;
+            flex-wrap: nowrap;
+            height: 16px;
+            min-width: 0;
+            padding-right: 6px;
+            width: auto;
+          }
+    >
+      <div
+        className=
+            ms-Persona-coin
+            ms-Persona--size16
+            ms-ActivityItem-activityPersona
+            {
+              display: inline-block;
+              min-width: 8px;
+              overflow: visible;
+              width: 8px;
+            }
+        size={8}
+        style={
+          Object {
+            "display": "inline-block",
+            "minWidth": "10px",
+            "overflow": "visible",
+            "width": "10px",
+          }
+        }
+      >
+        <div
+          className=
+              ms-Persona-imageArea
+              {
+                flex: 0 0 auto;
+                height: 16px;
+                position: relative;
+                text-align: center;
+                width: 16px;
+              }
+          style={undefined}
+        >
+          <div
+            aria-hidden="true"
+            className=
+                ms-Persona-initials
+                {
+                  background-color: #2D89EF;
+                  border-radius: 50%;
+                  color: #ffffff;
+                  font-size: 11px;
+                  font-weight: 400;
+                  height: 16px;
+                  line-height: 16px;
+                }
+                @media screen and (-ms-high-contrast: active){& {
+                  -ms-high-contrast-adjust: none;
+                  background-color: Window !important;
+                  border: 1px solid WindowText;
+                  box-sizing: border-box;
+                  color: WindowText;
+                }
+            style={undefined}
+          >
+            <span>
+              TN
+            </span>
+          </div>
+          <div
+            className=
+                ms-Image
+                ms-Persona-image
+                {
+                  border-radius: 50%;
+                  border: 0px;
+                  height: 16px;
+                  left: 0px;
+                  margin-right: 10px;
+                  overflow: hidden;
+                  perspective: 1px;
+                  position: absolute;
+                  top: 0px;
+                  width: 16px;
+                }
+            style={
+              Object {
+                "height": undefined,
+                "width": undefined,
+              }
+            }
+          >
+            <img
+              alt=""
+              className=
+                  ms-Image-image
+                  ms-Image-image--cover
+                  ms-Image-image--portrait
+                  is-notLoaded
+                  is-fadeIn
+                  {
+                    display: block;
+                    height: auto;
+                    left: 50% /* @noflip */;
+                    opacity: 0;
+                    position: absolute;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    width: 100%;
+                  }
+              onError={[Function]}
+              onLoad={[Function]}
+              role={undefined}
+              src={undefined}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-ActivityItem-activityContent
+        {
+          animation-duration: .5s;
+          animation-iteration-count: 1;
+          animation-name: css-94;
+          flex: 1;
+          overflow-x: hidden;
+          padding-bottom: 0;
+          padding-left: 4px;
+          padding-right: 4px;
+          padding-top: 0;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+  >
+    <span
+      className=
+          ms-ActivityItem-activityText
+          {
+            display: inline;
+          }
+    >
+      <span>
+        description text
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
 <div
   className=
@@ -293,19 +542,30 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
     className=
         ms-ActivityItem-activityTypeIcon
         {
+          align-items: center;
           color: #0078d4;
+          display: flex;
           font-size: 13px;
           height: 16px;
+          justify-content: center;
           line-height: 13px;
           margin-top: 1px;
+          min-width: 16px;
+          position: relative;
         }
         & .ms-Persona-imageArea {
           border-radius: 50%;
           border: 2px solid#ffffff;
+          margin-bottom: 0;
+          margin-left: -2px;
+          margin-right: 0;
           margin-top: -2px;
         }
         @media screen and (-ms-high-contrast: active){& .ms-Persona-imageArea {
           border: none;
+          margin-bottom: 0;
+          margin-left: 0;
+          margin-right: 0;
           margin-top: 0;
         }
   >
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 838d6fd39bec7..e78e4eac2b92c 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,6 +1,4 @@
-/* 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 {
@@ -12,7 +10,7 @@ import { Icon } from '../../../Icon';
 import { Link } from '../../../Link';
 
 export class ActivityItemBasicExample extends React.Component<React.Props<ActivityItemBasicExample>, {}> {
-  public render() {
+  public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
     const classNames = getClassNames(getStyles);
 
@@ -57,10 +55,10 @@ export class ActivityItemBasicExample extends React.Component<React.Props<Activi
     ];
 
     const activityExampleList: Array<JSX.Element> = [];
-    activityItemExamples.forEach((item) => {
+    activityItemExamples.forEach((item: { key: string | number }) => {
       const props = item;
       activityExampleList.push(
-        <ActivityItem {...props} key={ item.key } className={ css(classNames.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 c364014cbc3da..f7aa6cf9eeb5d 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,6 +1,4 @@
-/* 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 { IActivityItemProps } from '../ActivityItem.types';
@@ -13,7 +11,7 @@ import { TestImages } from '../../../common/TestImages';
 import { Icon } from '../../../Icon';
 
 export class ActivityItemCompactExample extends React.Component<React.Props<ActivityItemCompactExample>, {}> {
-  public render() {
+  public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
     const classNames = getClassNames(getStyles);
 
@@ -74,10 +72,10 @@ export class ActivityItemCompactExample extends React.Component<React.Props<Acti
     ];
 
     const activityExampleList: Array<JSX.Element> = [];
-    activityItemExamples.forEach((item) => {
+    activityItemExamples.forEach((item: { key: string | number }) => {
       const props = item;
       activityExampleList.push(
-        <ActivityItem { ...props } key={ item.key } className={ css(classNames.exampleRoot) } />
+        <ActivityItem { ...props as IActivityItemProps } key={ item.key } className={ css(classNames.exampleRoot) } />
       );
     });
 
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 204be27e2a29f..7321d2ab23463 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,6 +1,4 @@
-/* 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 {
@@ -12,7 +10,7 @@ import { TestImages } from '../../../common/TestImages';
 import { Link } from '../../../Link';
 
 export class ActivityItemPersonaExample extends React.Component<React.Props<ActivityItemPersonaExample>, {}> {
-  public render() {
+  public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
     const classNames = getClassNames(getStyles);
 
@@ -110,10 +108,10 @@ export class ActivityItemPersonaExample extends React.Component<React.Props<Acti
     ];
 
     const activityExampleList: Array<JSX.Element> = [];
-    activityItemExamples.forEach((item) => {
+    activityItemExamples.forEach((item: { key: string | number }) => {
       const props = item;
       activityExampleList.push(
-        <ActivityItem {...props} key={ item.key } className={ css(classNames.exampleRoot) } />
+        <ActivityItem { ...props } key={ item.key } className={ css(classNames.exampleRoot) } />
       );
     });
 
diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx
index 3ec42dccafdec..c1ec0cd713e83 100644
--- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx
@@ -1,6 +1,4 @@
-/* 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';
@@ -17,7 +15,7 @@ describe('Autofill', () => {
 
     const component = ReactDOM.render(
       <Autofill
-        ref={ (c) => autoFill = c! }
+        ref={ (c: Autofill | null) => (c && (autoFill = c)) }
         suggestedDisplayValue='hello'
       />,
       baseNode
@@ -25,7 +23,7 @@ describe('Autofill', () => {
     autoFillInput = ReactDOM.findDOMNode(component as React.ReactInstance) as HTMLInputElement;
   });
 
-  it('correctly autofills', (done) => {
+  it('correctly autofills', (done: (error?: Error) => void) => {
     const onInputValueChange = (text: string | undefined): void => {
       expect(text).toBe('hel');
       expect(autoFill.value).toBe('hel');
@@ -34,7 +32,7 @@ describe('Autofill', () => {
 
     ReactDOM.render(
       <Autofill
-        ref={ (c) => autoFill = c! }
+        ref={ (c: Autofill | null) => (c && (autoFill = c)) }
         onInputValueChange={ onInputValueChange }
         suggestedDisplayValue='hello'
       />,
@@ -44,7 +42,7 @@ describe('Autofill', () => {
     ReactTestUtils.Simulate.input(autoFillInput);
     ReactDOM.render(
       <Autofill
-        ref={ (c) => autoFill = c! }
+        ref={ (c: Autofill | null) => (c && (autoFill = c)) }
         onInputValueChange={ onInputValueChange }
         suggestedDisplayValue='hello'
       />, baseNode);
@@ -52,7 +50,7 @@ describe('Autofill', () => {
 
   });
 
-  it('does not autofill if suggestedDisplayValue does not match input', (done) => {
+  it('does not autofill if suggestedDisplayValue does not match input', (done: (error?: Error) => void) => {
     const onInputValueChange = (text: string | undefined): void => {
       expect(text).toBe('hep');
       expect(autoFill.value).toBe('hep');
@@ -64,7 +62,7 @@ describe('Autofill', () => {
     ReactTestUtils.Simulate.input(autoFillInput);
     ReactDOM.render(
       <Autofill
-        ref={ (c) => autoFill = c! }
+        ref={ (c: Autofill | null) => (c && (autoFill = c)) }
         onInputValueChange={ onInputValueChange }
         suggestedDisplayValue='hello'
       />,
@@ -79,7 +77,7 @@ describe('Autofill', () => {
 
     ReactDOM.render(
       <Autofill
-        ref={ (c) => autoFill = c! }
+        ref={ (c: Autofill | null) => (c && (autoFill = c)) }
         suggestedDisplayValue='hello'
       />,
       baseNode
@@ -103,7 +101,7 @@ describe('Autofill', () => {
 
     ReactDOM.render(
       <Autofill
-        ref={ (c) => autoFill = c! }
+        ref={ (c: Autofill | null) => (c && (autoFill = c)) }
         suggestedDisplayValue='hello'
       />,
       baseNode
@@ -122,7 +120,7 @@ describe('Autofill', () => {
 
     ReactDOM.render(
       <Autofill
-        ref={ (c) => autoFill = c! }
+        ref={ (c: Autofill | null) => (c && (autoFill = c)) }
         suggestedDisplayValue='hello'
       />,
       baseNode
diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
index d5386e0f0005a..dde35432ad8e6 100644
--- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
+++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
@@ -33,9 +33,9 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
     };
   }
 
-  public get cursorLocation(): number {
-    if (this._inputElement.value) {
-      const inputElement = this._inputElement.value;
+  public get cursorLocation(): number | null {
+    if (this._inputElement.current) {
+      const inputElement = this._inputElement.current;
       if (inputElement.selectionDirection !== SELECTION_FORWARD) {
         return inputElement.selectionEnd;
       } else {
@@ -54,19 +54,19 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
     return this._value;
   }
 
-  public get selectionStart(): number {
-    return this._inputElement.value ? this._inputElement.value.selectionStart : -1;
+  public get selectionStart(): number | null {
+    return this._inputElement.current ? this._inputElement.current.selectionStart : -1;
   }
 
-  public get selectionEnd(): number {
-    return this._inputElement.value ? this._inputElement.value.selectionEnd : -1;
+  public get selectionEnd(): number | null {
+    return this._inputElement.current ? this._inputElement.current.selectionEnd : -1;
   }
 
   public get inputElement(): HTMLInputElement | null {
-    return this._inputElement.value;
+    return this._inputElement.current;
   }
 
-  public componentWillReceiveProps(nextProps: IAutofillProps) {
+  public componentWillReceiveProps(nextProps: IAutofillProps): void {
     let newValue;
 
     if (this.props.updateValueInWillReceiveProps) {
@@ -95,20 +95,20 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
         shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate();
       }
 
-      if (shouldSelectFullRange && this._inputElement.value) {
-        this._inputElement.value.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD);
+      if (shouldSelectFullRange && this._inputElement.current) {
+        this._inputElement.current.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);
+        if (differenceIndex > 0 && this._inputElement.current) {
+          this._inputElement.current.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD);
         }
       }
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       displayValue
     } = this.state;
@@ -133,13 +133,13 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
   }
 
   public focus() {
-    this._inputElement.value && this._inputElement.value.focus();
+    this._inputElement.current && this._inputElement.current.focus();
   }
 
   public clear() {
     this._autoFillEnabled = true;
     this._updateValue('');
-    this._inputElement.value && this._inputElement.value.setSelectionRange(0, 0);
+    this._inputElement.current && this._inputElement.current.setSelectionRange(0, 0);
   }
 
   // Composition events are used when the character/text requires several keystrokes to be completed.
@@ -230,18 +230,18 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
    * @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) {
+  private _tryEnableAutofill(newValue: string, oldValue: string, isComposing?: boolean, isComposed?: boolean): void {
     if (!isComposing
       && newValue
-      && this._inputElement.value
-      && this._inputElement.value.selectionStart === newValue.length
+      && this._inputElement.current
+      && this._inputElement.current.selectionStart === newValue.length
       && !this._autoFillEnabled
       && (newValue.length > oldValue.length || isComposed)) {
       this._autoFillEnabled = true;
     }
   }
 
-  private _notifyInputChange(newValue: string) {
+  private _notifyInputChange(newValue: string): void {
     if (this.props.onInputValueChange) {
       this.props.onInputValueChange(newValue);
     }
@@ -265,7 +265,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
    * @param inputValue the value that the input currently has.
    * @param suggestedDisplayValue the possible full value
    */
-  private _getDisplayValue(inputValue: string, suggestedDisplayValue?: string) {
+  private _getDisplayValue(inputValue: string, suggestedDisplayValue?: string): string {
     let displayValue = inputValue;
     if (suggestedDisplayValue
       && inputValue
@@ -276,7 +276,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
     return displayValue;
   }
 
-  private _doesTextStartWith(text: string, startWith: string) {
+  private _doesTextStartWith(text: string, startWith: string): boolean {
     if (!text || !startWith) {
       return false;
     }
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
index aa5e655e96f4b..2d971d8d4f943 100644
--- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts
@@ -7,7 +7,7 @@ export interface IAutofill {
    * The current index of the cursor in the input area. Returns -1 if the input element
    * is not ready.
    */
-  cursorLocation: number;
+  cursorLocation: number | null;
   /**
    * A boolean for whether or not there is a value selected in the input area.
    */
@@ -20,12 +20,12 @@ export interface IAutofill {
    * The current index of where the selection starts. Returns -1 if the input element
    * is not ready.
    */
-  selectionStart: number;
+  selectionStart: number | null;
   /**
    * the current index of where the selection ends. Returns -1 if the input element
    * is not ready.
    */
-  selectionEnd: number;
+  selectionEnd: number | null;
   /**
    * The current input element.
    */
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
index 64344b43f417c..7209e8f324926 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   BaseComponent,
   css,
-  getRTL
+  getRTL,
+  createRef
 } from '../../Utilities';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { Link } from '../../Link';
@@ -28,19 +29,35 @@ const nullFunction = (): null => null;
 export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
   public static defaultProps: IBreadcrumbProps = {
     items: [],
-    maxDisplayedItems: 999
+    maxDisplayedItems: 999,
+    overflowIndex: 0
   };
 
+  protected focusZone = createRef<FocusZone>();
+
   constructor(props: IBreadcrumbProps) {
     super(props);
+
+    this._validateProps(props);
   }
 
-  public render() {
-    const { onReduceData = this._onReduceData, maxDisplayedItems, items } = this.props;
+  /**
+   * Sets focus to the first breadcrumb link.
+   */
+  public focus(): void {
+    if (this.focusZone.current) {
+      this.focusZone.current.focus();
+    }
+  }
+
+  public render(): JSX.Element {
+    const { onReduceData = this._onReduceData, overflowIndex, maxDisplayedItems, items } = this.props;
+    const renderedItems = [...items];
+    const renderedOverflowItems = renderedItems.splice(overflowIndex!, renderedItems.length - maxDisplayedItems!);
     const breadCrumbData: IBreadCrumbData = {
       props: this.props,
-      renderedItems: items.slice(-maxDisplayedItems!),
-      renderedOverflowItems: items.slice(0, -maxDisplayedItems!)
+      renderedItems,
+      renderedOverflowItems
     };
 
     return (
@@ -52,10 +69,17 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
     );
   }
 
+  public componentWillReceiveProps(nextProps: IBreadcrumbProps): void {
+    this._validateProps(nextProps);
+  }
+
   private _onReduceData = (data: IBreadCrumbData): IBreadCrumbData | undefined => {
     let { renderedItems, renderedOverflowItems } = data;
-    const movedItem = renderedItems[0];
-    renderedItems = renderedItems.slice(1);
+    const { overflowIndex } = data.props;
+
+    const movedItem = renderedItems[overflowIndex!];
+    renderedItems = [...renderedItems];
+    renderedItems.splice(overflowIndex!, 1);
 
     renderedOverflowItems = [...renderedOverflowItems, movedItem];
 
@@ -70,7 +94,8 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
       ariaLabel,
       dividerAs: Divider = Icon,
       onRenderItem = this._onRenderItem,
-      overflowAriaLabel
+      overflowAriaLabel,
+      overflowIndex
     } = data.props;
     const { renderedOverflowItems, renderedItems } = data;
 
@@ -87,44 +112,49 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
     // knows not to render on that item
     const lastItemIndex = renderedItems.length - 1;
 
+    const itemElements: JSX.Element[] = renderedItems.map(
+      (item, index) => (
+        <li className={ css('ms-Breadcrumb-listItem', styles.listItem) } key={ item.key || String(index) }>
+          { onRenderItem(item, this._onRenderItem) }
+          { index !== lastItemIndex && <Divider
+            className={ css('ms-Breadcrumb-chevron', styles.chevron) }
+            iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+          /> }
+        </li>
+      ));
+
+    if (renderedOverflowItems && renderedOverflowItems.length !== 0) {
+      itemElements.splice(overflowIndex!, 0, (
+        <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
+            } }
+          />
+          <Divider
+            className={ css('ms-Breadcrumb-chevron', styles.chevron) }
+            iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+          />
+        </li>
+      ));
+    }
+
     return (
       <div
         className={ css('ms-Breadcrumb', className, styles.root) }
         role='navigation'
         aria-label={ ariaLabel }
       >
-        <FocusZone direction={ FocusZoneDirection.horizontal } >
+        <FocusZone componentRef={ this.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 }>
-                <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
-                  } }
-                />
-                <Divider
-                  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) }>
-                  { onRenderItem(item, this._onRenderItem) }
-                  { index !== lastItemIndex && <Divider
-                    className={ css('ms-Breadcrumb-chevron', styles.chevron) }
-                    iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
-                  /> }
-                </li>
-              )) }
+            { itemElements }
           </ol>
         </FocusZone>
       </div>
@@ -137,7 +167,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
         <Link
           className={ css('ms-Breadcrumb-itemLink', styles.itemLink) }
           href={ item.href }
-          aria-current={ item.isCurrentItem ? 'page' : null }
+          aria-current={ item.isCurrentItem ? 'page' : undefined }
           onClick={ this._onBreadcrumbClicked.bind(this, item) }
         >
           <TooltipHost
@@ -167,4 +197,15 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
       item.onClick(ev, item);
     }
   }
+
+  /**
+   * Validate incoming props
+   * @param props Props to validate
+   */
+  private _validateProps(props: IBreadcrumbProps): void {
+    const { items, overflowIndex } = props;
+    if (overflowIndex! < 0 || overflowIndex! > items.length - 1) {
+      throw new Error('Breadcrumb: overflowIndex out of range');
+    }
+  }
 }
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 961c316e933ac..7004f172c843c 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
@@ -1,6 +1,4 @@
-/* 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';
@@ -48,6 +46,18 @@ describe('Breadcrumb', () => {
 
     tree = component.toJSON();
     expect(tree).toMatchSnapshot();
+
+    // With overflow and overflowIndex
+    component = renderer.create(
+      <Breadcrumb
+        items={ items }
+        maxDisplayedItems={ 2 }
+        overflowIndex={ 1 }
+      />
+    );
+
+    tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
   });
 
   it('can call the callback when an item is clicked', () => {
@@ -66,7 +76,7 @@ describe('Breadcrumb', () => {
       />
     );
 
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const itemLink = renderedDOM.querySelector('.ms-Breadcrumb-itemLink');
 
     ReactTestUtils.Simulate.click(itemLink!);
@@ -89,7 +99,7 @@ describe('Breadcrumb', () => {
       />
     );
 
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     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.types.ts b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts
index 0b8db646e0662..ec6a738b6c875 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
@@ -1,12 +1,13 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { Breadcrumb, IBreadCrumbData } from './Breadcrumb.base';
 import { IIconProps } from '../Icon';
 import { IRenderFunction, IComponentAs } from '../../Utilities';
 
 export interface IBreadcrumb {
-
+  /**
+   * Sets focus to the first breadcrumb link.
+   */
+  focus(): void;
 }
 
 export interface IBreadcrumbProps extends React.Props<Breadcrumb> {
@@ -38,6 +39,7 @@ export interface IBreadcrumbProps extends React.Props<Breadcrumb> {
   maxDisplayedItems?: number;
 
   /** Method to call when trying to render an item. */
+
   onRenderItem?: IRenderFunction<IBreadcrumbItem>;
 
   /**
@@ -55,6 +57,11 @@ export interface IBreadcrumbProps extends React.Props<Breadcrumb> {
    * Optional name to use for aria label on overflow button.
    */
   overflowAriaLabel?: string;
+
+  /**
+   * Optional index where overflow items will be collapsed. Defaults to 0.
+   */
+  overflowIndex?: number;
 }
 
 export interface IBreadcrumbItem {
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx
index ae672f5f559e4..7243b2bdcc3dc 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.tsx
@@ -3,7 +3,8 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
@@ -19,11 +20,12 @@ const BreadcrumbStaticExampleCode = require(
 ) as string;
 
 export class BreadcrumbPage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Breadcrumb'
         componentName='BreadcrumbExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Breadcrumb'
         exampleCards={
           <div>
             <ExampleCard
@@ -48,32 +50,27 @@ export class BreadcrumbPage extends React.Component<IComponentDemoPageProps, any
           />
         }
         overview={
-          <div>
-            <p>Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy.</p>
-            <p>Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.</p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don't use Breadcrumbs as a primary way to navigate an app or site.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...BreadcrumbStatus}
+            { ...BreadcrumbStatus }
           />
         }
       />
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 4626f94720f2c..575f97c0d6720 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
@@ -27,7 +27,6 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
         aria-labelledby={undefined}
         className="ms-FocusZone"
         data-focuszone-id="FocusZone0"
-        onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -172,7 +171,6 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
         aria-labelledby={undefined}
         className="ms-FocusZone"
         data-focuszone-id="FocusZone5"
-        onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -384,7 +382,6 @@ exports[`Breadcrumb renders breadcumb correctly 3`] = `
         aria-labelledby={undefined}
         className="ms-FocusZone"
         data-focuszone-id="FocusZone11"
-        onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -480,3 +477,214 @@ exports[`Breadcrumb renders breadcumb correctly 3`] = `
   </div>
 </div>
 `;
+
+exports[`Breadcrumb renders breadcumb correctly 4`] = `
+<div
+  className=
+      ms-ResizeGroup
+      {
+        display: block;
+        position: relative;
+      }
+>
+  <div
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
+  >
+    <div
+      aria-label={undefined}
+      className="ms-Breadcrumb"
+      role="navigation"
+    >
+      <div
+        aria-describedby={undefined}
+        aria-labelledby={undefined}
+        className="ms-FocusZone"
+        data-focuszone-id="FocusZone16"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="presentation"
+      >
+        <ol
+          className="ms-Breadcrumb-list"
+        >
+          <li
+            className="ms-Breadcrumb-listItem"
+          >
+            <span
+              className="ms-Breadcrumb-item"
+            >
+              <div
+                aria-describedby={undefined}
+                className="ms-TooltipHost"
+                onBlurCapture={[Function]}
+                onFocusCapture={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                TestText1
+              </div>
+            </span>
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Breadcrumb-chevron
+                  {
+                    display: inline-block;
+                  }
+              data-icon-name="ChevronRight"
+              role="presentation"
+            />
+          </li>
+          <li
+            className="ms-Breadcrumb-overflow"
+          >
+            <button
+              aria-describedby={null}
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label={undefined}
+              aria-labelledby={null}
+              aria-owns={null}
+              aria-pressed={undefined}
+              className=
+                  ms-Button
+                  ms-Breadcrumb-overflowButton
+                  ms-Button--icon
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    background-color: transparent;
+                    border-radius: 0px;
+                    border: 1px solid transparent;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    display: inline-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: 32px;
+                    outline: transparent;
+                    padding-bottom: 0;
+                    padding-left: 4px;
+                    padding-right: 4px;
+                    padding-top: 0;
+                    position: relative;
+                    text-align: center;
+                    text-decoration: none;
+                    user-select: none;
+                    vertical-align: top;
+                    width: 32px;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric.is-focusVisible &:focus:after {
+                    border: 1px solid #ffffff;
+                    bottom: 0px;
+                    content: "";
+                    left: 0px;
+                    outline: 1px solid #666666;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                    border: none;
+                    bottom: -2px;
+                    left: -2px;
+                    outline-color: ButtonText;
+                    right: -2px;
+                    top: -2px;
+                  }
+                  &:hover {
+                    background-color: #f4f4f4;
+                    color: #004578;
+                  }
+                  &:active {
+                    background-color: #eaeaea;
+                    color: #0078d4;
+                  }
+              data-is-focusable={true}
+              disabled={undefined}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              type="button"
+            >
+              <div
+                className=
+                    ms-Button-flexContainer
+                    {
+                      align-items: center;
+                      display: flex;
+                      flex-wrap: nowrap;
+                      height: 100%;
+                      justify-content: center;
+                    }
+              >
+                <i
+                  aria-hidden={true}
+                  className=
+                      ms-Button-icon
+                      {
+                        display: inline-block;
+                      }
+                      {
+                        flex-shrink: 0;
+                        font-size: 16px;
+                        height: 16px;
+                        line-height: 16px;
+                        margin-bottom: 0;
+                        margin-left: 4px;
+                        margin-right: 4px;
+                        margin-top: 0;
+                        text-align: center;
+                        vertical-align: middle;
+                      }
+                  data-icon-name="More"
+                  role="presentation"
+                />
+              </div>
+            </button>
+            <i
+              aria-hidden={true}
+              className=
+                  ms-Breadcrumb-chevron
+                  {
+                    display: inline-block;
+                  }
+              data-icon-name="ChevronRight"
+              role="presentation"
+            />
+          </li>
+          <li
+            className="ms-Breadcrumb-listItem"
+          >
+            <span
+              className="ms-Breadcrumb-item"
+            >
+              <div
+                aria-describedby={undefined}
+                className="ms-TooltipHost"
+                onBlurCapture={[Function]}
+                onFocusCapture={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                TestText4
+              </div>
+            </span>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDonts.md b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDonts.md
new file mode 100644
index 0000000000000..41d6b2c92cb4a
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDonts.md
@@ -0,0 +1 @@
+- Don't use Breadcrumbs as a primary way to navigate an app or site.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDos.md b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDos.md
new file mode 100644
index 0000000000000..475b0636fbcd7
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbDos.md
@@ -0,0 +1 @@
+- Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbOverview.md b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbOverview.md
new file mode 100644
index 0000000000000..78bbf512689e3
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/docs/BreadcrumbOverview.md
@@ -0,0 +1,3 @@
+Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy.
+
+Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx
index 25cb0874589e0..5ee7499cbed3b 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import {
   Breadcrumb, IBreadcrumbItem
 } from 'office-ui-fabric-react/lib/Breadcrumb';
@@ -13,7 +11,7 @@ export class BreadcrumbBasicExample extends React.Component<any, any> {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const customDivider = () => <span>*</span>;
 
     return (
@@ -58,11 +56,23 @@ export class BreadcrumbBasicExample extends React.Component<any, any> {
           maxDisplayedItems={ 3 }
           ariaLabel={ 'Website breadcrumb' }
         />
+
+        <Label className={ exampleStyles.exampleLabel } style={ { marginTop: '24px' } }>With maxDisplayedItems set to three and overflowIndex set to 1 (second element)</Label>
+        <Breadcrumb
+          items={ [
+            { text: 'TestText1', key: 'TestKey1' },
+            { text: 'TestText2', key: 'TestKey2' },
+            { text: 'TestText3', key: 'TestKey3' },
+            { text: 'TestText4', key: 'TestKey4' }
+          ] }
+          maxDisplayedItems={ 2 }
+          overflowIndex={ 1 }
+        />
       </div >
     );
   }
 
-  private _onBreadcrumbItemClicked = (ev: React.MouseEvent<HTMLElement>, item: IBreadcrumbItem) => {
+  private _onBreadcrumbItemClicked = (ev: React.MouseEvent<HTMLElement>, item: IBreadcrumbItem): void => {
     console.log(`Breadcrumb item with key "${item.key}" has been clicked.`);
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx
index fc283ec4f333f..fe371bfcee2c4 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx
@@ -1,13 +1,11 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import {
   Breadcrumb, IBreadcrumbItem
 } from 'office-ui-fabric-react/lib/Breadcrumb';
 
 export class BreadcrumbStaticExample extends React.Component {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div style={ { display: 'inline-block' } }>
         <Breadcrumb
@@ -28,7 +26,7 @@ export class BreadcrumbStaticExample extends React.Component {
     );
   }
 
-  private _onBreadcrumbItemClicked = (ev: React.MouseEvent<HTMLElement>, item: IBreadcrumbItem) => {
+  private _onBreadcrumbItemClicked = (ev: React.MouseEvent<HTMLElement>, item: IBreadcrumbItem): void => {
     console.log(`Breadcrumb item with key "${item.key}" has been clicked.`);
   }
 
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 c99913121c977..da778847a2dd1 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
@@ -12,7 +12,7 @@ export class ActionButton extends BaseComponent<IButtonProps, {}> {
    */
   protected _shouldUpdateComponentRef = false;
 
-  public render() {
+  public render(): JSX.Element {
     const { styles, theme } = this.props;
 
     return (
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 b0c79bd946e7e..5c350017e24df 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -33,12 +33,14 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   }
 
   private get _isExpanded(): boolean {
+    if (this.props.persistMenu) {
+      return !this.state.menuProps!.hidden;
+    }
     return !!this.state.menuProps;
   }
 
-  public static defaultProps = {
+  public static defaultProps: Partial<IBaseButtonProps> = {
     baseClassName: 'ms-Button',
-    classNames: {},
     styles: {},
     split: false,
   };
@@ -65,8 +67,13 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     this._labelId = getId();
     this._descriptionId = getId();
     this._ariaDescriptionId = getId();
+    let menuProps = null;
+    if (props.persistMenu && props.menuProps) {
+      menuProps = props.menuProps;
+      menuProps.hidden = true;
+    }
     this.state = {
-      menuProps: null
+      menuProps: menuProps
     };
   }
 
@@ -200,10 +207,10 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   }
 
   public focus(): void {
-    if (this._isSplitButton && this._splitButtonContainer.value) {
-      this._splitButtonContainer.value.focus();
-    } else if (this._buttonElement.value) {
-      this._buttonElement.value.focus();
+    if (this._isSplitButton && this._splitButtonContainer.current) {
+      this._splitButtonContainer.current.focus();
+    } else if (this._buttonElement.current) {
+      this._buttonElement.current.focus();
     }
   }
 
@@ -393,7 +400,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         directionalHint={ DirectionalHint.bottomLeftEdge }
         { ...menuProps }
         className={ 'ms-BaseButton-menuhost ' + menuProps.className }
-        target={ this._isSplitButton ? this._splitButtonContainer.value : this._buttonElement.value }
+        target={ this._isSplitButton ? this._splitButtonContainer.current : this._buttonElement.current }
         labelElementId={ this._labelId }
         onDismiss={ onDismiss }
       />
@@ -401,22 +408,35 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   }
 
   private _dismissMenu = (): void => {
-    this.setState({ menuProps: null });
+    let menuProps = null;
+    if (this.props.persistMenu && this.state.menuProps) {
+      menuProps = this.state.menuProps;
+      menuProps.hidden = true;
+    }
+    this.setState({ menuProps: menuProps });
   }
 
   private _openMenu = (): void => {
     if (this.props.menuProps) {
-      this.setState({ menuProps: this.props.menuProps });
+      const menuProps = this.props.menuProps;
+      if (this.props.persistMenu) {
+        menuProps.hidden = false;
+      }
+      this.setState({ menuProps: menuProps });
     }
   }
 
   private _onToggleMenu = (): void => {
-    if (this._splitButtonContainer.value) {
-      this._splitButtonContainer.value.focus();
+    if (this._splitButtonContainer.current) {
+      this._splitButtonContainer.current.focus();
     }
-    const { menuProps } = this.props;
+
     const currentMenuProps = this.state.menuProps;
-    currentMenuProps ? this._dismissMenu() : this._openMenu();
+    if (this.props.persistMenu) {
+      currentMenuProps && currentMenuProps.hidden ? this._openMenu() : this._dismissMenu();
+    } else {
+      currentMenuProps ? this._dismissMenu() : this._openMenu();
+    }
   }
 
   private _onRenderSplitButtonContent(tag: any, buttonProps: IButtonProps): JSX.Element {
@@ -425,7 +445,6 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       disabled,
       checked,
       getSplitButtonClassNames,
-      onClick,
       primaryDisabled
     } = this.props;
 
@@ -517,7 +536,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       'aria-expanded': this._isExpanded,
       'data-is-focusable': false
     };
-    return <BaseButton {...splitButtonProps} onMouseDown={ this._onMouseDown } tabIndex={ -1 } />;
+    return <BaseButton { ...splitButtonProps } onMouseDown={ this._onMouseDown } tabIndex={ -1 } />;
   }
 
   private _onMouseDown = (ev: React.MouseEvent<BaseButton>) => {
@@ -530,8 +549,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
 
   private _onSplitButtonContainerKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
     if (ev.which === KeyCodes.enter) {
-      if (this._buttonElement.value) {
-        this._buttonElement.value.click();
+      if (this._buttonElement.current) {
+        this._buttonElement.current.click();
         ev.preventDefault();
         ev.stopPropagation();
       }
@@ -549,14 +568,13 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       this.props.onKeyDown(ev);
     }
 
-    const { onMenuClick } = this.props;
-    if (onMenuClick) {
-      onMenuClick(ev, this);
-    }
-
     if (!ev.defaultPrevented &&
-      this.props.menuTriggerKeyCode !== null &&
       this._isValidMenuOpenKey(ev)) {
+      const { onMenuClick } = this.props;
+      if (onMenuClick) {
+        onMenuClick(ev, this);
+      }
+
       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 9908bc87ff259..1cb5271596161 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
@@ -76,7 +76,7 @@ describe('Button', () => {
   describe('DefaultButton', () => {
     function renderIntoDocument(element: React.ReactElement<any>): HTMLElement {
       const component = ReactTestUtils.renderIntoDocument(element);
-      const renderedDOM: Element = ReactDOM.findDOMNode(component as React.ReactInstance);
+      const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
       return renderedDOM as HTMLElement;
     }
 
@@ -84,7 +84,7 @@ describe('Button', () => {
       const button = ReactTestUtils.renderIntoDocument<any>(
         <DefaultButton>Hello</DefaultButton>
       );
-      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance) as Element;
       expect(renderedDOM.tagName).toEqual('BUTTON');
     });
 
@@ -94,7 +94,7 @@ describe('Button', () => {
       const button = ReactTestUtils.renderIntoDocument<any>(
         <DefaultButton onClick={ onClick }>Hello</DefaultButton>
       );
-      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance) as Element;
       expect(renderedDOM.tagName).toEqual('BUTTON');
     });
 
@@ -102,7 +102,7 @@ describe('Button', () => {
       const button = ReactTestUtils.renderIntoDocument<any>(
         <DefaultButton href='http://www.microsoft.com' target='_blank'>Hello</DefaultButton>
       );
-      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance) as Element;
       expect(renderedDOM.tagName).toEqual('A');
     });
 
@@ -259,7 +259,7 @@ describe('Button', () => {
           } }
         />
       );
-      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance) as Element;
       expect(renderedDOM.tagName).not.toEqual('DIV');
     });
 
@@ -287,7 +287,7 @@ describe('Button', () => {
           } }
         />
       );
-      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance) as Element;
 
       ReactTestUtils.Simulate.keyDown(menuButtonDOM, { which: KeyCodes.enter });
 
@@ -320,7 +320,7 @@ describe('Button', () => {
           } }
         />
       );
-      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance) as Element;
       const primaryButtonDOM: HTMLDivElement = renderedDOM.getElementsByTagName('div')[0] as HTMLDivElement;
 
       ReactTestUtils.Simulate.keyDown(primaryButtonDOM, { which: KeyCodes.enter });
@@ -351,7 +351,7 @@ describe('Button', () => {
           } }
         />
       );
-      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance) as Element;
       expect(renderedDOM.tagName).toEqual('DIV');
     });
 
@@ -378,7 +378,7 @@ describe('Button', () => {
           } }
         />
       );
-      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance) as Element;
       const menuButtonDOM: HTMLButtonElement = renderedDOM.getElementsByTagName('button')[1] as HTMLButtonElement;
       ReactTestUtils.Simulate.click(menuButtonDOM);
       expect(renderedDOM.getAttribute('aria-expanded')).toEqual('true');
@@ -406,7 +406,7 @@ describe('Button', () => {
           } }
         />
       );
-      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance) as Element;
 
       ReactTestUtils.Simulate.keyDown(menuButtonDOM,
         {
@@ -437,7 +437,7 @@ describe('Button', () => {
           } }
         />
       );
-      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance) as Element;
 
       ReactTestUtils.Simulate.keyDown(menuButtonDOM,
         {
diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.tsx b/packages/office-ui-fabric-react/src/components/Button/Button.tsx
index 06772743f94da..17a4c5764e144 100644
--- a/packages/office-ui-fabric-react/src/components/Button/Button.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/Button.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import { BaseComponent, warn } from '../../Utilities';
 import { ButtonType, IButtonProps } from './Button.types';
@@ -28,7 +26,7 @@ export class Button extends BaseComponent<IButtonProps, {}> {
     );
   }
 
-  public render() {
+  public render(): JSX.Element {
     const props = this.props;
 
     switch (props.buttonType) {
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 bf875046469f5..2bae1a569d29b 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
@@ -234,6 +234,15 @@ export interface IButtonProps extends React.AllHTMLAttributes<HTMLAnchorElement
   * 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;
+
+  /**
+   * Menu will not be created or destroyed when opened or closed, instead it
+   * will be hidden. This will improve perf of the menu opening but could potentially
+   * impact overall perf by having more elemnts in the dom. Should only be used
+   * when perf is important.
+   * Note: This may increase the amount of time it takes for the button itself to mount.
+   */
+  persistMenu?: boolean;
 }
 
 export enum ElementType {
@@ -504,9 +513,4 @@ export interface IButtonStyles {
    * Style override for the SplitButton FlexContainer.
    */
   splitButtonFlexContainer?: IStyle;
-
-  /**
-   * Style override for focus on the the SplitButton Container
-   */
-  splitButtonFlexContainerFocus?: IStyle;
 }
\ No newline at end of file
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 37e2643a4a00c..894e13ef4646c 100644
--- a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
@@ -3,7 +3,8 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 import { ButtonStatus } from './Button.checklist';
 import { ButtonDefaultExample } from './examples/Button.Default.Example';
@@ -18,7 +19,6 @@ import { ButtonSwapExample } from './examples/Button.Swap.Example';
 import { ButtonSplitExample, ButtonSplitCustomExample } from './examples/Button.Split.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
-import { Link } from '../../Link';
 import * as exampleStylesImport from '../../common/_exampleStyles.scss';
 const exampleStyles: any = exampleStylesImport;
 
@@ -67,11 +67,12 @@ export class ButtonPage extends React.Component<IComponentDemoPageProps, IButton
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
-        title={ 'Button' }
+        title='Button'
         componentName='ButtonExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Button'
         exampleCards={
           <div>
             <Checkbox
@@ -135,43 +136,22 @@ export class ButtonPage extends React.Component<IComponentDemoPageProps, IButton
           />
         }
         overview={
-          <div>
-            <p>Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.</p>
-            <p>When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.</p>
-            <p>While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.</p>
-            <p>Note that both iconProps and menuIconProps take <Link href='#/components/icon'>IIconProps</Link> to specify name and type.</p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Make sure the label conveys a clear purpose of the button to the user.</li>
-              <li>Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels, usually a single word.</li>
-              <li>Buttons should always include a noun if there is any room for interpretation about what the verb operates on.</li>
-              <li>Consider the affect localization will have on the button and what will happen to components around it.</li>
-              <li>If the button’s label content is dynamic, consider how the button will resize and what will happen to components around it.</li>
-              <li>Use only a single line of text in the label of the button.</li>
-              <li>Expose only one or two buttons to the user at a time, for example, "Accept" and "Cancel". If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, with a single command button to trigger those actions.</li>
-              <li>Show only one primary button that inherits theme color at rest state. In the event there are more than two buttons with equal priority, all buttons should have neutral backgrounds.</li>
-              <li>"Submit", "OK", and "Apply" buttons should always be styled as primary buttons. When "Reset" or "Cancel" buttons appear alongside one of the above, they should be styled as secondary buttons.</li>
-              <li>Default buttons should always perform safe operations. For example, a default button should never delete.</li>
-              <li>Use task buttons to cause actions that complete a task or cause a transitional task. Do not use buttons to toggle other UX in the same context. For example, a button may be used to open an interface area but should not be used to open an additional set of components in the same interface.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don't use generic labels like "Ok," especially in the case of an error; errors are never "Ok."</li>
-              <li>Don’t place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the "safe act" and retains the content (i.e. "Save") or cancels the action (i.e. "Cancel").</li>
-              <li>Don’t use a button to navigate to another place, use a link instead. The exception is in a wizard where "Back" and "Next" buttons may be used.</li>
-              <li>Don’t put too much text in a button - try to keep the length of your text to a minimum.</li>
-              <li>Don't put anything other than text in a button.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
@@ -183,13 +163,13 @@ export class ButtonPage extends React.Component<IComponentDemoPageProps, IButton
     );
   }
 
-  private _onDisabledChanged(ev: React.MouseEvent<HTMLElement>, disabled: boolean) {
+  private _onDisabledChanged(ev: React.MouseEvent<HTMLElement>, disabled: boolean): void {
     this.setState({
       areButtonsDisabled: disabled
     });
   }
 
-  private _onToggledChanged(ev: React.MouseEvent<HTMLElement>, toggled: boolean) {
+  private _onToggledChanged(ev: React.MouseEvent<HTMLElement>, toggled: boolean): void {
     this.setState({
       areButtonsChecked: toggled
     });
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 c5b55c2678e0d..d2a94188f742c 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
@@ -11,7 +11,7 @@ export class CommandBarButton extends BaseComponent<IButtonProps, {}> {
    */
   protected _shouldUpdateComponentRef = false;
 
-  public render() {
+  public render(): JSX.Element {
     const { styles, theme } = this.props;
 
     return (
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 96cd9e73660a7..96aaf94ed664d 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
@@ -11,7 +11,7 @@ export class CompoundButton extends BaseComponent<IButtonProps, {}> {
    */
   protected _shouldUpdateComponentRef = false;
 
-  public render() {
+  public render(): JSX.Element {
     const { primary = false, styles, theme } = this.props;
     return (
       <BaseButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx
index c11510b10f3c9..08551ced3a3fb 100644
--- a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx
@@ -11,7 +11,7 @@ export class DefaultButton extends BaseComponent<IButtonProps, {}> {
    */
   protected _shouldUpdateComponentRef = false;
 
-  public render() {
+  public render(): JSX.Element {
     const { primary = false, styles, theme } = this.props;
 
     return (
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 775ecceba5cc6..6612ed87bfa05 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
@@ -11,7 +11,7 @@ export class IconButton extends BaseComponent<IButtonProps, {}> {
    */
   protected _shouldUpdateComponentRef = false;
 
-  public render() {
+  public render(): JSX.Element {
     const { styles, theme } = this.props;
 
     return (
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 c59d000ab98a1..3c5e0345f0423 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
@@ -7,7 +7,7 @@ import { getStyles } from './MessageBarButton.styles';
 @customizable('MessageBarButton', ['theme'])
 export class MessageBarButton extends BaseComponent<IButtonProps, {}> {
 
-  public render() {
+  public render(): JSX.Element {
     const { styles, theme } = this.props;
 
     return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx
index c633f9c4a7031..58ec54fcdb1a7 100644
--- a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx
@@ -10,7 +10,7 @@ export class PrimaryButton extends BaseComponent<IButtonProps, {}> {
    */
   protected _shouldUpdateComponentRef = false;
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <DefaultButton
         { ...this.props }
diff --git a/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md
new file mode 100644
index 0000000000000..28f24d35ced71
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md
@@ -0,0 +1,5 @@
+- Don't use generic labels like "Ok," especially in the case of an error; errors are never "Ok."
+- Don’t place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the "safe act" and retains the content (i.e. "Save") or cancels the action (i.e. "Cancel").
+- Don’t use a button to navigate to another place, use a link instead. The exception is in a wizard where "Back" and "Next" buttons may be used.
+- Don’t put too much text in a button - try to keep the length of your text to a minimum.
+- Don't put anything other than text in a button.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDos.md b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDos.md
new file mode 100644
index 0000000000000..e6ad43b773a40
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonDos.md
@@ -0,0 +1,11 @@
+- Make sure the label conveys a clear purpose of the button to the user.
+- Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels, usually a single word.
+- Buttons should always include a noun if there is any room for interpretation about what the verb operates on.
+- Consider the affect localization will have on the button and what will happen to components around it.
+- If the button’s label content is dynamic, consider how the button will resize and what will happen to components around it.
+- Use only a single line of text in the label of the button.
+- Expose only one or two buttons to the user at a time, for example, "Accept" and "Cancel". If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, with a single command button to trigger those actions.
+- Show only one primary button that inherits theme color at rest state. In the event there are more than two buttons with equal priority, all buttons should have neutral backgrounds.
+- "Submit", "OK", and "Apply" buttons should always be styled as primary buttons. When "Reset" or "Cancel" buttons appear alongside one of the above, they should be styled as secondary buttons.
+- Default buttons should always perform safe operations. For example, a default button should never delete.
+- Use task buttons to cause actions that complete a task or cause a transitional task. Do not use buttons to toggle other UX in the same context. For example, a button may be used to open an interface area but should not be used to open an additional set of components in the same interface.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md
new file mode 100644
index 0000000000000..07e7c69b1a686
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md
@@ -0,0 +1,7 @@
+Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.
+
+When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.
+
+While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.
+
+Note that both iconProps and menuIconProps take <a href='#/components/icon'>IIconProps</a> to specify name and type.
\ No newline at end of file
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 dd8603446821a..cb59b41399533 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
@@ -15,7 +15,7 @@ export class ButtonActionExample extends React.Component<IButtonProps> {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
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 09a462ec6a688..5bdbe2a5a8917 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
@@ -11,7 +11,7 @@ import {
 } from 'office-ui-fabric-react/lib/Button';
 
 export class ButtonAnchorExample extends React.Component<IButtonProps> {
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
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 4617d5420cb86..acbdf45e089d8 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
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CommandButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class ButtonCommandExample extends React.Component<IButtonProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     return (
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 c1ba4cf865759..295b9974150eb 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
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CommandBarButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class ButtonCommandBarExample extends React.Component<IButtonProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     return (
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 19a42f41c4c63..bd284ccc3d3f5 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
@@ -16,7 +16,7 @@ export class ButtonCompoundExample extends React.Component<IButtonProps> {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
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 31aff85d1f4cd..5675c885040d4 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
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class ButtonContextualMenuExample extends React.Component<IButtonProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     return (
@@ -27,8 +27,9 @@ export class ButtonContextualMenuExample extends React.Component<IButtonProps, {
                   key: 'calendarEvent',
                   name: 'Calendar event',
                   icon: 'Calendar'
-                }
-              ]
+                },
+              ],
+              directionalHintFixed: true
             }
             }
           />
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 7e145591eefde..83de1f76fa67f 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
@@ -9,7 +9,7 @@ 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() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
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 bcd33745f2ad7..135731af03772 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
@@ -8,7 +8,7 @@ import {
 import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class ButtonIconExample extends React.Component<IButtonProps> {
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
@@ -23,6 +23,7 @@ export class ButtonIconExample extends React.Component<IButtonProps> {
           title='Emoji'
           ariaLabel='Emoji'
         />
+        <p>For a list of Icons, visit our <a href='https://developer.microsoft.com/en-us/fabric#/styles/icons'>Icon documentation</a>.</p>
       </div>
     );
   }
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 fcc150fa3fd13..253e75f431bc8 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
@@ -8,7 +8,7 @@ import {
 import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class ButtonPrimaryExample extends React.Component<IButtonProps> {
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
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 ceccbf0b51c1d..5cd9502c361f7 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
@@ -8,7 +8,7 @@ import {
 import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class ButtonScreenReaderExample extends React.Component<IButtonProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
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 3ab322885eda6..63ae1632d8ccf 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
@@ -15,7 +15,7 @@ const alertClicked = (): void => {
 
 export class ButtonSplitExample extends React.Component<IButtonProps> {
 
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
@@ -139,7 +139,7 @@ export class ButtonSplitExample extends React.Component<IButtonProps> {
 
 export class ButtonSplitCustomExample extends React.Component<IButtonProps> {
 
-  public render() {
+  public render(): JSX.Element {
     const { disabled, checked } = this.props;
     const customSplitButtonStyles = getCustomSplitButtonStyles();
 
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 e91de6bf13f39..80061d9aa3dee 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
@@ -39,7 +39,7 @@ export class ButtonSwapExample extends React.Component<IButtonProps, IButtonSwap
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isPrimary } = this.state;
     const { disabled, checked } = this.props;
     const text = 'Swap';
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 6616d450c70a4..f44ab13a7ce20 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import * as ReactTestUtils from 'react-dom/test-utils';
 import * as renderer from 'react-test-renderer';
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 6d999bf54e92f..c7f0ddb44012e 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
@@ -92,7 +92,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     this._focusOnUpdate = false;
   }
 
-  public componentWillReceiveProps(nextProps: ICalendarProps) {
+  public componentWillReceiveProps(nextProps: ICalendarProps): void {
     const { autoNavigateOnSelection, value, today = new Date() } = nextProps;
 
     // Make sure auto-navigation is supported for programmatic changes to selected date, i.e.,
@@ -109,19 +109,19 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     });
   }
 
-  public componentDidUpdate() {
+  public componentDidUpdate(): void {
     if (this._focusOnUpdate) {
       // if the day picker is shown, focus on it
-      if (this._dayPicker.value) {
-        this._dayPicker.value.focus();
-      } else if (this._monthPicker.value) {
-        this._monthPicker.value.focus();
+      if (this._dayPicker.current) {
+        this._dayPicker.current.focus();
+      } else if (this._monthPicker.current) {
+        this._monthPicker.current.focus();
       }
       this._focusOnUpdate = false;
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const rootClass = 'ms-DatePicker';
     const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate } = this.props;
     const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state;
@@ -204,8 +204,8 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
   }
 
   public focus() {
-    if (this._dayPicker.value) {
-      this._dayPicker.value.focus();
+    if (this._dayPicker.current) {
+      this._dayPicker.current.focus();
     }
   }
 
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 7907ad60de58e..60cafbab4a897 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
@@ -95,13 +95,13 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     this._onSelectPrevMonth = this._onSelectPrevMonth.bind(this);
   }
 
-  public componentWillReceiveProps(nextProps: ICalendarDayProps) {
+  public componentWillReceiveProps(nextProps: ICalendarDayProps): void {
     this.setState({
       weeks: this._getWeeks(nextProps)
     });
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { activeDescendantId, weeks } = this.state;
     const { firstDayOfWeek, strings, navigatedDate, selectedDate, dateRangeType, navigationIcons, showWeekNumbers, firstWeekOfYear, dateTimeFormatter, minDate, maxDate } = this.props;
     const dayPickerId = getId('DatePickerDay-dayPicker');
@@ -288,7 +288,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     }
   }
 
-  private _findCornerIndexes(week: IDayInfo[]) {
+  private _findCornerIndexes(week: IDayInfo[]): number[] {
 
     const cornerIndexes = [];
 
@@ -314,7 +314,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     cornerIndexes: number[],
     singleCornerStyle: string,
     leftCornerStyle: string,
-    rightCornerStyle: string) {
+    rightCornerStyle: string): void {
 
     const cornersLength = cornerIndexes.length;
     if (cornersLength > 0) {
@@ -347,7 +347,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     }
   }
 
-  private _getWeekCornerStyles(weeks: IDayInfo[][]) {
+  private _getWeekCornerStyles(weeks: IDayInfo[][]): IWeekCorners {
 
     const weekCornersStyled: any = {};
     const numberOfWeeks = weeks.length;
@@ -375,13 +375,13 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     return weekCornersStyled;
   }
 
-  private _getHighlightedCornerStyle(weekCorners: IWeekCorners, dayIndex: number, weekIndex: number) {
+  private _getHighlightedCornerStyle(weekCorners: IWeekCorners, dayIndex: number, weekIndex: number): string {
     const cornerStyle = weekCorners[weekIndex + '_' + dayIndex] ? weekCorners[weekIndex + '_' + dayIndex] : '';
 
     return cornerStyle;
   }
 
-  private _navigateMonthEdge(ev: React.KeyboardEvent<HTMLElement>, date: Date, weekIndex: number, dayIndex: number) {
+  private _navigateMonthEdge(ev: React.KeyboardEvent<HTMLElement>, date: Date, weekIndex: number, dayIndex: number): void {
     const { minDate, maxDate } = this.props;
     let targetDate: Date | undefined = undefined;
 
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 c8058f76f7898..6dcb482316182 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
@@ -52,7 +52,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
     this._onSelectMonth = this._onSelectMonth.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
 
     const { navigatedDate, strings, today, highlightCurrentMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props;
     const leftNavigationIcon = navigationIcons.leftNavigation;
@@ -157,7 +157,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
     }
   }
 
-  private _isCurrentMonth(month: number, year: number, today: Date) {
+  private _isCurrentMonth(month: number, year: number, today: Date): boolean {
     return today.getFullYear() === year && today.getMonth() === month;
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx
index b360902469275..3beb5f7fc4914 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx
@@ -3,7 +3,8 @@ import {
   ComponentPage,
   ExampleCard,
   IComponentDemoPageProps,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 import { DateRangeType, DayOfWeek } from 'office-ui-fabric-react/lib/Calendar';
 import { CalendarButtonExample } from './examples/Calendar.Button.Example';
@@ -16,12 +17,13 @@ const CalendarButtonExampleCode = require('!raw-loader!office-ui-fabric-react/sr
 const CalendarInlineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx') as string;
 
 export class CalendarPage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     const today = new Date(Date.now());
     return (
       <ComponentPage
-        title={ 'Calendar' }
+        title='Calendar'
         componentName='CalendarExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Calendar'
         exampleCards={
           <div>
             <ExampleCard title='Inline Calendar' code={ CalendarInlineExampleCode }>
@@ -167,40 +169,27 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
           />
         }
         overview={
-          <div>
-            <p>
-              The calendar component allows a user to browse through a calendar and pick a date value.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use the control as a single entity.</li>
-              <li>Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference).</li>
-              <li>The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate.</li>
-              <li>When the control is engaged, the Calendar renders as a flyout and has defined widths (300px -narrow and 440px – wide). Plan your UI implementation accordingly.</li>
-              <li>The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar.</li>
-              <li>Don't attempt to force resize the control in any way.</li>
-              <li>Don't force the control to render one mode vs. the other (year or month/day)</li>
-              <li>The flyout selector is a light dismiss control. Don't modify this behavior in any way.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...CalendarStatus}
+            { ...CalendarStatus }
           />
         }
       />
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 da925f1c91474..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
@@ -91,7 +91,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
               aria-labelledby={undefined}
               className="ms-FocusZone"
               data-focuszone-id="FocusZone12"
-              onClick={[Function]}
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -959,7 +958,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
               aria-labelledby={undefined}
               className="ms-FocusZone"
               data-focuszone-id="FocusZone13"
-              onClick={[Function]}
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md
new file mode 100644
index 0000000000000..85f2b8d624707
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md
@@ -0,0 +1,4 @@
+- Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar.
+- Don't attempt to force resize the control in any way.
+- Don't force the control to render one mode vs. the other (year or month/day)
+- The flyout selector is a light dismiss control. Don't modify this behavior in any way.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md
new file mode 100644
index 0000000000000..1ce606e7118c0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md
@@ -0,0 +1,5 @@
+- Use the control as a single entity.
+- Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference).
+- The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate.
+- When the control is engaged, the Calendar renders as a flyout and has defined widths (300px -narrow and 440px – wide). Plan your UI implementation accordingly.
+- The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md
new file mode 100644
index 0000000000000..9cf4fbf40ffa9
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md
@@ -0,0 +1 @@
+The calendar component allows a user to browse through a calendar and pick a date value.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx
index 0bfa49659fd2d..66fd441b4e228 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx
@@ -96,7 +96,7 @@ export class CalendarButtonExample extends React.Component<ICalendarButtonExampl
     this._onSelectDate = this._onSelectDate.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <div ref={ (calendarBtn) => this._calendarButtonElement = calendarBtn! }>
@@ -134,21 +134,21 @@ export class CalendarButtonExample extends React.Component<ICalendarButtonExampl
     );
   }
 
-  private _onClick(event: any) {
+  private _onClick(event: any): void {
     this.setState((prevState: ICalendarButtonExampleState) => {
       prevState.showCalendar = !prevState.showCalendar;
       return prevState;
     });
   }
 
-  private _onDismiss() {
+  private _onDismiss(): void {
     this.setState((prevState: ICalendarButtonExampleState) => {
       prevState.showCalendar = false;
       return prevState;
     });
   }
 
-  private _onSelectDate(date: Date) {
+  private _onSelectDate(date: Date): void {
     this.setState((prevState: ICalendarButtonExampleState) => {
       prevState.showCalendar = false;
       prevState.selectedDate = date;
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 2441e519a53c2..ab0091063ea14 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
@@ -62,8 +62,8 @@ const DayPickerStrings = {
 };
 
 export interface ICalendarInlineExampleState {
-  selectedDate: Date | null;
-  selectedDateRange: Date[] | null;
+  selectedDate?: Date | null;
+  selectedDateRange?: Date[] | null;
 }
 
 export interface ICalendarInlineExampleProps {
@@ -98,7 +98,7 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
     this._goPrevious = this._goPrevious.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const divStyle: React.CSSProperties = {
       height: '340px'
     };
@@ -158,13 +158,13 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
     );
   }
 
-  private _onDismiss() {
+  private _onDismiss(): void {
     this.setState((prevState: ICalendarInlineExampleState) => {
       return prevState;
     });
   }
 
-  private _goPrevious() {
+  private _goPrevious(): void {
     this.setState((prevState: ICalendarInlineExampleState) => {
       const selectedDate = prevState.selectedDate || new Date();
       const dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday);
@@ -178,24 +178,31 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
       }
 
       const newSelectedDate = addDays(subtractFrom, -daysToSubtract);
-      return prevState.selectedDate = newSelectedDate;
+
+      return {
+        selectedDate: newSelectedDate
+      };
     });
   }
 
-  private _goNext() {
+  private _goNext(): void {
     this.setState((prevState: ICalendarInlineExampleState) => {
       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;
+
+      return {
+        selectedDate: newSelectedDate
+      };
     });
   }
 
-  private _onSelectDate(date: Date, dateRangeArray: Date[]) {
+  private _onSelectDate(date: Date, dateRangeArray: Date[]): void {
     this.setState((prevState: ICalendarInlineExampleState) => {
-      prevState.selectedDate = date;
-      prevState.selectedDateRange = dateRangeArray;
-      return prevState;
+      return {
+        selectedDate: date,
+        selectedDateRange: dateRangeArray
+      };
     });
   }
 }
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 07bf90be3eb67..737428170c92b 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import { BaseComponent } from '../../Utilities';
 import { ICalloutProps } from './Callout.types';
@@ -19,7 +17,7 @@ export class Callout extends BaseComponent<ICalloutProps, ICalloutState> {
     });
   }
 
-  public render() {
+  public render(): JSX.Element {
     const content = (
       <CalloutContent { ...this.props } />
     );
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 5aeb79567d334..bedfebac1a961 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
@@ -240,6 +240,7 @@ export interface ICalloutContentStyleProps {
   overflowYHidden?: boolean;
 
   /**
+   * @deprecated will be removed in v6. Do not use.
    * Max height applied to the content of a callout.
    */
   contentMaxHeight?: number;
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 446700070bd86..807243c1ca152 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import {
   ICalloutProps,
   ICalloutContentStyleProps,
@@ -68,17 +66,17 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     directionalHint: DirectionalHint.bottomAutoEdge
   };
 
-  private _classNames: {[key in keyof ICalloutContentStyles]: string };
+  private _classNames: { [key in keyof ICalloutContentStyles]: string };
   private _didSetInitialFocus: boolean;
   private _hostElement = createRef<HTMLDivElement>();
   private _calloutElement = createRef<HTMLDivElement>();
   private _targetWindow: Window;
   private _bounds: IRectangle;
-  private _maxHeight: number | undefined;
   private _positionAttempts: number;
   private _target: Element | MouseEvent | IPoint | null;
   private _setHeightOffsetTimer: number;
   private _hasListeners = false;
+  private _maxHeight: number | undefined;
 
   constructor(props: ICalloutProps) {
     super(props);
@@ -114,7 +112,7 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     this._setTargetWindowAndElement(this._getTarget());
   }
 
-  public componentWillUpdate(newProps: ICalloutProps) {
+  public componentWillUpdate(newProps: ICalloutProps): void {
     // 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.
     const newTarget = this._getTarget(newProps);
     const oldTarget = this._getTarget();
@@ -136,15 +134,16 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
         positions: undefined
       });
     }
+
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     if (!this.props.hidden) {
       this._onComponentDidMount();
     }
   }
 
-  public render() {
+  public render(): JSX.Element | null {
     // If there is no target window then we are likely in server side rendering and we should not render anything.
     if (!this._targetWindow) {
       return null;
@@ -172,8 +171,8 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     target = this._getTarget();
     const { positions } = this.state;
 
-    const getContentMaxHeight: number = this._getMaxHeight() + this.state.heightOffset!;
-    const contentMaxHeight: number = calloutMaxHeight! && (calloutMaxHeight! < getContentMaxHeight) ? calloutMaxHeight! : getContentMaxHeight!;
+    const getContentMaxHeight: number | undefined = this._getMaxHeight() ? this._getMaxHeight()! + this.state.heightOffset! : undefined;
+    const contentMaxHeight: number | undefined = calloutMaxHeight! && getContentMaxHeight && (calloutMaxHeight! < getContentMaxHeight) ? calloutMaxHeight! : getContentMaxHeight!;
     const overflowYHidden = !!finalHeight;
 
     const beakVisible = isBeakVisible && (!!target);
@@ -184,7 +183,6 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
         className,
         overflowYHidden: overflowYHidden,
         calloutWidth,
-        contentMaxHeight,
         positions,
         beakWidth,
         backgroundColor,
@@ -192,7 +190,7 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
       }
     );
 
-    const overflowStyle: React.CSSProperties = overflowYHidden ? { overflowY: 'hidden' } : {};
+    const overflowStyle: React.CSSProperties = overflowYHidden ? { overflowY: 'hidden', maxHeight: contentMaxHeight } : { maxHeight: contentMaxHeight };
     const visibilityStyle: React.CSSProperties | undefined = this.props.hidden ? { visibility: 'hidden' } : undefined;
     // React.CSSProperties does not understand IRawStyle, so the inline animations will need to be cast as any for now.
     const content = (
@@ -254,7 +252,7 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
 
   protected _dismissOnLostFocus(ev: Event) {
     const target = ev.target as HTMLElement;
-    const clickedOutsideCallout = this._hostElement.value && !elementContains(this._hostElement.value, target);
+    const clickedOutsideCallout = this._hostElement.current && !elementContains(this._hostElement.current, target);
 
     if (
       (!this._target && clickedOutsideCallout) ||
@@ -267,9 +265,9 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
   }
 
   protected _setInitialFocus = (): void => {
-    if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions && this._calloutElement.value) {
+    if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions && this._calloutElement.current) {
       this._didSetInitialFocus = true;
-      this._async.requestAnimationFrame(() => focusFirstChild(this._calloutElement.value!));
+      this._async.requestAnimationFrame(() => focusFirstChild(this._calloutElement.current!));
     }
   }
 
@@ -307,7 +305,7 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     this._hasListeners = false;
   }
 
-  private _updateAsyncPosition() {
+  private _updateAsyncPosition(): void {
     this._async.requestAnimationFrame(() => this._updatePosition());
   }
 
@@ -325,10 +323,10 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     return beakPostionStyle;
   }
 
-  private _updatePosition() {
+  private _updatePosition(): void {
     const { positions } = this.state;
-    const hostElement: HTMLElement | null = this._hostElement.value;
-    const calloutElement: HTMLElement | null = this._calloutElement.value;
+    const hostElement: HTMLElement | null = this._hostElement.current;
+    const calloutElement: HTMLElement | null = this._calloutElement.current;
 
     if (hostElement && calloutElement) {
       let currentProps: IPositionProps | undefined;
@@ -376,7 +374,9 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     return this._bounds;
   }
 
-  private _getMaxHeight(): number {
+  // Max height should remain as synchronous as possible, which is why it is not done using set state.
+  // It needs to be synchronous since it will impact the ultimate position of the callout.
+  private _getMaxHeight(): number | undefined {
     if (!this._maxHeight) {
       if (this.props.directionalHintFixed && this._target) {
         const beakWidth = this.props.isBeakVisible ? this.props.beakWidth : 0;
@@ -384,7 +384,12 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
         // 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;
-        this._maxHeight = getMaxHeight(this._target, this.props.directionalHint!, totalGap, this._getBounds());
+        this._async.requestAnimationFrame(() => {
+          if (this._target) {
+            this._maxHeight = getMaxHeight(this._target, this.props.directionalHint!, totalGap, this._getBounds());
+            this.forceUpdate();
+          }
+        });
       } else {
         this._maxHeight = this._getBounds().height! - BORDER_WIDTH * 2;
       }
@@ -392,12 +397,12 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     return this._maxHeight!;
   }
 
-  private _arePositionsEqual(positions: ICalloutPositionedInfo, newPosition: ICalloutPositionedInfo) {
+  private _arePositionsEqual(positions: ICalloutPositionedInfo, newPosition: ICalloutPositionedInfo): boolean {
     return this._comparePositions(positions.elementPosition, newPosition.elementPosition) &&
       this._comparePositions(positions.beakPosition.elementPosition, newPosition.beakPosition.elementPosition);
   }
 
-  private _comparePositions(oldPositions: IPosition, newPositions: IPosition) {
+  private _comparePositions(oldPositions: IPosition, newPositions: IPosition): boolean {
     for (const key in newPositions) {
       // This needs to be checked here and below because there is a linting error if for in does not immediately have an if statement
       if (newPositions.hasOwnProperty(key)) {
@@ -440,9 +445,9 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
   }
 
   private _setHeightOffsetEveryFrame(): void {
-    if (this._calloutElement.value && this.props.finalHeight) {
+    if (this._calloutElement.current && this.props.finalHeight) {
       this._setHeightOffsetTimer = this._async.requestAnimationFrame(() => {
-        const calloutMainElem = this._calloutElement.value && this._calloutElement.value.lastChild as HTMLElement;
+        const calloutMainElem = this._calloutElement.current && this._calloutElement.current.lastChild as HTMLElement;
 
         if (!calloutMainElem) {
           return;
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 1ad35f6e42f52..3da6221681baf 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutPage.tsx
@@ -3,7 +3,8 @@ import {
   ComponentPage,
   ExampleCard,
   IComponentDemoPageProps,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 import { items } from '../CommandBar/examples/data';
 
@@ -20,13 +21,14 @@ const CalloutDirectionalExampleCode = require('!raw-loader!office-ui-fabric-reac
 const CalloutCoverExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx') as string;
 
 export class CalloutPage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     const cmdBarParamsTextAndIcons: any = { items: items, farItems: null };
 
     return (
       <ComponentPage
-        title={ 'Callout' }
+        title='Callout'
         componentName='CalloutExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Callout'
         exampleCards={
           <div>
             <ExampleCard title='Default Callout' code={ CalloutBasicExampleCode }>
@@ -54,47 +56,27 @@ export class CalloutPage extends React.Component<IComponentDemoPageProps, any> {
           </div>
         }
         overview={
-          <div>
-            <p>Callouts are a powerful way to simplify a user interface. They host tips and other information users need when they need it, with minimal effort on their part. Callouts can help you use screen space more effectively and reduce screen clutter. However, poorly designed Callouts can be annoying, distracting, unhelpful, overwhelming, or in the way.</p>
-
-            <p>Use a Callout for displaying additional contextual information about an item on the screen. Callouts also have a tail that identifies their source. A common use for Callout is the introduction of a new feature or capability of an app or site. Alternate usages include pairing the Callout with a button or clickable element for on-demand presentation of additional or supporting content.</p>
-
-            <p>Real-world examples of this implementation can be seen in administrative interfaces where a particularly difficult-to-understand concept is paired with the iconClassNames.info "i" icon. In this example, Callout - with its tip text - is opened when the user clicks on or hovers over the icon.</p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Callout/docs/CalloutOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use Callouts to introduce new concepts in an experience where highlighting specific pieces of the UI is necessary.</li>
-              <li>Do be concise with the information you provide inside of a Callout. Short sentences or sentence fragments are best.</li>
-              <li>Do be helpful with the tip text inside of your Callout.</li>
-              <li>Do limit the information inside of a Callout to supplemental information that users don't have to read.</li>
-              <li>Callouts should be placed near the object being described, usually at the pointer's tail or head if possible.</li>
-              <li>When additional context - or more advanced description - is necessary, consider placing a link to "Learn more" at the bottom of the Callout and opening the additional content in a new window or Panel when clicked.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Callout/docs/CalloutDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don’t overuse Callout without putting the user in control. Too many Callouts which open automatically can be perceived as interrupting workflow and are a bad user experience.</li>
-              <li>Don't use large, unformatted blocks of text in your Callout, they are difficult to read and overwhelming.</li>
-              <li>Don't put obvious tip text, or text that simply repeats what is already on the screen in your Callout.</li>
-              <li>Because the content inside of a Callout isn't always visible, don't put important or required information in a Callout.</li>
-              <li>Don’t block important UI with the placement of your Callout, it is a poor user experience that will lead to frustration.</li>
-              <li>Don’t open Callout from within another Callout.</li>
-              <li>Don’t use Callout to ask the user to confirm an action, use a Dialog instead.</li>
-              <li>Don’t show Callouts on hidden elements.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Callout/docs/CalloutDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...CalloutStatus}
+            { ...CalloutStatus }
           />
         }
       />
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 9c1f6c743845f..f75dbbbc908d9 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
@@ -45,7 +45,6 @@ exports[`Callout renders Callout correctly 1`] = `
           ms-Callout-main
           {
             background-color: #ffffff;
-            max-height: 750px;
             overflow-x: hidden;
             overflow-y: auto;
             position: relative;
@@ -55,6 +54,7 @@ exports[`Callout renders Callout correctly 1`] = `
       role={undefined}
       style={
         Object {
+          "maxHeight": 750,
           "overflowY": "auto",
         }
       }
diff --git a/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDonts.md b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDonts.md
new file mode 100644
index 0000000000000..6520cbea8d16c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDonts.md
@@ -0,0 +1,8 @@
+- Don’t overuse Callout without putting the user in control. Too many Callouts which open automatically can be perceived as interrupting workflow and are a bad user experience.
+- Don't use large, unformatted blocks of text in your Callout, they are difficult to read and overwhelming.
+- Don't put obvious tip text, or text that simply repeats what is already on the screen in your Callout.
+- Because the content inside of a Callout isn't always visible, don't put important or required information in a Callout.
+- Don’t block important UI with the placement of your Callout, it is a poor user experience that will lead to frustration.
+- Don’t open Callout from within another Callout.
+- Don’t use Callout to ask the user to confirm an action, use a Dialog instead.
+- Don’t show Callouts on hidden elements.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDos.md b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDos.md
new file mode 100644
index 0000000000000..865bc50ab5309
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDos.md
@@ -0,0 +1,6 @@
+- Use Callouts to introduce new concepts in an experience where highlighting specific pieces of the UI is necessary.
+- Do be concise with the information you provide inside of a Callout. Short sentences or sentence fragments are best.
+- Do be helpful with the tip text inside of your Callout.
+- Do limit the information inside of a Callout to supplemental information that users don't have to read.
+- Callouts should be placed near the object being described, usually at the pointer's tail or head if possible.
+- When additional context - or more advanced description - is necessary, consider placing a link to "Learn more" at the bottom of the Callout and opening the additional content in a new window or Panel when clicked.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutOverview.md b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutOverview.md
new file mode 100644
index 0000000000000..87e096317a2b5
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutOverview.md
@@ -0,0 +1,5 @@
+Callouts are a powerful way to simplify a user interface. They host tips and other information users need when they need it, with minimal effort on their part. Callouts can help you use screen space more effectively and reduce screen clutter. However, poorly designed Callouts can be annoying, distracting, unhelpful, overwhelming, or in the way.
+
+Use a Callout for displaying additional contextual information about an item on the screen. Callouts also have a tail that identifies their source. A common use for Callout is the introduction of a new feature or capability of an app or site. Alternate usages include pairing the Callout with a button or clickable element for on-demand presentation of additional or supporting content.
+
+Real-world examples of this implementation can be seen in administrative interfaces where a particularly difficult-to-understand concept is paired with the iconClassNames.info "i" icon. In this example, Callout - with its tip text - is opened when the user clicks on or hovers over the icon.
\ No newline at end of file
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 ead62ce067926..a3c3f641730fd 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
@@ -2,33 +2,72 @@ import * as React from 'react';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { Callout } from 'office-ui-fabric-react/lib/Callout';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import './CalloutExample.scss';
+import { getTheme, FontWeights, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
 
-export interface ICalloutBaiscExampleState {
+export interface ICalloutBasicExampleState {
   isCalloutVisible?: boolean;
 }
 
-export class CalloutBasicExample extends React.Component<{}, ICalloutBaiscExampleState> {
+// Themed styles for the example.
+const theme = getTheme();
+const styles = mergeStyleSets({
+  buttonArea: {
+    verticalAlign: 'top',
+    display: 'inline-block',
+    textAlign: 'center'
+  },
+  callout: {
+    maxWidth: 300
+  },
+  header: {
+    padding: '18px 24px 12px'
+  },
+  title: [
+    theme.fonts.xLarge,
+    {
+      margin: 0,
+      color: theme.palette.neutralPrimary,
+      fontWeight: FontWeights.semilight
+    }
+  ],
+  inner: {
+    height: '100%',
+    padding: '0 24px 20px'
+  },
+  actions: {
+    position: 'relative',
+    marginTop: 20,
+    width: '100%',
+    whiteSpace: 'nowrap'
+  },
+  link: [
+    theme.fonts.medium,
+    {
+      color: theme.palette.neutralPrimary
+    }
+  ]
+});
+
+// Example code
+export class CalloutBasicExample extends React.Component<{}, ICalloutBasicExampleState> {
   private _menuButtonElement: HTMLElement | null;
 
   public constructor(props: {}) {
     super(props);
 
-    this._onShowMenuClicked = this._onShowMenuClicked.bind(this);
-    this._onCalloutDismiss = this._onCalloutDismiss.bind(this);
-
     this.state = {
       isCalloutVisible: false
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isCalloutVisible } = this.state;
 
     return (
-      <div className='ms-CalloutExample'>
-        <div className='ms-CalloutBasicExample-buttonArea' ref={ (menuButton) => this._menuButtonElement = menuButton }>
+      <div>
+        <div className={ styles.buttonArea }>
           <DefaultButton
+            id='toggleCallout'
             onClick={ this._onShowMenuClicked }
             text={ isCalloutVisible ? 'Hide callout' : 'Show callout' }
           />
@@ -64,13 +103,13 @@ export class CalloutBasicExample extends React.Component<{}, ICalloutBaiscExampl
     );
   }
 
-  private _onShowMenuClicked() {
+  private _onShowMenuClicked = (): void => {
     this.setState({
       isCalloutVisible: !this.state.isCalloutVisible
     });
   }
 
-  private _onCalloutDismiss() {
+  private _onCalloutDismiss = (): void => {
     this.setState({
       isCalloutVisible: false
     });
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 7ab156a067e62..9766fe9c334e9 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
@@ -42,7 +42,7 @@ export class CalloutCoverExample extends React.Component<{}, ICalloutCoverExampl
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     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 (
@@ -90,17 +90,17 @@ export class CalloutCoverExample extends React.Component<{}, ICalloutCoverExampl
     );
   }
 
-  private _onDismiss() {
+  private _onDismiss(): void {
     this.setState({ isCalloutVisible: false });
   }
 
-  private _onShowMenuClicked() {
+  private _onShowMenuClicked(): void {
     this.setState({
       isCalloutVisible: !this.state.isCalloutVisible
     });
   }
 
-  private _onDirectionalChanged(option: IDropdownOption) {
+  private _onDirectionalChanged(option: IDropdownOption): void {
     this.setState({
       directionalHint: option.key as number
     });
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 d919a218c3383..3b15711380102 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
@@ -47,7 +47,7 @@ export class CalloutDirectionalExample extends React.Component<{}, ICalloutDirec
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     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 (
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 f314cac7c8e3e..ab4ab4ba1bee5 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
@@ -23,7 +23,7 @@ export class CalloutNestedExample extends React.Component<ICalloutNestedExampleP
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isCalloutVisible } = this.state;
 
     return (
@@ -65,7 +65,7 @@ export class CalloutNestedExample extends React.Component<ICalloutNestedExampleP
     );
   }
 
-  private _onDismiss(ev: any) {
+  private _onDismiss(ev: any): void {
     this.setState({
       isCalloutVisible: !this.state.isCalloutVisible
     });
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
index 98086779c03fd..67f990ae9512a 100644
--- a/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx
@@ -20,7 +20,7 @@ export class CheckBase extends BaseComponent<ICheckProps, {}> {
     checked: false
   };
 
-  public shouldComponentUpdate(newProps: ICheckProps) {
+  public shouldComponentUpdate(newProps: ICheckProps): boolean {
     return this.props.checked !== newProps.checked;
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx
index 30d0fdcea818c..30888e2f88819 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx
@@ -27,7 +27,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     boxSide: 'start'
   };
 
-  private _checkBox = createRef<HTMLInputElement>();
+  private _checkBox = createRef<HTMLElement>();
   private _id: string;
   private _classNames: ICheckboxClassNames;
 
@@ -49,7 +49,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     };
   }
 
-  public componentWillReceiveProps(newProps: ICheckboxProps) {
+  public componentWillReceiveProps(newProps: ICheckboxProps): void {
     if (newProps.checked !== undefined) {
       this.setState({
         isChecked: !!newProps.checked // convert null to false
@@ -131,12 +131,12 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
   }
 
   public focus(): void {
-    if (this._checkBox.value) {
-      this._checkBox.value.focus();
+    if (this._checkBox.current) {
+      this._checkBox.current.focus();
     }
   }
 
-  private _onFocus = (ev: React.FocusEvent<HTMLInputElement>): void => {
+  private _onFocus = (ev: React.FocusEvent<HTMLElement>): void => {
     const { inputProps } = this.props;
 
     if (inputProps && inputProps.onFocus) {
@@ -144,7 +144,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     }
   }
 
-  private _onBlur = (ev: React.FocusEvent<HTMLInputElement>): void => {
+  private _onBlur = (ev: React.FocusEvent<HTMLElement>): void => {
     const { inputProps } = this.props;
 
     if (inputProps && inputProps.onBlur) {
@@ -152,7 +152,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     }
   }
 
-  private _onClick = (ev: React.FormEvent<HTMLButtonElement>): void => {
+  private _onClick = (ev: React.FormEvent<HTMLElement>): void => {
     const { disabled, onChange } = this.props;
     const { isChecked } = this.state;
     ev.preventDefault();
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts
index b1d8aebafba1f..fc7490353aa0c 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts
@@ -32,6 +32,7 @@ export const getStyles = memoizeFunction((
   const styles: ICheckboxStyles = {
     root: [
       getFocusStyle(theme, -2),
+      theme.fonts.medium,
       {
         padding: '0',
         border: 'none',
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx
index dad989bd8097f..c9062e45d831b 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/CheckboxPage.tsx
@@ -3,7 +3,8 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 import { CheckboxBasicExample } from './examples/Checkbox.Basic.Example';
 import { CheckboxImplementationExamples } from './examples/Checkbox.ImplementationExamples';
@@ -14,11 +15,12 @@ const CheckboxBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src
 const CheckboxImplementationExamplesCode = require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx') as string;
 
 export class CheckboxPage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
-        title={ 'Checkbox' }
+        title='Checkbox'
         componentName='CheckboxExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Checkbox'
         exampleCards={
           <div>
             <ExampleCard
@@ -44,51 +46,27 @@ export class CheckboxPage extends React.Component<IComponentDemoPageProps, any>
           />
         }
         overview={
-          <div>
-            <p>
-              A Checkbox is a UI element that allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control.
-            </p>
-
-            <p>
-              A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has two selection states: unselected and selected.
-            </p>
-
-            <p>
-              Use a single Checkbox for a subordinate setting, such as with a "Remember me?" login scenario or with a terms of service agreement.
-            </p>
-
-            <p>
-              For a binary choice, the main difference between a Checkbox and a toggle switch is that the Checkbox is for status and the toggle switch is for action. You can delay committing a Checkbox interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction. Also, only Checkboxes allow for multi-selection.
-            </p>
-
-            <p>
-              Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Checkbox/docs/CheckboxOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Allow users to choose any combination of options when several Checkboxes are grouped together.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don't use a Checkbox as an on/off control. Instead use a toggle switch.</li>
-              <li>Don’t use a Checkbox when the user can choose only one option from the group, use radio buttons instead.</li>
-              <li>Don't put two groups of Checkboxes next to each other. Separate the two groups with labels.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...CheckboxStatus}
+            { ...CheckboxStatus }
           />
         }
       />
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 f4cc49943ab2c..4a61e21ac5077 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
@@ -13,10 +13,15 @@ exports[`Checkbox renders Checkbox correctly 1`] = `
       ms-Checkbox
       is-enabled
       {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
         background: none;
         border: none;
         cursor: pointer;
         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;
         margin-bottom: 0;
         margin-left: 0;
         margin-right: 0;
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDonts.md b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDonts.md
new file mode 100644
index 0000000000000..e99215b63aee3
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDonts.md
@@ -0,0 +1,3 @@
+- Don't use a Checkbox as an on/off control. Instead use a toggle switch.
+- Don’t use a Checkbox when the user can choose only one option from the group, use radio buttons instead.
+- Don't put two groups of Checkboxes next to each other. Separate the two groups with labels.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDos.md b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDos.md
new file mode 100644
index 0000000000000..8d33482977d33
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxDos.md
@@ -0,0 +1 @@
+- Allow users to choose any combination of options when several Checkboxes are grouped together.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxOverview.md b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxOverview.md
new file mode 100644
index 0000000000000..74e2b405f59c8
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/docs/CheckboxOverview.md
@@ -0,0 +1,9 @@
+A Checkbox is a UI element that allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control.
+
+A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has two selection states: unselected and selected.
+
+Use a single Checkbox for a subordinate setting, such as with a "Remember me?" login scenario or with a terms of service agreement.
+
+For a binary choice, the main difference between a Checkbox and a toggle switch is that the Checkbox is for status and the toggle switch is for action. You can delay committing a Checkbox interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction. Also, only Checkboxes allow for multi-selection.
+
+Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.
\ No newline at end of file
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 b92e108a7b1c1..4251dac686370 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
@@ -12,7 +12,7 @@ export class CheckboxBasicExample extends React.Component<{}, ICheckboxBasicExam
     this._onCheckboxChange = this._onCheckboxChange.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Checkbox
@@ -24,7 +24,7 @@ export class CheckboxBasicExample extends React.Component<{}, ICheckboxBasicExam
     );
   }
 
-  private _onCheckboxChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean) {
+  private _onCheckboxChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean): void {
     console.log(`The option has been changed to ${isChecked}.`);
   }
 }
\ No newline at end of file
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 16c81e39d6bf7..63356f6438067 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
@@ -25,7 +25,7 @@ export class CheckboxImplementationExamples extends React.Component<{}, ICheckbo
     this._onCheckboxChange = this._onCheckboxChange.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isChecked } = this.state;
 
     const styles: ICheckboxStyles = {
@@ -91,7 +91,7 @@ export class CheckboxImplementationExamples extends React.Component<{}, ICheckbo
     );
   }
 
-  private _onCheckboxChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean) {
+  private _onCheckboxChange(ev: React.FormEvent<HTMLElement>, isChecked: boolean): void {
     console.log(`The option has been changed to ${isChecked}.`);
   }
 
@@ -99,7 +99,7 @@ export class CheckboxImplementationExamples extends React.Component<{}, ICheckbo
     this.setState({ isChecked: checked! });
   }
 
-  private _renderPersonaLabel(props: ICheckboxProps) {
+  private _renderPersonaLabel(props: ICheckboxProps): JSX.Element {
     const DEFAULT_IMAGE_URL = '/_layouts/15/userphoto.aspx?size=S&accountname=';
     return <Persona primaryText={ props.label } imageUrl={ DEFAULT_IMAGE_URL } size={ PersonaSize.size32 } />;
   }
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 62bc6086d1d6e..1c6b798ad2b56 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
@@ -121,10 +121,18 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
   &:focus {
     &::before {
       border-color: $radioButton-border-hover-color;
+
+      @include high-contrast {
+        border-color: Highlight;
+      }
     }
 
     :global(.ms-Label) {
       color: $radioButton-text-hover-color;
+
+      @include high-contrast {
+        color: Highlight;
+      }
     }
   }
 
@@ -302,6 +310,11 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
       &:focus {
         border-color: $ms-color-neutralTertiaryAlt;
 
+        @include high-contrast {
+          border-color: Highlight;
+          color: Highlight;
+        }
+
         &::before {
           opacity: 1;
         }
@@ -367,10 +380,10 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
 :global(.ms-Fabric.is-focusVisible) .choiceFieldIsInFocus {
   &.choiceFieldIsImage .choiceFieldWrapper,
   &.choiceFieldIsIcon .choiceFieldWrapper {
-    @include focus-border(1px, $ms-color-neutralPrimary, 2px, false);
+    @include focus-border(-2px, $ms-color-neutralSecondary, 1px, false);
 
     @include high-contrast {
-      @include focus-border(1px, WindowText, 2px, false);
+      @include focus-border(-2px, WindowText, 1px, false);
     }
   }
 }
\ No newline at end of file
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 0e635f4f66c38..7748805c52eb5 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
@@ -50,7 +50,7 @@ describe('ChoiceGroup', () => {
     }
     expect(threwException).toEqual(false);
 
-    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance) as Element;
     const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     expect((choiceOptions[0] as HTMLInputElement).checked).toEqual(false);
@@ -97,7 +97,7 @@ describe('ChoiceGroup', () => {
     }
     expect(threwException).toEqual(false);
 
-    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance) as Element;
     const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     expect((choiceOptions[0] as HTMLInputElement).disabled).toEqual(true);
@@ -127,7 +127,7 @@ describe('ChoiceGroup', () => {
     }
     expect(threwException).toEqual(false);
 
-    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance) as Element;
     const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     expect((choiceOptions[0] as HTMLInputElement).disabled).toEqual(true);
@@ -142,7 +142,7 @@ describe('ChoiceGroup', () => {
         options={ TEST_OPTIONS }
       />
     );
-    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance) as Element;
     const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     expect((choiceOptions[0] as HTMLInputElement).checked).toEqual(true);
@@ -165,7 +165,7 @@ describe('ChoiceGroup', () => {
         onChange={ onChange }
       />
     );
-    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance) as Element;
     const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     expect((choiceOptions[0] as HTMLInputElement).checked).toEqual(true);
@@ -187,7 +187,7 @@ describe('ChoiceGroup', () => {
         onChange={ onChange }
       />
     );
-    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance) as Element;
     const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     const extraAttributeGetter: (index: number) => string | null = (index: number): string | null => {
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 ecc83d3b3cf3e..d08aa2d6fcaea 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
@@ -50,7 +50,7 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
     this._labelId = getId('ChoiceGroupLabel');
   }
 
-  public componentWillReceiveProps(newProps: IChoiceGroupProps) {
+  public componentWillReceiveProps(newProps: IChoiceGroupProps): void {
     const newKeyChecked = this._getKeyChecked(newProps);
     const oldKeyCheched = this._getKeyChecked(this.props);
 
@@ -61,7 +61,7 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { label, options, className, required } = this.props;
     const { keyChecked, keyFocused } = this.state;
 
@@ -137,8 +137,8 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
   }
 
   public focus() {
-    if (this._inputElement.value) {
-      this._inputElement.value.focus();
+    if (this._inputElement.current) {
+      this._inputElement.current.focus();
     }
   }
 
@@ -156,7 +156,7 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
     });
   }
 
-  private _onRenderField(option: IChoiceGroupOption) {
+  private _onRenderField(option: IChoiceGroupOption): JSX.Element {
 
     const { onRenderLabel } = option;
     const imageSize = option.imageSize ? option.imageSize : { width: 32, height: 32 };
@@ -242,7 +242,7 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
     );
   }
 
-  private _onChange(option: IChoiceGroupOption, evt: React.FormEvent<HTMLInputElement>) {
+  private _onChange(option: IChoiceGroupOption, evt: React.FormEvent<HTMLInputElement>): void {
     const { onChanged, onChange, selectedKey } = this.props;
 
     // Only manage state in uncontrolled scenarios.
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 d1c26163ae121..4c02dc4057ab0 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx
@@ -3,7 +3,8 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 import { ChoiceGroupBasicExample } from './examples/ChoiceGroup.Basic.Example';
 import { ChoiceGroupCustomExample } from './examples/ChoiceGroup.Custom.Example';
@@ -18,11 +19,12 @@ const ChoiceGroupImageExampleCode = require('!raw-loader!office-ui-fabric-react/
 const ChoiceGroupIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Icon.Example.tsx') as string;
 
 export class ChoiceGroupPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
-        title={ 'ChoiceGroup' }
+        title='ChoiceGroup'
         componentName='ChoiceGroupExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/ChoiceGroup'
         exampleCards={
           <div>
             <ExampleCard title='Default ChoiceGroup' code={ ChoiceGroupBasicExampleCode }>
@@ -49,43 +51,22 @@ export class ChoiceGroupPage extends React.Component<IComponentDemoPageProps, {}
           />
         }
         overview={
-          <div>
-            <p>
-              The ChoiceGroup component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one ChoiceGroup button; a user can select only one ChoiceGroup in a button group.
-            </p>
-
-            <p>
-              ChoiceGroup emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other controls, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a Dropdown component instead.
-            </p>
-
-            <p>
-              If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a Checkbox for "I agree" instead of ChoiceGroup buttons for "I agree" and "I don't agree."
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list. </li>
-              <li>Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable.</li>
-              <li>List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.</li>
-              <li>If none of the options is a valid choice, add another option to reflect this choice, such as "None" or "Does not apply".</li>
-              <li>Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren't factors, select the most likely or convenient option.</li>
-              <li>Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a Slider component instead.</li>
-              <li>Use if there are more than 7 options, use a Dropdown instead.</li>
-              <li>Nest with other ChoiceGroup or CheckBoxes. If possible, keep all the options at the same level.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDonts.md b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDonts.md
new file mode 100644
index 0000000000000..7378ea3aeab40
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDonts.md
@@ -0,0 +1,3 @@
+- Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a Slider component instead.
+- Use if there are more than 7 options, use a Dropdown instead.
+- Nest with other ChoiceGroup or CheckBoxes. If possible, keep all the options at the same level.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDos.md b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDos.md
new file mode 100644
index 0000000000000..1d665916a1165
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupDos.md
@@ -0,0 +1,6 @@
+- Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list.
+- Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable.
+- List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.
+- If none of the options is a valid choice, add another option to reflect this choice, such as "None" or "Does not apply".
+- Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren't factors, select the most likely or convenient option.
+- Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupOverview.md b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupOverview.md
new file mode 100644
index 0000000000000..5a1e8d0e3bf9b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/docs/ChoiceGroupOverview.md
@@ -0,0 +1,5 @@
+The ChoiceGroup component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one ChoiceGroup button; a user can select only one ChoiceGroup in a button group.
+
+ChoiceGroup emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other controls, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a Dropdown component instead.
+
+If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a Checkbox for "I agree" instead of ChoiceGroup buttons for "I agree" and "I don't agree."
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Icon.Example.tsx
index cf5b0418f466b..543890406cb91 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Icon.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Icon.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
 
 export class ChoiceGroupIconExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ChoiceGroup
         label='Pick one icon'
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 d4920a214f5f9..623cd42c49cc8 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
@@ -20,7 +20,7 @@ export class ChoiceGroupImageExample extends React.Component<{}, IChoiceGroupIma
     this._onImageChoiceGroupChange = this._onImageChoiceGroupChange.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { selectedKey } = this.state;
 
     return (
@@ -51,7 +51,7 @@ export class ChoiceGroupImageExample extends React.Component<{}, IChoiceGroupIma
     );
   }
 
-  private _onImageChoiceGroupChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption) {
+  private _onImageChoiceGroupChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
     this.setState({
       selectedKey: option.key
     });
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts
index 08374d695f52e..97c163d1a661a 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts
@@ -1,8 +1,9 @@
 import {
   IStyle,
-  IRawStyle,
   keyframes,
-  PulsingBeaconAnimationStyles
+  PulsingBeaconAnimationStyles,
+  ITheme,
+  getTheme
 } from '../../Styling';
 
 export interface ICoachmarkStyleProps {
@@ -217,14 +218,15 @@ export const rotateOne: string = keyframes({
   }
 });
 
-export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles {
+export function getStyles(props: ICoachmarkStyleProps, theme: ITheme = getTheme(),
+): ICoachmarkStyles {
   const animationInnerDimension = '35px';
   const animationOuterDimension = '150px';
   const animationBorderWidth = '10px';
 
-  const ContinuousPulse: string = PulsingBeaconAnimationStyles.continuousPulseAnimation(
-    props.beaconColorOne!,
-    props.beaconColorTwo!,
+  const ContinuousPulse: string = PulsingBeaconAnimationStyles.continuousPulseAnimationDouble(
+    props.beaconColorOne ? props.beaconColorOne : theme.palette.themePrimary,
+    props.beaconColorTwo ? props.beaconColorTwo : theme.palette.themeTertiary,
     animationInnerDimension,
     animationOuterDimension,
     animationBorderWidth
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
index 0500dd656c5f7..795f7e374a41a 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
@@ -71,8 +71,6 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
     delayBeforeMouseOpen: 3600, // The approximate time the coachmark shows up
     width: 36,
     height: 36,
-    beaconColorOne: '#00FFEC',
-    beaconColorTwo: '#005EDD',
     color: DefaultPalette.themePrimary
   };
 
@@ -108,9 +106,7 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
       target,
       width,
       height,
-      color,
-      beaconColorOne,
-      beaconColorTwo
+      color
     } = this.props;
 
     const classNames = getClassNames(getStyles, {
@@ -121,9 +117,7 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
       entityHostWidth: this.state.entityInnerHostRect.width + 'px',
       width: width + 'px',
       height: height + 'px',
-      color: color,
-      beaconColorOne: beaconColorOne,
-      beaconColorTwo: beaconColorTwo
+      color: color
     });
 
     return (
@@ -141,7 +135,7 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
             <div className={ classNames.scaleAnimationLayer }>
               <div className={ classNames.rotateAnimationLayer }>
                 {
-                  this._positioningContainer.value && <Beak
+                  this._positioningContainer.current && <Beak
                     width={ beakWidth }
                     height={ beakHeight }
                     left={ this.state.beakLeft }
@@ -179,7 +173,7 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
 
   public componentDidMount(): void {
     this._async.requestAnimationFrame(((): void => {
-      if (this._entityInnerHostElement.value && (this.state.entityInnerHostRect.width + this.state.entityInnerHostRect.width) === 0) {
+      if (this._entityInnerHostElement.current && (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);
@@ -188,8 +182,8 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
         this.setState({
           isMeasuring: false,
           entityInnerHostRect: {
-            width: this._entityInnerHostElement.value.offsetWidth,
-            height: this._entityInnerHostElement.value.offsetHeight
+            width: this._entityInnerHostElement.current.offsetWidth,
+            height: this._entityInnerHostElement.current.offsetHeight
           },
           beakLeft: beakLeft + 'px',
           beakTop: beakTop + 'px'
@@ -214,13 +208,13 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
       collapsed: false
     });
 
-    this._translateAnimationContainer.value && this._translateAnimationContainer.value.addEventListener('animationstart', (): void => {
+    this._translateAnimationContainer.current && this._translateAnimationContainer.current.addEventListener('animationstart', (): void => {
       if (this.props.onAnimationOpenStart) {
         this.props.onAnimationOpenStart();
       }
     });
 
-    this._translateAnimationContainer.value && this._translateAnimationContainer.value.addEventListener('animationend', (): void => {
+    this._translateAnimationContainer.current && this._translateAnimationContainer.current.addEventListener('animationend', (): void => {
       if (this.props.onAnimationOpenEnd) {
         this.props.onAnimationOpenEnd();
       }
@@ -243,8 +237,8 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
     // 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();
+      if (this._entityInnerHostElement.current) {
+        targetElementRect = this._entityInnerHostElement.current.getBoundingClientRect();
       }
 
       // When the window resizes we want to async
@@ -258,8 +252,8 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
         });
 
         timeoutIds.push(this._async.setTimeout((): void => {
-          if (this._entityInnerHostElement.value) {
-            targetElementRect = this._entityInnerHostElement.value.getBoundingClientRect();
+          if (this._entityInnerHostElement.current) {
+            targetElementRect = this._entityInnerHostElement.current.getBoundingClientRect();
           }
         }, 100));
       });
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx
index 458642ae39327..7be1558913add 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx
@@ -3,7 +3,8 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 
 import { CoachmarkBasicExample } from './examples/Coachmark.Basic.Example';
@@ -16,6 +17,7 @@ export class CoachmarkPage extends React.Component<IComponentDemoPageProps, {}>
       <ComponentPage
         title='Coachmark'
         componentName='Coachmark'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Coachmark'
         exampleCards={
           <div>
             <ExampleCard title='Coachmark Basic' isOptIn={ true } code={ CoachmarkBasicExampleCode }>
@@ -31,35 +33,22 @@ export class CoachmarkPage extends React.Component<IComponentDemoPageProps, {}>
           />
         }
         overview={
-          <div>
-            <p>Coachmarks are used to draw a persons attention to a part of the UI, and increase engagement with that element
-               in the product.</p>
-
-            <p>
-              They should be contextual whenever possible, or related to something that will make existing user flows more efficient
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Only one coachmark + callout combo will be displayed at a time</li>
-              <li>Coachmarks can be stand alone or sequential. Sequential coachmarks should be used sparingly, to walk through complex
-                multi-step interactions. It is recommended that a sequence of coachmakrs does not exceed 3 steps.</li>
-              <li>Coachmarks are designed to only hold Callouts.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Coachmark size, color, and animation should not be altered.</li>
-              <li>Don't show the coachmark more than once even if the user has not completed the action.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
index 0a31984b9cfb2..9123fe2b07398 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  IPositioningContainer,
-  IPositioningContainerTypes
-} from './PositioningContainer.types';
+import { IPositioningContainerTypes } from './PositioningContainer.types';
 import { getClassNames } from './PositioningContainer.styles';
 import { Layer } from 'office-ui-fabric-react/lib/Layer';
 
@@ -217,7 +214,7 @@ export class PositioningContainer
 
   protected _dismissOnLostFocus(ev: Event): void {
     const target = ev.target as HTMLElement;
-    const clickedOutsideCallout = this._positionedHost.value && !elementContains(this._positionedHost.value, target);
+    const clickedOutsideCallout = this._positionedHost.current && !elementContains(this._positionedHost.current, target);
 
     if (
       (!this._target && clickedOutsideCallout) ||
@@ -230,9 +227,9 @@ export class PositioningContainer
   }
 
   protected _setInitialFocus = (): void => {
-    if (this._contentHost.value && this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
+    if (this._contentHost.current && this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
       this._didSetInitialFocus = true;
-      focusFirstChild(this._contentHost.value);
+      focusFirstChild(this._contentHost.current);
     }
   }
 
@@ -267,8 +264,8 @@ export class PositioningContainer
       onPositioned
     } = this.props;
 
-    const hostElement = this._positionedHost.value;
-    const positioningContainerElement = this._contentHost.value;
+    const hostElement = this._positionedHost.current;
+    const positioningContainerElement = this._contentHost.current;
 
     if (hostElement && positioningContainerElement) {
       let currentProps: IPositionProps | undefined;
@@ -388,11 +385,11 @@ export class PositioningContainer
   private _setHeightOffsetEveryFrame(): void {
     if (this._contentHost && this.props.finalHeight) {
       this._setHeightOffsetTimer = this._async.requestAnimationFrame(() => {
-        if (!this._contentHost.value) {
+        if (!this._contentHost.current) {
           return;
         }
 
-        const positioningContainerMainElem = this._contentHost.value.lastChild as HTMLElement;
+        const positioningContainerMainElem = this._contentHost.current.lastChild as HTMLElement;
         const cardScrollHeight: number = positioningContainerMainElem.scrollHeight;
         const cardCurrHeight: number = positioningContainerMainElem.offsetHeight;
         const scrollDiff: number = cardScrollHeight - cardCurrHeight;
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDonts.md b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDonts.md
new file mode 100644
index 0000000000000..8e3f583b0ce98
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDonts.md
@@ -0,0 +1,2 @@
+- Coachmark size, color, and animation should not be altered.
+- Don't show the coachmark more than once even if the user has not completed the action.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDos.md b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDos.md
new file mode 100644
index 0000000000000..e633c88b6505b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkDos.md
@@ -0,0 +1,3 @@
+- Only one coachmark + callout combo will be displayed at a time
+- Coachmarks can be stand alone or sequential. Sequential coachmarks should be used sparingly, to walk through complex multi-step interactions. It is recommended that a sequence of coachmakrs does not exceed 3 steps.
+- Coachmarks are designed to only hold Callouts.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkOverview.md b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkOverview.md
new file mode 100644
index 0000000000000..c498d3cc459ce
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/docs/CoachmarkOverview.md
@@ -0,0 +1,4 @@
+Coachmarks are used to draw a persons attention to a part of the UI, and increase engagement with that element
+in the product.
+
+They should be contextual whenever possible, or related to something that will make existing user flows more efficient
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
index 34cf5c556d171..65bbb98b80f66 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
@@ -73,7 +73,7 @@ export class CoachmarkBasicExample extends BaseComponent<{}, ICoachmarkBasicExam
         </div>
         { isVisible && (
           <Coachmark
-            target={ this._targetButton.value }
+            target={ this._targetButton.current }
           >
             <TeachingBubbleContent
               headline='Example Title'
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 87a2578f4f60a..12ef9fd104e39 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
@@ -58,7 +58,7 @@ describe('ColorPicker', () => {
       <ColorPicker color='#FFFFFF' alphaSliderHidden={ true } />
     ) as ColorPicker;
 
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const alphaSlider = renderedDOM.querySelector('.is-alpha');
     const alphaTableHeader = renderedDOM.querySelector('.ms-ColorPicker-table > thead > tr > td:nth-child(5)');
     const alphaTableInput = renderedDOM.querySelector('.ms-ColorPicker-table > tbody> tr > td:nth-child(5)');
@@ -73,7 +73,7 @@ describe('ColorPicker', () => {
       <ColorPicker color='#FFFFFF' />
     ) as ColorPicker;
 
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const tableHeaders = renderedDOM.querySelectorAll('.ms-ColorPicker-table > thead > tr > td') as NodeListOf<HTMLTableDataCellElement>;
 
     const hexTableHeader = tableHeaders[0];
@@ -110,7 +110,7 @@ describe('ColorPicker', () => {
       />
     ) as ColorPicker;
 
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const tableHeaders = renderedDOM.querySelectorAll('.ms-ColorPicker-table > thead > tr > td') as NodeListOf<HTMLTableDataCellElement>;
 
     const hexTableHeader = tableHeaders[0];
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 291607e1e8e5b..190d570f0490d 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
@@ -48,13 +48,13 @@ export class ColorPicker extends BaseComponent<IColorPickerProps, IColorPickerSt
     } as IColorPickerState;
   }
 
-  public componentWillReceiveProps(newProps: IColorPickerProps) {
+  public componentWillReceiveProps(newProps: IColorPickerProps): void {
     if (newProps.color) {
       this._updateColor(getColorFromString(newProps.color));
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { color } = this.state;
 
     return (
@@ -166,11 +166,11 @@ export class ColorPicker extends BaseComponent<IColorPickerProps, IColorPickerSt
       r: Number(this.rText.value),
       g: Number(this.gText.value),
       b: Number(this.bText.value),
-      a: Number(this.aText.value)
+      a: Number((this.aText && this.aText.value) || 100)
     }));
   }
 
-  private _updateColor(newColor?: IColor) {
+  private _updateColor(newColor?: IColor): void {
     if (!newColor) {
       return;
     }
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPickerPage.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPickerPage.tsx
index f03942c79b580..452a84ec84455 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPickerPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPickerPage.tsx
@@ -3,7 +3,8 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 import { ColorPickerBasicExample } from './examples/ColorPicker.Basic.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
@@ -12,11 +13,12 @@ import { ColorPickerStatus } from './ColorPicker.checklist';
 const ColorPickerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx') as string;
 
 export class ColorPickerPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='ColorPicker'
         componentName='ColorPickerExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/ColorPicker'
         exampleCards={
           <ExampleCard
             title='Default ColorPicker'
@@ -33,12 +35,14 @@ export class ColorPickerPage extends React.Component<IComponentDemoPageProps, {}
           />
         }
         overview={
-          <div>ColorPicker is used to allow a user to select a color</div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ColorPicker/docs/ColorPickerOverview.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ColorPickerStatus}
+            { ...ColorPickerStatus }
           />
         }
       />
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 2a40276926f1b..0a3f784eccb18 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
@@ -50,11 +50,11 @@ export class ColorRectangle extends BaseComponent<IColorRectangleProps, IColorPi
     };
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     this._events.dispose();
   }
 
-  public componentWillReceiveProps(newProps: IColorRectangleProps) {
+  public componentWillReceiveProps(newProps: IColorRectangleProps): void {
     const { color } = newProps;
 
     this.setState({
@@ -63,7 +63,7 @@ export class ColorRectangle extends BaseComponent<IColorRectangleProps, IColorPi
     });
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { minSize } = this.props;
     const { color, fullColorString } = this.state;
 
@@ -86,11 +86,11 @@ export class ColorRectangle extends BaseComponent<IColorRectangleProps, IColorPi
   private _onMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
     const { color, onSVChanged } = this.props;
 
-    if (!this._root.value) {
+    if (!this._root.current) {
       return;
     }
 
-    const rectSize = this._root.value.getBoundingClientRect();
+    const rectSize = this._root.current.getBoundingClientRect();
 
     const sPercentage = (ev.clientX - rectSize.left) / rectSize.width;
     const vPercentage = (ev.clientY - rectSize.top) / rectSize.height;
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 73b4ca591adc5..442568c66999c 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
@@ -48,13 +48,13 @@ export class ColorSlider extends BaseComponent<IColorSliderProps, IColorSliderSt
     };
   }
 
-  public componentWillReceiveProps(newProps: IColorSliderProps) {
+  public componentWillReceiveProps(newProps: IColorSliderProps): void {
     if (newProps && newProps.value) {
       this.setState({ currentValue: newProps.value });
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { className, minValue, maxValue, overlayStyle } = this.props;
     const { currentValue, isAdjusting } = this.state;
 
@@ -85,12 +85,12 @@ export class ColorSlider extends BaseComponent<IColorSliderProps, IColorSliderSt
   }
 
   private _onMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
-    if (!this._root.value) {
+    if (!this._root.current) {
       return;
     }
 
     const { onChanged, minValue, maxValue } = this.props;
-    const rectSize = this._root.value.getBoundingClientRect();
+    const rectSize = this._root.current.getBoundingClientRect();
 
     const currentPercentage = (ev.clientX - rectSize.left) / rectSize.width;
     const newValue = Math.min(maxValue!, Math.max(minValue!, currentPercentage * maxValue!));
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 004797c12984c..b5010567ea697 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
@@ -122,7 +122,7 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
                   className="ms-TextField-fieldGroup"
                 >
                   <input
-                    aria-describedby={null}
+                    aria-describedby={undefined}
                     aria-invalid={false}
                     aria-label={undefined}
                     className="ms-TextField-field"
@@ -156,7 +156,7 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
                   className="ms-TextField-fieldGroup"
                 >
                   <input
-                    aria-describedby={null}
+                    aria-describedby={undefined}
                     aria-invalid={false}
                     aria-label={undefined}
                     className="ms-TextField-field"
@@ -190,7 +190,7 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
                   className="ms-TextField-fieldGroup"
                 >
                   <input
-                    aria-describedby={null}
+                    aria-describedby={undefined}
                     aria-invalid={false}
                     aria-label={undefined}
                     className="ms-TextField-field"
@@ -224,7 +224,7 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
                   className="ms-TextField-fieldGroup"
                 >
                   <input
-                    aria-describedby={null}
+                    aria-describedby={undefined}
                     aria-invalid={false}
                     aria-label={undefined}
                     className="ms-TextField-field"
@@ -258,7 +258,7 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
                   className="ms-TextField-fieldGroup"
                 >
                   <input
-                    aria-describedby={null}
+                    aria-describedby={undefined}
                     aria-invalid={false}
                     aria-label={undefined}
                     className="ms-TextField-field"
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/docs/ColorPickerOverview.md b/packages/office-ui-fabric-react/src/components/ColorPicker/docs/ColorPickerOverview.md
new file mode 100644
index 0000000000000..1bb98d4569d95
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/docs/ColorPickerOverview.md
@@ -0,0 +1 @@
+ColorPicker is used to allow a user to select a color.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx
index 3976d0c44620e..3440f19c32879 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/examples/ColorPicker.Basic.Example.tsx
@@ -9,7 +9,7 @@ export interface IBasicColorPickerExampleState {
 
 export class ColorPickerBasicExample extends React.Component<any, IBasicColorPickerExampleState> {
 
-  public render() {
+  public render(): JSX.Element {
 
     return (
       <ColorPicker color='#FFFFFF' />
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 95b2a131799a7..977b1261608e9 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { IComboBoxOption, IComboBoxProps } from './ComboBox.types';
+import { IComboBoxOption, IComboBoxProps, IComboBoxOptionStyles } from './ComboBox.types';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { Callout } from '../../Callout';
 import { Label } from '../../Label';
 import { Checkbox } from '../../Checkbox';
 import {
   CommandButton,
-  IconButton
+  IconButton,
+  IButtonStyles
 } from '../../Button';
-import { Autofill } from '../Autofill/Autofill';
+import { IAutofill, Autofill } from '../Autofill/index';
 import {
   BaseComponent,
   divProperties,
@@ -18,7 +19,8 @@ import {
   KeyCodes,
   customizable,
   css,
-  createRef
+  createRef,
+  shallowCompare
 } from '../../Utilities';
 import { SelectableOptionMenuItemType } from '../../utilities/selectableOption/SelectableOption.types';
 import {
@@ -31,6 +33,7 @@ import {
   getClassNames,
   getComboBoxOptionClassNames
 } from './ComboBox.classNames';
+import { BaseButton, Button } from 'src/index.bundle';
 
 export interface IComboBoxState {
 
@@ -77,6 +80,25 @@ enum HoverStatus {
   default = -1
 }
 
+interface IComboBoxOptionWrapperProps extends IComboBoxOption {
+  // True if the option is currently selected
+  isSelected: boolean;
+}
+
+// Internal class that is used to wrap all ComboBox options
+// This is used to customize when we want to rerender components,
+// so we don't rerender every option every time render is executed
+class ComboBoxOptionWrapper extends React.Component<IComboBoxOptionWrapperProps, {}> {
+  public render(): React.ReactNode {
+    return this.props.children;
+  }
+
+  public shouldComponentUpdate(newProps: IComboBoxOptionWrapperProps): boolean {
+    // The children will always be different, so we ignore that prop
+    return !shallowCompare({ ...this.props, children: undefined }, { ...newProps, children: undefined });
+  }
+}
+
 @customizable('ComboBox', ['theme'])
 export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
@@ -90,7 +112,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   private _root = createRef<HTMLDivElement>();
 
   // The input aspect of the comboBox
-  private _comboBox = createRef<Autofill>();
+  private _autofill = createRef<IAutofill>();
 
   // The wrapping div of the input and button
   private _comboBoxWrapper = createRef<HTMLDivElement>();
@@ -167,12 +189,12 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     };
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     // hook up resolving the options if needed on focus
-    this._events.on(this._comboBoxWrapper.value, 'focus', this._onResolveOptions, true);
+    this._events.on(this._comboBoxWrapper.current, 'focus', this._onResolveOptions, true);
   }
 
-  public componentWillReceiveProps(newProps: IComboBoxProps) {
+  public componentWillReceiveProps(newProps: IComboBoxProps): void {
     // Update the selectedIndex and currentOptions state if
     // the selectedKey, value, or options have changed
     if (newProps.selectedKey !== this.props.selectedKey ||
@@ -218,8 +240,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         !isOpen &&
         this._focusInputAfterClose &&
         focused &&
-        this._comboBox.value &&
-        document.activeElement !== this._comboBox.value.inputElement)) {
+        this._autofill.current &&
+        document.activeElement !== this._autofill.current.inputElement)) {
       this.focus();
     }
 
@@ -249,15 +271,15 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     }
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     super.componentWillUnmount();
 
     // remove the eventHanlder that was added in componentDidMount
-    this._events.off(this._comboBoxWrapper.value);
+    this._events.off(this._comboBoxWrapper.current);
   }
 
   // Primary Render
-  public render() {
+  public render(): JSX.Element {
     const id = this._id;
     const {
       className,
@@ -277,7 +299,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       theme,
       title
     } = this.props;
-    const { isOpen, selectedIndices, focused, suggestedDisplayValue } = this.state;
+    const { isOpen, focused, suggestedDisplayValue } = this.state;
     this._currentVisibleValue = this._getVisibleValue();
 
     const divProps = getNativeProps(this.props, divProperties);
@@ -317,7 +339,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         >
           <Autofill
             data-is-interactable={ !disabled }
-            ref={ this._comboBox }
+            componentRef={ this._autofill }
             id={ id + '-input' }
             className={ this._classNames.input }
             type='text'
@@ -330,10 +352,10 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
             aria-expanded={ isOpen }
             aria-autocomplete={ this._getAriaAutoCompleteValue() }
             role='combobox'
-            aria-readonly={ ((allowFreeform || disabled) ? null : 'true') }
+            aria-readonly={ ((allowFreeform || disabled) ? undefined : 'true') }
             readOnly={ disabled || !allowFreeform }
             aria-labelledby={ (label && (id + '-label')) }
-            aria-label={ ((ariaLabel && !label) && ariaLabel) }
+            aria-label={ ((ariaLabel && !label) ? ariaLabel : undefined) }
             aria-describedby={ (id + '-option') }
             aria-activedescendant={ this._getAriaActiveDescentValue() }
             aria-disabled={ disabled }
@@ -385,8 +407,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Set focus on the input
    */
   public focus = (shouldOpenOnFocus?: boolean): void => {
-    if (this._comboBox.value) {
-      this._comboBox.value.focus();
+    if (this._autofill.current) {
+      this._autofill.current.focus();
       if (shouldOpenOnFocus) {
         this.setState({
           isOpen: true
@@ -411,7 +433,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @returns {string} - the updated value to set, if needed
    */
   private _onUpdateValueInAutofillWillReceiveProps = (): string | null => {
-    const comboBox = this._comboBox.value;
+    const comboBox = this._autofill.current;
 
     if (!comboBox) {
       return null;
@@ -561,7 +583,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * allows freeform entry
    * @param updatedValue - the input's newly changed value
    */
-  private _processInputChangeWithFreeform(updatedValue: string) {
+  private _processInputChangeWithFreeform(updatedValue: string): void {
     const {
       currentOptions
     } = this.state;
@@ -583,10 +605,15 @@ 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
-      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);
+      const items = currentOptions.map((item, index) => { return { ...item, index }; })
+        .filter((option) => option.itemType !== SelectableOptionMenuItemType.Header && option.itemType !== SelectableOptionMenuItemType.Divider)
+        .filter((option) => this._getPreviewText(option).toLocaleLowerCase().indexOf(updatedValue) === 0);
       if (items.length > 0) {
+        // use ariaLabel as the value when the option is set
+        const text: string = this._getPreviewText(items[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 : '';
+        newSuggestedDisplayValue = text.toLocaleLowerCase() !== updatedValue ? text : '';
 
         // remember the index of the match we found
         newCurrentPendingValueValidIndex = items[0].index;
@@ -594,7 +621,9 @@ 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
-      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);
+      const items = currentOptions.map((item, index) => { return { ...item, index }; })
+        .filter((option) => option.itemType !== SelectableOptionMenuItemType.Header && option.itemType !== SelectableOptionMenuItemType.Divider)
+        .filter((option) => this._getPreviewText(option).toLocaleLowerCase() === updatedValue);
 
       // if we fould a match remember the index
       if (items.length === 1) {
@@ -611,12 +640,11 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * does not allow freeform entry
    * @param updatedValue - the input's newly changed value
    */
-  private _processInputChangeWithoutFreeform(updatedValue: string) {
+  private _processInputChangeWithoutFreeform(updatedValue: string): void {
     const {
       currentPendingValue,
       currentPendingValueValidIndex,
       currentOptions,
-      selectedIndices
     } = this.state;
 
     if (this.props.autoComplete === 'on') {
@@ -642,11 +670,13 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         updatedValue = updatedValue.toLocaleLowerCase();
 
         // If autoComplete is on, attempt to find a match where the text of an option starts with the updated value
-        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);
+        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) {
-          this._setPendingInfo(originalUpdatedValue, items[0].index, items[0].text);
+          this._setPendingInfo(originalUpdatedValue, items[0].index, this._getPreviewText(items[0]));
         }
 
         // Schedule a timeout to clear the pending value after the timeout span
@@ -721,7 +751,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @param index - the index to set (or the index to set from if a search direction is provided)
    * @param searchDirection - the direction to search along the options from the given index
    */
-  private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none) {
+  private _setSelectedIndex(index: number, submitPendingValueEvent: any, searchDirection: SearchDirection = SearchDirection.none): void {
     const { onChanged, onPendingValueChanged } = this.props;
     const { currentOptions } = this.state;
     let { selectedIndices } = this.state;
@@ -769,7 +799,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
       // Did the creator give us an onChanged callback?
       if (onChanged) {
-        onChanged(option, index);
+        onChanged(option, index, undefined, submitPendingValueEvent);
       }
 
       // if we have a new selected index,
@@ -783,8 +813,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * and set the focused state
    */
   private _select = (): void => {
-    if (this._comboBox.value && this._comboBox.value.inputElement) {
-      this._comboBox.value.inputElement.select();
+    if (this._autofill.current && this._autofill.current.inputElement) {
+      this._autofill.current.inputElement.select();
     }
 
     if (!this.state.focused) {
@@ -835,8 +865,8 @@ 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._root.value && this._root.value.contains(event.relatedTarget as HTMLElement) ||
-        this._comboBoxMenu.value && this._comboBoxMenu.value.contains(event.relatedTarget as HTMLElement))) {
+      (this._root.current && this._root.current.contains(event.relatedTarget as HTMLElement) ||
+        this._comboBoxMenu.current && this._comboBoxMenu.current.contains(event.relatedTarget as HTMLElement))) {
       event.preventDefault();
       event.stopPropagation();
       return;
@@ -845,7 +875,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     if (this.state.focused) {
       this.setState({ focused: false });
       if (!this.props.multiSelect) {
-        this._submitPendingValue();
+        this._submitPendingValue(event);
       }
     }
   }
@@ -853,7 +883,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   /**
    * Submit a pending value if there is one
    */
-  private _submitPendingValue() {
+  private _submitPendingValue(submitPendingValueEvent: any): void {
     const {
       onChanged,
       allowFreeform,
@@ -881,18 +911,18 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         // the live value in the underlying input matches the pending option; update the state
         if (currentPendingValue.toLocaleLowerCase() === pendingOptionText ||
           (autoComplete && pendingOptionText.indexOf(currentPendingValue.toLocaleLowerCase()) === 0 &&
-            (this._comboBox.value && this._comboBox.value.isValueSelected &&
-              currentPendingValue.length + (this._comboBox.value.selectionEnd - this._comboBox.value.selectionStart) === pendingOptionText.length) ||
-            (this._comboBox.value && this._comboBox.value.inputElement && this._comboBox.value.inputElement.value.toLocaleLowerCase() === pendingOptionText)
+            (this._autofill.current && this._autofill.current.isValueSelected &&
+              currentPendingValue.length + (this._autofill.current.selectionEnd! - this._autofill.current.selectionStart!) === pendingOptionText.length) ||
+            (this._autofill.current && this._autofill.current.inputElement && this._autofill.current.inputElement.value.toLocaleLowerCase() === pendingOptionText)
           )) {
-          this._setSelectedIndex(currentPendingValueValidIndex);
+          this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent);
           this._clearPendingInfo();
           return;
         }
       }
 
       if (onChanged) {
-        onChanged(undefined, undefined, currentPendingValue);
+        onChanged(undefined, undefined, currentPendingValue, submitPendingValueEvent);
       } else {
         // If we are not controlled, create a new option
         const newOption: IComboBoxOption = { key: currentPendingValue, text: currentPendingValue };
@@ -911,10 +941,10 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     } else if (currentPendingValueValidIndex >= 0) {
       // Since we are not allowing freeform, we must have a matching
       // to be able to update state
-      this._setSelectedIndex(currentPendingValueValidIndex);
+      this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent);
     } else if (currentPendingValueValidIndexOnHover >= 0) {
       // If all else failed and we were hovering over an item, select it
-      this._setSelectedIndex(currentPendingValueValidIndexOnHover);
+      this._setSelectedIndex(currentPendingValueValidIndexOnHover, submitPendingValueEvent, );
     }
 
     // Finally, clear the pending info
@@ -940,13 +970,13 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         directionalHintFixed={ true }
         { ...calloutProps }
         className={ css(this._classNames.callout, calloutProps ? calloutProps.className : undefined) }
-        target={ this._comboBoxWrapper.value }
+        target={ this._comboBoxWrapper.current }
         onDismiss={ this._onDismiss }
         onScroll={ this._onScroll }
         setInitialFocus={ false }
         calloutWidth={
-          useComboBoxAsMenuWidth && this._comboBoxWrapper.value ?
-            this._comboBoxWrapper.value.clientWidth + 2
+          useComboBoxAsMenuWidth && this._comboBoxWrapper.current ?
+            this._comboBoxWrapper.current.clientWidth + 2
             : dropdownWidth }
       >
         <div className={ this._classNames.optionsContainerWrapper } ref={ this._comboBoxMenu }>
@@ -1024,46 +1054,63 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     const id = this._id;
     const isSelected: boolean = this._isOptionSelected(item.index);
     const optionStyles = this._getCurrentOptionStyles(item);
+    const wrapperProps = {
+      key: item.key,
+      index: item.index,
+      styles: optionStyles,
+      disabled: item.disabled,
+      isSelected: isSelected,
+      text: item.text,
+    };
 
     return (
       !this.props.multiSelect ? (
-        <CommandButton
-          id={ id + '-list' + item.index }
-          key={ item.key }
-          data-index={ item.index }
-          styles={ optionStyles }
-          checked={ isSelected }
-          className={ 'ms-ComboBox-option' }
-          onClick={ this._onItemClick(item.index) }
-          onMouseEnter={ this._onOptionMouseEnter.bind(this, item.index) }
-          onMouseMove={ this._onOptionMouseMove.bind(this, item.index) }
-          onMouseLeave={ this._onOptionMouseLeave }
-          role='option'
-          aria-selected={ isSelected ? 'true' : 'false' }
-          ariaLabel={ item.text }
-          disabled={ item.disabled }
-        > { <span ref={ isSelected ? this._selectedElement : undefined }>
-          { onRenderOption(item, this._onRenderOptionContent) }
-        </span>
-          }
-        </CommandButton>
-      ) : (
-          <Checkbox
+        <ComboBoxOptionWrapper
+          { ...wrapperProps }
+        >
+          <CommandButton
             id={ id + '-list' + item.index }
-            ref={ 'option' + item.index }
             key={ item.key }
             data-index={ item.index }
             styles={ optionStyles }
+            checked={ isSelected }
             className={ 'ms-ComboBox-option' }
-            data-is-focusable={ true }
-            onChange={ this._onItemClick(item.index!) }
-            label={ item.text }
+            onClick={ this._onItemClick(item.index) }
+            onMouseEnter={ this._onOptionMouseEnter.bind(this, item.index) }
+            onMouseMove={ this._onOptionMouseMove.bind(this, item.index) }
+            onMouseLeave={ this._onOptionMouseLeave }
             role='option'
             aria-selected={ isSelected ? 'true' : 'false' }
-            checked={ isSelected }
-          >
+            ariaLabel={ item.text }
+            disabled={ item.disabled }
+          > { <span ref={ isSelected ? this._selectedElement : undefined }>
             { onRenderOption(item, this._onRenderOptionContent) }
-          </Checkbox>
+          </span>
+            }
+          </CommandButton>
+        </ComboBoxOptionWrapper >
+      ) : (
+          <ComboBoxOptionWrapper
+            { ...wrapperProps }
+          >
+            <Checkbox
+              id={ id + '-list' + item.index }
+              ref={ 'option' + item.index }
+              ariaLabel={ this._getPreviewText(item) }
+              key={ item.key }
+              data-index={ item.index }
+              styles={ optionStyles }
+              className={ 'ms-ComboBox-option' }
+              data-is-focusable={ true }
+              onChange={ this._onItemClick(item.index!) }
+              label={ item.text }
+              role='option'
+              aria-selected={ isSelected ? 'true' : 'false' }
+              checked={ isSelected }
+            >
+              { onRenderOption(item, this._onRenderOptionContent) }
+            </Checkbox>
+          </ComboBoxOptionWrapper >
         )
     );
   }
@@ -1112,7 +1159,6 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       currentPendingValueValidIndexOnHover,
       currentPendingValueValidIndex,
       currentPendingValue,
-      selectedIndices
     } = this.state;
 
     return (
@@ -1142,7 +1188,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   /**
    * Scroll the selected element into view
    */
-  private _scrollIntoView() {
+  private _scrollIntoView(): void {
     const {
       onScrollToItem,
       scrollSelectedToTop
@@ -1151,22 +1197,21 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     const {
       currentPendingValueValidIndex,
       currentPendingValue,
-      selectedIndices
     } = this.state;
 
     if (onScrollToItem) {
       // Use the custom scroll handler
       onScrollToItem((currentPendingValueValidIndex >= 0 || currentPendingValue !== '') ? currentPendingValueValidIndex : this._getFirstSelectedIndex());
-    } else if (this._selectedElement.value && this._selectedElement.value.offsetParent) {
+    } else if (this._selectedElement.current && this._selectedElement.current.offsetParent) {
       // We are using refs, scroll the ref into view
       if (scrollSelectedToTop) {
-        this._selectedElement.value.offsetParent.scrollIntoView(true);
+        this._selectedElement.current.offsetParent.scrollIntoView(true);
       } else {
         let alignToTop = true;
 
-        if (this._comboBoxMenu.value && this._comboBoxMenu.value.offsetParent) {
-          const scrollableParentRect = this._comboBoxMenu.value.offsetParent.getBoundingClientRect();
-          const selectedElementRect = this._selectedElement.value.offsetParent.getBoundingClientRect();
+        if (this._comboBoxMenu.current && this._comboBoxMenu.current.offsetParent) {
+          const scrollableParentRect = this._comboBoxMenu.current.offsetParent.getBoundingClientRect();
+          const selectedElementRect = this._selectedElement.current.offsetParent.getBoundingClientRect();
 
           // If we are completely in view then we do not need to scroll
           if (scrollableParentRect.top <= selectedElementRect.top &&
@@ -1180,7 +1225,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
           }
         }
 
-        this._selectedElement.value.offsetParent.scrollIntoView(alignToTop);
+        this._selectedElement.current.offsetParent.scrollIntoView(alignToTop);
       }
     }
   }
@@ -1195,9 +1240,9 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * to select the item and also close the menu
    * @param index - the index of the item that was clicked
    */
-  private _onItemClick(index: number | undefined): () => void {
-    return (): void => {
-      this._setSelectedIndex(index as number);
+  private _onItemClick(index: number | undefined): (ev: any) => void {
+    return (ev: any): void => {
+      this._setSelectedIndex(index as number, ev);
       if (!this.props.multiSelect) {
         // only close the callout when it's in single-select mode
         this.setState({
@@ -1219,8 +1264,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     // close the menu and focus the input
     this.setState({ isOpen: false });
 
-    if (this._comboBox.value && this._focusInputAfterClose) {
-      this._comboBox.value.focus();
+    if (this._autofill.current && this._focusInputAfterClose) {
+      this._autofill.current.focus();
     }
   }
 
@@ -1251,13 +1296,12 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * and setting the suggested display value to the last
    * selected state text
    */
-  private _resetSelectedIndex() {
+  private _resetSelectedIndex(): void {
     const {
-      selectedIndices,
       currentOptions
     } = this.state;
-    if (this._comboBox.value) {
-      this._comboBox.value.clear();
+    if (this._autofill.current) {
+      this._autofill.current.clear();
     }
     this._clearPendingInfo();
 
@@ -1277,7 +1321,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   /**
    * Clears the pending info state
    */
-  private _clearPendingInfo() {
+  private _clearPendingInfo(): void {
     this._setPendingInfo('' /* suggestedDisplayValue */, -1 /* currentPendingValueValidIndex */, '' /* currentPendingValue */);
   }
 
@@ -1287,7 +1331,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @param currentPendingValueValidIndex - new pending value index to set
    * @param suggestedDisplayValue - new suggest display value to set
    */
-  private _setPendingInfo(currentPendingValue: string, currentPendingValueValidIndex: number, suggestedDisplayValue: string) {
+  private _setPendingInfo(currentPendingValue: string, currentPendingValueValidIndex: number, suggestedDisplayValue: string): void {
     this.setState({
       currentPendingValue: currentPendingValue,
       currentPendingValueValidIndex: currentPendingValueValidIndex,
@@ -1300,14 +1344,14 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Set the pending info from the given index
    * @param index - the index to set the pending info from
    */
-  private _setPendingInfoFromIndex(index: number) {
+  private _setPendingInfoFromIndex(index: number): void {
     const {
       currentOptions
     } = this.state;
 
     if (index >= 0 && index < currentOptions.length) {
       const option = currentOptions[index];
-      this._setPendingInfo(option.text, index, option.text);
+      this._setPendingInfo(this._getPreviewText(option), index, this._getPreviewText(option));
     } else {
       this._clearPendingInfo();
     }
@@ -1319,9 +1363,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @param index - the index to search from
    * @param searchDirection - the direction to search
    */
-  private _setPendingInfoFromIndexAndDirection(index: number, searchDirection: SearchDirection) {
+  private _setPendingInfoFromIndexAndDirection(index: number, searchDirection: SearchDirection): void {
     const {
-      isOpen,
       currentOptions
     } = this.state;
 
@@ -1354,7 +1397,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     }
   }
 
-  private _notifyPendingValueChanged(prevState: IComboBoxState) {
+  private _notifyPendingValueChanged(prevState: IComboBoxState): void {
     const { onPendingValueChanged } = this.props;
 
     if (!onPendingValueChanged) {
@@ -1392,7 +1435,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   /**
    * Sets the isOpen state and updates focusInputAfterClose
    */
-  private _setOpenStateAndFocusOnClose(isOpen: boolean, focusInputAfterClose: boolean) {
+  private _setOpenStateAndFocusOnClose(isOpen: boolean, focusInputAfterClose: boolean): void {
     this._focusInputAfterClose = focusInputAfterClose;
     this.setState({
       isOpen: isOpen
@@ -1412,8 +1455,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     const {
       isOpen,
       currentOptions,
-      currentPendingValueValidIndexOnHover,
-      selectedIndices
+      currentPendingValueValidIndexOnHover
     } = this.state;
 
     if (disabled) {
@@ -1425,7 +1467,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
     switch (ev.which) {
       case KeyCodes.enter:
-        this._submitPendingValue();
+        this._submitPendingValue(ev);
         if (this.props.multiSelect && isOpen) {
           this.setState({
             currentPendingValueValidIndex: index
@@ -1453,7 +1495,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       case KeyCodes.tab:
         // On enter submit the pending value
         if (!this.props.multiSelect) {
-          this._submitPendingValue();
+          this._submitPendingValue(ev);
         }
 
         // If we are not allowing freeform
@@ -1604,7 +1646,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     ev.preventDefault();
   }
 
-  private _onOptionMouseEnter(index: number) {
+  private _onOptionMouseEnter(index: number): void {
     if (!this._isScrollIdle) {
       return;
     }
@@ -1614,7 +1656,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     });
   }
 
-  private _onOptionMouseMove(index: number) {
+  private _onOptionMouseMove(index: number): void {
     if (!this._isScrollIdle || this.state.currentPendingValueValidIndexOnHover === index) {
       return;
     }
@@ -1639,7 +1681,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 | Autofill> | null) {
+  private _handleInputWhenDisabled(ev: React.KeyboardEvent<HTMLElement | Autofill> | null): void {
     // If we are disabled, close the menu (if needed)
     // and eat all keystokes other than TAB or ESC
     if (this.props.disabled) {
@@ -1688,7 +1730,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
  * Get the styles for the current option.
  * @param item Item props for the current option
  */
-  private _getCaretButtonStyles() {
+  private _getCaretButtonStyles(): IButtonStyles {
     const { caretDownButtonStyles: customCaretDownButtonStyles } = this.props;
     return getCaretDownButtonStyles(this.props.theme!, customCaretDownButtonStyles);
   }
@@ -1697,7 +1739,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Get the styles for the current option.
    * @param item Item props for the current option
    */
-  private _getCurrentOptionStyles(item: IComboBoxOption) {
+  private _getCurrentOptionStyles(item: IComboBoxOption): Partial<IComboBoxOptionStyles> {
     const { comboBoxOptionStyles: customStylesForAllOptions } = this.props;
     const { styles: customStylesForCurrentOption } = item;
 
@@ -1708,8 +1750,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Get the aria-activedescendant value for the comboxbox.
    * @returns the id of the current focused combo item, otherwise the id of the currently selected element, null otherwise
    */
-  private _getAriaActiveDescentValue(): string | null {
-    let descendantText = (this.state.isOpen && this.state.selectedIndices && this.state.selectedIndices.length >= 0 ? (this._id + '-list' + this.state.selectedIndices[0]) : null);
+  private _getAriaActiveDescentValue(): string | undefined {
+    let descendantText = (this.state.isOpen && this.state.selectedIndices && this.state.selectedIndices.length >= 0 ? (this._id + '-list' + this.state.selectedIndices[0]) : undefined);
     if (this.state.isOpen && this.state.focused && this.state.currentPendingValueValidIndex !== -1) {
       descendantText = (this._id + '-list' + this.state.currentPendingValueValidIndex);
     }
@@ -1721,7 +1763,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   * @returns 'inline' if auto-complete automatically dynamic, 'both' if we have a list of possible values to pick from and can
   * dynamically populate input, and 'none' if auto-complete is not enabled as we can't give user inputs.
   */
-  private _getAriaAutoCompleteValue(): string {
+  private _getAriaAutoCompleteValue(): 'none' | 'inline' | 'list' | 'both' | undefined {
     const autoComplete = !this.props.disabled && this.props.autoComplete === 'on';
     return autoComplete ? (this.props.allowFreeform ? 'inline' : 'both') : 'none';
   }
@@ -1764,4 +1806,11 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
     return retKeys;
   }
+
+  // For scenarios where the option's text prop contains embedded styles, we use the option's
+  // ariaLabel value as the text in the input and for autocomplete matching. We know to use this
+  // when the useAriaLabelAsText prop is set to true
+  private _getPreviewText(item: IComboBoxOption): string {
+    return item.useAriaLabelAsText && item.ariaLabel ? item.ariaLabel : item.text;
+  }
 }
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 f73bd90d5a2dc..af659255ea9af 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
@@ -26,6 +26,13 @@ export interface IComboBoxOption extends ISelectableOption {
    * the prop comboBoxOptionStyles
    */
   styles?: Partial<IComboBoxOptionStyles>;
+
+  /**
+   * In scenarios where embedded data is used at the text prop, we will use the ariaLabel prop
+   * to set the aria-label and preview text. Default to false
+   * @default false;
+   */
+  useAriaLabelAsText?: boolean;
 }
 
 export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox> {
@@ -46,7 +53,7 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox>
    * 2) a manually edited value is submitted. In this case there may not be a matched option if allowFreeform is also true
    *    (and hence only value would be true, the other parameter would be null in this case)
    */
-  onChanged?: (option?: IComboBoxOption, index?: number, value?: string) => void;
+  onChanged?: (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any) => void;
 
   /**
    * Callback issued when the user changes the pending value in ComboBox
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 5ef42f2043090..264a0698ee632 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx
@@ -3,7 +3,8 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 import { ComboBoxBasicExample } from './examples/ComboBox.Basic.Example';
 import { ComboBoxCustomStyledExample } from './examples/ComboBox.CustomStyled.Example';
@@ -14,11 +15,12 @@ const ComboBoxBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src
 const ComboBoxCustomStyledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx') as string;
 
 export class ComboBoxPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='ComboBox'
         componentName='ComboBoxExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/ComboBox'
         exampleCards={
           <div>
             <ExampleCard title='ComboBox' code={ ComboBoxBasicExampleCode }>
@@ -38,26 +40,22 @@ export class ComboBoxPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              A ComboBox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input (unless allowFreeform and autoComplete are both false). They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed if autoComplete and/or allowFreeform are true, the user can select a new value by typing.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use a ComboBox when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained.</li>
-              <li>ComboBoxs contain shortened statements or words.</li>
-              <li>Use a ComboBox when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options).</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div />
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
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 fc855b7ed0bde..cd78735bf8aed 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx
@@ -12,14 +12,14 @@ export class VirtualizedComboBox extends BaseComponent<IComboBoxProps, {}> imple
   private _list = createRef<IList>();
 
   public dismissMenu(): void {
-    if (this._comboBox.value) {
-      return this._comboBox.value.dismissMenu();
+    if (this._comboBox.current) {
+      return this._comboBox.current.dismissMenu();
     }
   }
 
   public focus() {
-    if (this._comboBox.value) {
-      this._comboBox.value.focus();
+    if (this._comboBox.current) {
+      this._comboBox.current.focus();
       return true;
     }
 
@@ -55,6 +55,6 @@ export class VirtualizedComboBox extends BaseComponent<IComboBoxProps, {}> imple
 
   protected _onScrollToItem = (itemIndex: number): void => {
     // We are using the List component, call scrollToIndex
-    this._list.value && this._list.value.scrollToIndex(itemIndex);
+    this._list.current && this._list.current.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 4021026e6c9e7..211b3f2f3ca29 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
@@ -106,7 +106,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
     id="ComboBox0wrapper"
   >
     <input
-      aria-activedescendant={null}
+      aria-activedescendant={undefined}
       aria-autocomplete="both"
       aria-describedby="ComboBox0-option"
       aria-disabled={undefined}
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDonts.md b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDonts.md
new file mode 100644
index 0000000000000..a36e5f39639a4
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDonts.md
@@ -0,0 +1 @@
+<!-- Insert Donts Here -->
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDos.md b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDos.md
new file mode 100644
index 0000000000000..f610e8facabd7
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxDos.md
@@ -0,0 +1,3 @@
+- Use a ComboBox when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained.
+- ComboBoxs contain shortened statements or words.
+- Use a ComboBox when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options).
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxOverview.md b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxOverview.md
new file mode 100644
index 0000000000000..447c617239e24
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/docs/ComboBoxOverview.md
@@ -0,0 +1 @@
+A ComboBox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input (unless allowFreeform and autoComplete are both false). They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed if autoComplete and/or allowFreeform are true, the user can select a new value by typing.
\ No newline at end of file
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 f66f68146c860..6bcecaf358a83 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
@@ -13,22 +13,22 @@ import { IComboBox } from '../ComboBox.types';
 import { PrimaryButton } from '../../../Button';
 
 const INITIAL_OPTIONS =
-[
-  { key: 'Header', text: 'Theme Fonts', itemType: SelectableOptionMenuItemType.Header },
-  { key: 'A', text: 'Arial Black', fontFamily: '"Arial Black", "Arial Black_MSFontService", sans-serif' },
-  { key: 'B', text: 'Time New Roman', fontFamily: '"Times New Roman", "Times New Roman_MSFontService", serif' },
-  { key: 'C', text: 'Comic Sans MS', fontFamily: '"Comic Sans MS", "Comic Sans MS_MSFontService", fantasy' },
-  { key: 'C1', text: 'Calibri', fontFamily: 'Calibri, Calibri_MSFontService, sans-serif' },
-  { 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' }
-];
+  [
+    { key: 'Header', text: 'Theme Fonts', itemType: SelectableOptionMenuItemType.Header },
+    { key: 'A', text: 'Arial Black', fontFamily: '"Arial Black", "Arial Black_MSFontService", sans-serif' },
+    { key: 'B', text: 'Time New Roman', fontFamily: '"Times New Roman", "Times New Roman_MSFontService", serif' },
+    { key: 'C', text: 'Comic Sans MS', fontFamily: '"Comic Sans MS", "Comic Sans MS_MSFontService", fantasy' },
+    { key: 'C1', text: 'Calibri', fontFamily: 'Calibri, Calibri_MSFontService, sans-serif' },
+    { 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' }
+  ];
 
 export class ComboBoxBasicExample extends React.Component<{}, {
   // For controled single select
@@ -85,9 +85,9 @@ export class ComboBoxBasicExample extends React.Component<{}, {
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { options, selectedOptionKey, value } = this.state;
-    const { optionsMulti, selectedOptionKeys, valueMulti } = this.state;
+    const { optionsMulti } = this.state;
 
     return (
       <div className='ms-ComboBoxBasicExample'>
@@ -129,7 +129,7 @@ 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
+        // tslint:enable:jsx-no-lambda
         />
 
         <ComboBox
@@ -286,7 +286,7 @@ 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
+        // tslint:enable:jsx-no-lambda
         />
       </div>
 
@@ -341,7 +341,7 @@ export class ComboBoxBasicExample extends React.Component<{}, {
 
     this.setState({
       optionsMulti: INITIAL_OPTIONS,
-      selectedOptionKeys: [ 'C1' ],
+      selectedOptionKeys: ['C1'],
       valueMulti: undefined
     });
 
@@ -407,7 +407,7 @@ export class ComboBoxBasicExample extends React.Component<{}, {
     this._basicCombobox.focus(true);
   }
 
-  private _basicComboBoxComponentRef = (component: IComboBox) => {
+  private _basicComboBoxComponentRef = (component: IComboBox): void => {
     this._basicCombobox = component;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx
index 6f1ae3b456899..134d4fecc1978 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx
@@ -45,7 +45,7 @@ export class ComboBoxCustomStyledExample extends React.Component<any, any> {
     },
     ];
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-ComboBoxCustomStyledExample'>
         <ComboBox
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 2783c1710eaed..f6de37f1b487b 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
@@ -1,6 +1,4 @@
-/* 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';
@@ -76,7 +74,7 @@ describe('CommandBar', () => {
         items={ items }
       />
     ) as React.Component<CommandBar, {}>;
-    document.body.appendChild(ReactDOM.findDOMNode(renderedContent));
+    document.body.appendChild(ReactDOM.findDOMNode(renderedContent) as Element);
 
     const [item1, item2, item3] = ['.item1', '.item2', '.item3'].map(i => document.querySelector(i)!.children[0]);
     expect(item1.getAttribute('aria-setsize')).toBe('3');
@@ -107,7 +105,7 @@ describe('CommandBar', () => {
         items={ items }
       />
     ) as React.Component<CommandBar, {}>;
-    document.body.appendChild(ReactDOM.findDOMNode(renderedContent));
+    document.body.appendChild(ReactDOM.findDOMNode(renderedContent) as Element);
 
     const menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
     ReactTestUtils.Simulate.click(menuItem);
@@ -137,7 +135,7 @@ describe('CommandBar', () => {
         items={ items }
       />
     ) as React.Component<CommandBar, {}>;
-    document.body.appendChild(ReactDOM.findDOMNode(renderedContent));
+    document.body.appendChild(ReactDOM.findDOMNode(renderedContent) as Element);
 
     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 223dc0968e366..3456b7e577bf4 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
@@ -67,13 +67,13 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     this._id = getId('CommandBar');
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     // Asynchronously update command bar layout to eliminate forced synchronous reflow
     this._asyncMeasure();
     this._events.on(window, 'resize', this._updateRenderedItems);
   }
 
-  public componentWillReceiveProps(nextProps: ICommandBarProps) {
+  public componentWillReceiveProps(nextProps: ICommandBarProps): void {
     this.setState(this._getStateFromProps(nextProps));
     this._commandItemWidths = null;
   }
@@ -85,7 +85,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isSearchBoxVisible, searchPlaceholderText, className } = this.props;
     const { renderedItems, contextualMenuProps, expandedMenuItemKey, expandedMenuId, renderedOverflowItems, contextualMenuTarget, renderedFarItems } = this.state;
     let searchBox;
@@ -169,11 +169,11 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
   }
 
   public focus() {
-    const { value: focusZone } = this._focusZone;
+    const { current: focusZone } = this._focusZone;
     focusZone && focusZone.focus();
   }
 
-  private _renderItemInCommandBar(item: ICommandBarItemProps, posInSet: number, setSize: number, expandedMenuItemKey: string, isFarItem?: boolean) {
+  private _renderItemInCommandBar(item: ICommandBarItemProps, posInSet: number, setSize: number, expandedMenuItemKey: string, isFarItem?: boolean): JSX.Element {
     if (item.onRender) {
       return (
         <div className={ css('ms-CommandBarItem', styles.item, item.className) } key={ item.key } ref={ item.key }>
@@ -210,7 +210,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
           id={ this._id + item.key }
           className={ className }
           href={ item.disabled ? undefined : item.href }
-          onClick={ item.onClick }
+          onClick={ this._onItemClick(item) }
           title={ '' }
           aria-disabled={ item.inactive }
           data-command-key={ itemKey }
@@ -310,7 +310,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     );
   }
 
-  private _renderIcon(item: IContextualMenuItem) {
+  private _renderIcon(item: IContextualMenuItem): JSX.Element {
     // Only present to allow continued use of item.icon which is deprecated.
     const iconProps: IIconProps = item.iconProps ? item.iconProps : {
       iconName: item.icon
@@ -322,16 +322,16 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     return <Icon { ...iconProps } className={ iconClassName } />;
   }
 
-  private _asyncMeasure() {
+  private _asyncMeasure(): void {
     this._async.requestAnimationFrame(() => {
       this._updateItemMeasurements();
       this._updateRenderedItems();
     });
   }
 
-  private _updateItemMeasurements() {
+  private _updateItemMeasurements(): void {
     // the generated width for overflow is 35 in chrome, 38 in IE, but the actual value is 41.5
-    if (this._overflow.value || (this.props.overflowItems && this.props.overflowItems.length)) {
+    if (this._overflow.current || (this.props.overflowItems && this.props.overflowItems.length)) {
       this._overflowWidth = OVERFLOW_WIDTH;
     } else {
       this._overflowWidth = 0;
@@ -354,12 +354,12 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     }
   }
 
-  private _updateRenderedItems() {
+  private _updateRenderedItems(): void {
     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 commandSurface = this._commandSurface.current;
+    const farCommandSurface = this._farCommandSurface.current;
+    const commandBarRegion = this._commandBarRegion.current;
+    const searchSurface = this._searchSurface.current;
     const renderedItems = [...items];
     let renderedOverflowItems = overflowItems;
     let consumedWidth = 0;
@@ -417,7 +417,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     });
   }
 
-  private _onItemClick(item: IContextualMenuItem): (ev: React.MouseEvent<HTMLButtonElement>) => void {
+  private _onItemClick(item: IContextualMenuItem): (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void {
     return (ev: React.MouseEvent<HTMLButtonElement>): void => {
       if (item.inactive) {
         return;
@@ -453,7 +453,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
   }
 
   private _onContextMenuDismiss = (ev?: any) => {
-    const { value: commandSurface } = this._commandSurface;
+    const { current: commandSurface } = this._commandSurface;
 
     if (!ev || !ev.relatedTarget || commandSurface && !commandSurface.contains(ev.relatedTarget as HTMLElement)) {
       const { contextualMenuProps } = this.state;
@@ -483,7 +483,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     };
   }
 
-  private _getContextualMenuPropsAfterUpdate(renderedItems: IContextualMenuItem[], overflowItems: IContextualMenuItem[]) {
+  private _getContextualMenuPropsAfterUpdate(renderedItems: IContextualMenuItem[], overflowItems: IContextualMenuItem[]): IContextualMenuProps | undefined {
     if (this.state && this.state.expandedMenuItemKey) {
       if (this.state.expandedMenuItemKey === OVERFLOW_KEY) {
         // Keep the overflow menu open
@@ -498,10 +498,10 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
       }
     }
 
-    return null;
+    return;
   }
 
-  private _getContextualMenuPropsFromItem(item: IContextualMenuItem) {
+  private _getContextualMenuPropsFromItem(item: IContextualMenuItem): IContextualMenuProps | undefined {
     return item.subMenuProps || (item.items && { items: item.items });
   }
 }
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 e8ec7b2d84802..04b10847c7cd2 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx
@@ -3,7 +3,8 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 import { items, overflowItems, farItems } from './examples/data';
 import { CommandBarBasicExample } from './examples/CommandBar.Basic.Example';
@@ -17,17 +18,18 @@ const CommandBarNoFocusableItemsExampleCode = require('!raw-loader!office-ui-fab
 const CommandBarCustomizationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx') as string;
 
 export class CommandBarPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     const cmdBarParamsTextAndIcons: any = { items, overflowItems, farItems };
 
     return (
       <ComponentPage
-        title={ 'CommandBar' }
+        title='CommandBar'
         componentName='CommandBarExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/CommandBar'
         exampleCards={
           <div>
             <ExampleCard title='CommandBar with search box and overflowing menu items' code={ CommandBarBasicExampleCode }>
-              <CommandBarBasicExample {...cmdBarParamsTextAndIcons} />
+              <CommandBarBasicExample { ...cmdBarParamsTextAndIcons } />
             </ExampleCard>
             <ExampleCard title='CommandBar with non-focusable items' code={ CommandBarNoFocusableItemsExampleCode }>
               <CommandBarNonFocusableItemsExample />
@@ -46,45 +48,27 @@ export class CommandBarPage extends React.Component<IComponentDemoPageProps, {}>
           />
         }
         overview={
-          <div>
-            <p>
-              CommandBar is a surface that houses commands that operate on the content of the window, panel, or parent region it resides above. They are one of the most visible and recognizable ways to surface commands, and can be an intuitive method for interacting with content on the page. However, if overloaded or poorly organized, they can be difficult to use and hide valuable commands from your user. CommandBars can also display a search box for finding content; hold simple commands as well as menus; and display the status of ongoing actions.
-            </p>
-            <p>
-              Commands should be sorted in order of importance, from left to right or right to left depending on the culture. Secondarily, organize commands in logical groupings for easier recall. CommandBars work best when they display no more than 5-7 commands. This helps users quickly find your most valuable features. If you need to show more commands, consider using the overflow menu. If you need to render status, or viewing controls, these go on the right side of the CommandBar (or left side if in a left to right experience). Do not display more than 2-3 items on the right side as it will make the overall CommandBar difficult to parse.
-            </p>
-            <p>
-              All command items should have an icon and a label. Commands can render as labels only as well. In smaller widths, commands can just use icon only, but only for the most recognizable and frequently used commands. All other commands should go into an overflow where text labels can be shown.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/CommandBar/docs/CommandBarOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Sort commands in order of importance from left to right or right to left depending on the culture.</li>
-              <li>Organize commands into logical groupings.</li>
-              <li>Display no more than 5-7 commands.</li>
-              <li>Use overflow to house less frequently-used commands.</li>
-              <li>In small breakpoints, only have the most recognizable commands render as icon only.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Fill the command bar completely from left to right.</li>
-              <li>Use icons only for commands in larger widths.</li>
-              <li>Display more than 2-3 items on the right side of the bar (or left side in left to right experiences).</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...CommandBarStatus}
+            { ...CommandBarStatus }
           />
         }
       />
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 f4d10a32c15ac..cdfa05f114431 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
@@ -9,7 +9,6 @@ exports[`CommandBar renders CommandBar correctly 1`] = `
     aria-labelledby={undefined}
     className="ms-FocusZone"
     data-focuszone-id="FocusZone1"
-    onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md
new file mode 100644
index 0000000000000..f955732f34000
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md
@@ -0,0 +1,3 @@
+- Fill the command bar completely from left to right.
+- Use icons only for commands in larger widths.
+- Display more than 2-3 items on the right side of the bar (or left side in left to right experiences).
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDos.md b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDos.md
new file mode 100644
index 0000000000000..d78a921b03f72
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDos.md
@@ -0,0 +1,5 @@
+- Sort commands in order of importance from left to right or right to left depending on the culture.
+- Organize commands into logical groupings.
+- Display no more than 5-7 commands.
+- Use overflow to house less frequently-used commands.
+- In small breakpoints, only have the most recognizable commands render as icon only.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarOverview.md b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarOverview.md
new file mode 100644
index 0000000000000..7ee4004822b8f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarOverview.md
@@ -0,0 +1,5 @@
+CommandBar is a surface that houses commands that operate on the content of the window, panel, or parent region it resides above. They are one of the most visible and recognizable ways to surface commands, and can be an intuitive method for interacting with content on the page. However, if overloaded or poorly organized, they can be difficult to use and hide valuable commands from your user. CommandBars can also display a search box for finding content; hold simple commands as well as menus; and display the status of ongoing actions.
+
+Commands should be sorted in order of importance, from left to right or right to left depending on the culture. Secondarily, organize commands in logical groupings for easier recall. CommandBars work best when they display no more than 5-7 commands. This helps users quickly find your most valuable features. If you need to show more commands, consider using the overflow menu. If you need to render status, or viewing controls, these go on the right side of the CommandBar (or left side if in a left to right experience). Do not display more than 2-3 items on the right side as it will make the overall CommandBar difficult to parse.
+
+All command items should have an icon and a label. Commands can render as labels only as well. In smaller widths, commands can just use icon only, but only for the most recognizable and frequently used commands. All other commands should go into an overflow where text labels can be shown.
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 85e85d209c54a..43d2d538c1abe 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
@@ -15,7 +15,7 @@ export class CommandBarBasicExample extends React.Component<any, any> {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { items, overflowItems, farItems } = this.props;
     const {
       isSearchBoxVisible: searchBoxVisible,
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 0567f01908c54..d13168457c96e 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
@@ -17,7 +17,7 @@ export class CommandBarCustomizationExample extends React.Component<{}, ISplitDr
     this.state = { isContextMenuShown: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <CommandBar
@@ -53,7 +53,7 @@ export class CommandBarCustomizationExample extends React.Component<{}, ISplitDr
     );
   }
 
-  private _renderSplitButtonMenuItem = (item: IContextualMenuItem) => {
+  private _renderSplitButtonMenuItem = (item: IContextualMenuItem): JSX.Element => {
     const darkerBG = this.state.isContextMenuShown && styles.darkerBG;
 
     const dropDownButtonClass = css(
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.NonFocusable.Example.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.NonFocusable.Example.tsx
index 47ede9e27af46..49c7bab72c934 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.NonFocusable.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.NonFocusable.Example.tsx
@@ -3,7 +3,7 @@ import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
 import { itemsNonFocusable, farItemsNonFocusable } from './data-nonFocusable';
 
 export class CommandBarNonFocusableItemsExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <CommandBar
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 0db28c87f8c76..621eb6a619eba 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
@@ -22,7 +22,6 @@ export interface IMenuItemClassNames {
   subMenuIcon: string;
   label: string;
   splitContainer: string;
-  splitContainerFocus: string;
   splitPrimary: string;
   splitMenu: string;
   linkContentMenu: string;
@@ -201,9 +200,6 @@ export const getItemClassNames = memoizeFunction((
     ],
     splitContainer: [
       styles.splitButtonFlexContainer,
-    ],
-    splitContainerFocus: [
-      styles.splitButtonFlexContainerFocus,
       !disabled && !checked && [{
         selectors: {
           '.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
index d89d386c5c723..90244c543cde1 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
@@ -168,17 +168,16 @@ export const getMenuItemStyles = memoizeFunction((
       flexShrink: '0',
       fontSize: FontSizes.mini
     },
-    splitButtonFlexContainer: {
-      display: 'flex',
-      height: ContextualMenuItemHeight,
-      flexWrap: 'nowrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    splitButtonSeparator: {},
-    splitButtonFlexContainerFocus: [
-      getFocusStyle(theme)
-    ]
+    splitButtonFlexContainer: [
+      getFocusStyle(theme),
+      {
+        display: 'flex',
+        height: ContextualMenuItemHeight,
+        flexWrap: 'nowrap',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }],
+    splitButtonSeparator: {}
   };
 
   return concatStyleSets(menuItemStyles);
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 e4d912aa78495..48505643659b0 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { Promise } from 'es6-promise';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import {
@@ -637,8 +635,8 @@ describe('ContextualMenu', () => {
 
     // Alter the Layer's prototype so that we can confirm that it mounts before the contextualmenu mounts.
     /* tslint:disable:no-function-expression */
-    Layer.prototype.componentDidMount = function (componentDidMount) {
-      return function () {
+    Layer.prototype.componentDidMount = function (componentDidMount): () => void {
+      return function (): void {
         if (menuMounted) {
           menuMountedFirst = true;
         }
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 a60ecc7fb1777..447d4f49ecd82 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -125,25 +125,34 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     }
   }
 
-  public componentWillUpdate(newProps: IContextualMenuProps) {
+  public componentWillUpdate(newProps: IContextualMenuProps): void {
     if (newProps.target !== this.props.target) {
       const newTarget = newProps.target;
       this._setTargetWindowAndElement(newTarget!);
     }
+    if (newProps.hidden !== this.props.hidden) {
+      if (newProps.hidden) {
+        this._onMenuClosed();
+      } else {
+        this._onMenuOpened();
+        this._previousActiveElement = this._targetWindow ? this._targetWindow.document.activeElement as HTMLElement : null;
+      }
+    }
   }
 
   // Invoked once, both on the client and server, immediately before the initial rendering occurs.
   public componentWillMount() {
     const target = this.props.target;
     this._setTargetWindowAndElement(target!);
-    this._previousActiveElement = this._targetWindow ? this._targetWindow.document.activeElement as HTMLElement : null;
+    if (!this.props.hidden) {
+      this._previousActiveElement = this._targetWindow ? this._targetWindow.document.activeElement as HTMLElement : null;
+    }
   }
 
   // Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
-  public componentDidMount() {
-    this._events.on(this._targetWindow, 'resize', this.dismiss);
-    if (this.props.onMenuOpened) {
-      this.props.onMenuOpened(this.props);
+  public componentDidMount(): void {
+    if (!this.props.hidden) {
+      this._onMenuOpened();
     }
   }
 
@@ -154,7 +163,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       // 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);
+      // Note: Cannot be replaced by this._async.setTimout because those will be removed by the time this is called.
+      setTimeout(() => { this._previousActiveElement && this._previousActiveElement!.focus(); }, 0);
     }
 
     if (this.props.onMenuDismissed) {
@@ -270,6 +280,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
           onScroll={ this._onScroll }
           bounds={ bounds }
           directionalHintFixed={ directionalHintFixed }
+          hidden={ this.props.hidden }
         >
           <div
             role='menu'
@@ -316,6 +327,16 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     }
   }
 
+  private _onMenuOpened() {
+    this._events.on(this._targetWindow, 'resize', this.dismiss);
+    this.props.onMenuOpened && this.props.onMenuOpened(this.props);
+  }
+
+  private _onMenuClosed() {
+    this._events.off(this._targetWindow, 'resize', this.dismiss);
+    this._previousActiveElement && this._async.setTimeout(() => { this._previousActiveElement && this._previousActiveElement!.focus(); }, 0);
+  }
+
   /**
    * Gets the focusZoneDirection by using the arrowDirection if specified,
    * the direction specificed in the focusZoneProps, or defaults to FocusZoneDirection.vertical
@@ -491,9 +512,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
           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-owns={ item.key === expandedMenuItemKey ? subMenuId : undefined }
+          aria-haspopup={ itemHasSubmenu || undefined }
+          aria-expanded={ itemHasSubmenu ? item.key === expandedMenuItemKey : undefined }
           aria-posinset={ focusableElementIndex + 1 }
           aria-setsize={ totalItemCount }
           aria-disabled={ this._isItemDisabled(item) }
@@ -554,10 +575,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       href: item.href,
       title: item.title,
       'aria-label': ariaLabel,
-      'aria-haspopup': itemHasSubmenu || null,
-      'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null,
-      'aria-expanded': itemHasSubmenu ? item.key === expandedMenuItemKey : null,
-      'aria-checked': isChecked,
+      'aria-haspopup': itemHasSubmenu || undefined,
+      'aria-owns': item.key === expandedMenuItemKey ? subMenuId : undefined,
+      'aria-expanded': itemHasSubmenu ? item.key === expandedMenuItemKey : undefined,
+      'aria-checked': !!isChecked,
       'aria-posinset': focusableElementIndex + 1,
       'aria-setsize': totalItemCount,
       'aria-disabled': this._isItemDisabled(item),
@@ -567,8 +588,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
     return (
       <button
-        { ...buttonNativeProperties }
-        { ...itemButtonProperties }
+        { ...buttonNativeProperties as React.ButtonHTMLAttributes<HTMLButtonElement> }
+        { ...itemButtonProperties as React.ButtonHTMLAttributes<HTMLButtonElement> }
       >
         <ChildrenRenderer
           item={ item }
@@ -597,7 +618,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         }
         role={ 'button' }
         aria-labelledby={ item.ariaLabel }
-        className={ classNames.splitContainerFocus }
+        className={ classNames.splitContainer }
         aria-disabled={ this._isItemDisabled(item) }
         aria-haspopup={ true }
         aria-describedby={ item.ariaDescription }
@@ -612,14 +633,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         tabIndex={ 0 }
         data-is-focusable={ true }
       >
-        <span
-          aria-hidden={ true }
-          className={ classNames.splitContainer }
-        >
-          { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
-          { this._renderSplitDivider(item) }
-          { this._renderSplitIconButton(item, classNames, index) }
-        </span>
+        { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
+        { this._renderSplitDivider(item) }
+        { this._renderSplitIconButton(item, classNames, index) }
       </div >
     );
   }
@@ -642,7 +658,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       checked: item.checked,
       icon: item.icon,
       iconProps: item.iconProps,
-      'data-is-focusable': false
+      'data-is-focusable': false,
+      'aria-hidden': true
     } as IContextualMenuItem;
     return React.createElement('button',
       getNativeProps(itemProps, buttonProperties),
@@ -677,7 +694,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         onMouseLeave: this._onMouseItemLeave.bind(this, item),
         onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
         onMouseMove: this._onItemMouseMove.bind(this, item),
-        'data-is-focusable': false
+        'data-is-focusable': false,
+        'aria-hidden': true
       }),
       <ChildrenRenderer item={ itemProps } classNames={ classNames } index={ index } hasIcons={ false } />
     );
@@ -775,7 +793,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
     const targetElement = ev.currentTarget as HTMLElement;
 
-    if (!this._isScrollIdle || targetElement === this._targetWindow.document.activeElement as HTMLElement) {
+    if (!this._isScrollIdle ||
+      this._enterTimerId !== undefined ||
+      targetElement === this._targetWindow.document.activeElement as HTMLElement) {
       return;
     }
 
@@ -840,11 +860,13 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         const splitButtonContainer = this._splitButtonContainers.get(item.key);
         this._onItemSubMenuExpand(item,
           ((item.split && splitButtonContainer) ? splitButtonContainer : targetElement) as HTMLElement);
+        this._enterTimerId = undefined;
       }, this._navigationIdleDelay);
     } else {
       this._enterTimerId = this._async.setTimeout(() => {
         this._onSubMenuDismiss(ev);
         targetElement.focus();
+        this._enterTimerId = undefined;
       }, timeoutDuration);
     }
   }
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 550192d5354e7..7960f87d042ef 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
@@ -242,6 +242,15 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
    * @default {direction: FocusZoneDirection.vertical}
    */
   focusZoneProps?: IFocusZoneProps;
+
+  /**
+   * If specified, renders the ContextualMenu in a hidden state.
+   * Use this flag, rather than rendering a ContextualMenu conditionally based on visibility,
+   * to improve rendering performance when it becomes visible.
+   * Note: When ContextualMenu is hidden its content will not be rendered. It will only render
+   * once the ContextualMenu is visible.
+   */
+  hidden?: boolean;
 }
 
 export interface IContextualMenuItem {
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
index 971a113e3921f..76545c463f2c1 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx
@@ -135,7 +135,6 @@ function getMenuItemClassNames(): IMenuItemClassNames {
     subMenuIcon: 'subMenuIcon',
     label: 'label',
     splitContainer: 'splitContainer',
-    splitContainerFocus: 'splitContainerFocus',
     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
index 667d14bae1540..de8867093431f 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
@@ -1,7 +1,5 @@
 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';
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 eee454bb403db..1307bd2ae58f9 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx
@@ -3,7 +3,8 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 import { ContextualMenuBasicExample } from './examples/ContextualMenu.Basic.Example';
 import { ContextualMenuIconExample } from './examples/ContextualMenu.Icon.Example';
@@ -30,11 +31,12 @@ const ContextualMenuWithScrollBarExampleCode = require
 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() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='ContextualMenu'
         componentName='ContextualMenuExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/ContextualMenu'
         exampleCards={
           <div>
             <ExampleCard
@@ -109,40 +111,22 @@ export class ContextualMenuPage extends React.Component<IComponentDemoPageProps,
           />
         }
         overview={
-          <div>
-            <p>
-              ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places.
-            </p>
-            <p>
-              There are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons.
-            </p>
-            <p>
-              Organize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use to display commands.</li>
-              <li>Divide groups of commands with rules.</li>
-              <li>Use selection checks without icons.</li>
-              <li>Provide submenus for sets of related commands that aren’t as critical as others.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Use them to display content.</li>
-              <li>Show commands as one large group.</li>
-              <li>Mix checks and icons.</li>
-              <li>Create submenus of submenus.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
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
index 65c457d0571f8..11c4226f3d2f8 100644
--- 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
@@ -16,7 +16,6 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
-        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
@@ -142,7 +141,6 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
-        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
@@ -289,7 +287,6 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
-        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
@@ -407,7 +404,6 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
-        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDonts.md b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDonts.md
new file mode 100644
index 0000000000000..20c116b591dce
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDonts.md
@@ -0,0 +1,4 @@
+- Use them to display content.
+- Show commands as one large group.
+- Mix checks and icons.
+- Create submenus of submenus.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDos.md b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDos.md
new file mode 100644
index 0000000000000..bd79da4125bfa
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDos.md
@@ -0,0 +1,4 @@
+- Use to display commands.
+- Divide groups of commands with rules.
+- Use selection checks without icons.
+- Provide submenus for sets of related commands that aren’t as critical as others.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuOverview.md b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuOverview.md
new file mode 100644
index 0000000000000..5fe6dc43f8b9a
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuOverview.md
@@ -0,0 +1,5 @@
+ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places.
+
+There are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons.
+
+Organize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.
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 11eb5e116fa9e..b3f9ac39554ac 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
@@ -12,7 +12,7 @@ export class ContextualMenuBasicExample extends React.Component {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
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 1eed388377c90..3c0e11b2f977f 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
@@ -21,7 +21,7 @@ export class ContextualMenuCheckmarksExample extends React.Component<{}, IContex
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { selection } = this.state;
 
     return (
@@ -169,7 +169,7 @@ export class ContextualMenuCheckmarksExample extends React.Component<{}, IContex
     );
   }
 
-  private _onToggleSelect(ev?: React.MouseEvent<HTMLButtonElement>, item?: IContextualMenuItem) {
+  private _onToggleSelect(ev?: React.MouseEvent<HTMLButtonElement>, item?: IContextualMenuItem): void {
     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
index 583e6a1b07f03..0bfb64cf8baad 100644
--- 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
@@ -13,7 +13,7 @@ export class ContextualMenuWithCustomMenuItemExample extends React.Component {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
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 68773429a0d2f..956d8b2677db8 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
@@ -5,7 +5,7 @@ import { FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import './ContextualMenuExample.scss';
 
 export class ContextualMenuCustomizationExample extends React.Component<{}, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <DefaultButton
         className='ContextualMenuButton3'
@@ -197,7 +197,7 @@ export class ContextualMenuCustomizationExample extends React.Component<{}, {}>
     );
   }
 
-  private _renderCategoriesList(item: any) {
+  private _renderCategoriesList(item: any): JSX.Element {
     return (
       <ul className='ms-ContextualMenu-customizationExample-categoriesList'>
         <li className='ms-ContextualMenu-item'>
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
index d41009e19f630..5d00adf7062e8 100644
--- 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
@@ -5,7 +5,7 @@ import { FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import './ContextualMenuExample.scss';
 
 export class ContextualMenuCustomizationWithNoWrapExample extends React.Component<{}, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <DefaultButton
         className='ContextualMenuButton3'
@@ -208,7 +208,7 @@ export class ContextualMenuCustomizationWithNoWrapExample extends React.Componen
     );
   }
 
-  private _renderCategoriesList(item: any) {
+  private _renderCategoriesList(item: any): JSX.Element {
     return (
       <ul className='ms-ContextualMenu-customizationExample-categoriesList'>
         <li className='ms-ContextualMenu-item'>
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 648b0603fec52..f39a3420d171f 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
@@ -49,7 +49,7 @@ export class ContextualMenuDirectionalExample extends React.Component<{}, IConte
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       beakWidth,
       directionalHint,
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx
index 779121c596699..5d0b3f390c4ff 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Header.Example.tsx
@@ -4,7 +4,7 @@ import './ContextualMenuExample.scss';
 
 export class ContextualMenuHeaderExample extends React.Component<{}, {}> {
 
-  public render() {
+  public render(): JSX.Element {
 
     return (
       <DefaultButton
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 159d6f6a4922f..989ad928025fb 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
@@ -13,7 +13,7 @@ export class ContextualMenuIconExample extends React.Component<{}, { showCallout
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { showCallout } = this.state;
 
     return (
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 c78318860195d..5459e9e4fd262 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
@@ -14,7 +14,7 @@ export class ContextualMenuWithScrollBarExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx
index 696a02cce5a65..46074f77c25e6 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx
@@ -5,7 +5,7 @@ import './ContextualMenuExample.scss';
 
 export class ContextualMenuSectionExample extends React.Component<any, any> {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
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 957b11706bcdd..53477392d2102 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
@@ -17,7 +17,7 @@ export class ContextualMenuSubmenuExample extends React.Component<any, IContextu
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <TextField value={ String(this.state.hoverDelay) } onChanged={ this._onHoverDelayChanged } />
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 ea2d0cde4d7ac..d238d599c7f65 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
@@ -140,7 +140,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     this._preventFocusOpeningPicker = false;
   }
 
-  public componentWillReceiveProps(nextProps: IDatePickerProps) {
+  public componentWillReceiveProps(nextProps: IDatePickerProps): void {
     const { formatDate, isRequired, strings, value, minDate, maxDate } = nextProps;
 
     if (compareDates(this.props.minDate!, nextProps.minDate!) &&
@@ -183,7 +183,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       firstDayOfWeek,
       strings,
@@ -245,7 +245,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
             className={ css('ms-DatePicker-callout') }
             gapSpace={ 0 }
             doNotLayer={ false }
-            target={ this._datePickerDiv.value }
+            target={ this._datePickerDiv.current }
             directionalHint={ DirectionalHint.bottomLeftEdge }
             onDismiss={ this._calendarDismissed }
             onPositioned={ this._onCalloutPositioned }
@@ -276,8 +276,8 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
   }
 
   public focus(): void {
-    if (this._textField.value) {
-      this._textField.value.focus();
+    if (this._textField.current) {
+      this._textField.current.focus();
     }
   }
 
@@ -301,8 +301,8 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
   }
 
   private _onCalloutPositioned = (): void => {
-    if (this._calendar.value) {
-      this._calendar.value.focus();
+    if (this._calendar.current) {
+      this._calendar.current.focus();
     }
   }
 
@@ -381,7 +381,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     this._onTextFieldClick(ev);
   }
 
-  private _showDatePickerPopup() {
+  private _showDatePickerPopup(): void {
     if (!this.state.isDatePickerShown) {
       this._preventFocusOpeningPicker = true;
       this.setState({
@@ -408,8 +408,8 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     this._preventFocusOpeningPicker = true;
     this._dismissDatePickerPopup();
 
-    if (this._textField.value) {
-      this._textField.value.focus();
+    if (this._textField.current) {
+      this._textField.current.focus();
     }
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePickerPage.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePickerPage.tsx
index a0fff0cacf66a..588670c193b61 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePickerPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePickerPage.tsx
@@ -3,7 +3,8 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
-  PropertiesTableSet
+  PropertiesTableSet,
+  PageMarkdown,
 } from '@uifabric/example-app-base';
 import { DatePickerBasicExample } from './examples/DatePicker.Basic.Example';
 import { DatePickerWeekNumbersExample } from './examples/DatePicker.WeekNumbers.Example';
@@ -24,11 +25,12 @@ const DatePickerBoundedExampleCode = require
   ('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx') as string;
 
 export class DatePickerPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='DatePicker'
         componentName='DatePickerExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/DatePicker'
         exampleCards={
           <div>
             <ExampleCard title='Default DatePicker' code={ DatePickerBasicExampleCode }>
@@ -59,40 +61,27 @@ export class DatePickerPage extends React.Component<IComponentDemoPageProps, {}>
           />
         }
         overview={
-          <div>
-            <p>
-              The DatePicker component enables a user to pick a date value.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use the control as a single entity.</li>
-              <li>Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference).</li>
-              <li>The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate.</li>
-              <li>When the control is engaged, the DatePicker renders as a flyout and has defined widths (300px -narrow and 440px – wide). Plan your UI implementation accordingly.</li>
-              <li>The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar.</li>
-              <li>Don't attempt to force resize the control in any way.</li>
-              <li>Don't force the control to render one mode vs. the other (year or month/day)</li>
-              <li>The flyout selector is a light dismiss control. Don't modify this behavior in any way.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...DatePickerStatus}
+            { ...DatePickerStatus }
           />
         }
       />
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 9f3ccff2170c4..889c76539f9c3 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
@@ -15,7 +15,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
           className="ms-TextField-fieldGroup"
         >
           <input
-            aria-describedby={null}
+            aria-describedby={undefined}
             aria-expanded={false}
             aria-haspopup="true"
             aria-invalid={false}
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md
new file mode 100644
index 0000000000000..85f2b8d624707
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md
@@ -0,0 +1,4 @@
+- Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar.
+- Don't attempt to force resize the control in any way.
+- Don't force the control to render one mode vs. the other (year or month/day)
+- The flyout selector is a light dismiss control. Don't modify this behavior in any way.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md
new file mode 100644
index 0000000000000..171ad514160e0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md
@@ -0,0 +1,5 @@
+- Use the control as a single entity.
+- Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference).
+- The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate.
+- When the control is engaged, the DatePicker renders as a flyout and has defined widths (300px -narrow and 440px – wide). Plan your UI implementation accordingly.
+- The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md
new file mode 100644
index 0000000000000..4a3478a0cfe81
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md
@@ -0,0 +1 @@
+The DatePicker component enables a user to pick a date value.
\ No newline at end of file
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 32123e505eefc..463b9dc679424 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() {
+  public render(): JSX.Element {
     const { firstDayOfWeek } = this.state;
 
     return (
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 b47e2b3af5962..546c205a45713 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
@@ -79,7 +79,7 @@ export class DatePickerFormatExample extends React.Component<
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { firstDayOfWeek, value } = this.state;
     const desc =
       'This field is required. One of the support input formats is year dash month dash day.';
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 b9d7a52ada4ee..e9e69fc06ebd1 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
@@ -81,7 +81,7 @@ export class DatePickerInputExample extends React.Component<{}, IDatePickerInput
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { firstDayOfWeek, value } = this.state;
     const desc = 'This field is required. One of the support input formats is year dash month dash day.';
     return (
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 266741888f34f..b0b420abaaad6 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() {
+  public render(): JSX.Element {
     const { firstDayOfWeek } = this.state;
 
     return (
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 393ae9ed5224a..2e3c68fa5a52a 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
@@ -74,7 +74,7 @@ export class DatePickerWeekNumbersExample extends React.Component<{}, IDatePicke
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { firstDayOfWeek } = this.state;
 
     return (
@@ -119,7 +119,7 @@ export class DatePickerWeekNumbersExample extends React.Component<{}, IDatePicke
     );
   }
 
-  private _onDropdownChanged = (option: IDropdownOption) => {
+  private _onDropdownChanged = (option: IDropdownOption): void => {
     this.setState({
       firstDayOfWeek: (DayOfWeek as any)[option.key]
     });
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 6ee10c6f42cd2..4927094cbd7b2 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
@@ -64,11 +64,11 @@ $isPaddedMargin: 24px;
 
     &:hover {
       color: $bodyTextColor;
-      background: $bodyBackgroundColor;
+      background: $listItemHeaderHoveredColor;
     }
 
     &:active {
-      background: $listItemBackgroundHoveredColor;
+      background: $listItemHeaderActivatedColor;
     }
   }
 
@@ -161,16 +161,23 @@ $isPaddedMargin: 24px;
 }
 
 .cellTitle {
-  display: block;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+  box-sizing: border-box;
   overflow: hidden;
-  @include focus-border($position: absolute);
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+  max-width: 100%;
+  @include focus-border($position: auto);
   padding: 0 8px;
 }
 
+.cellName {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 :global(.ms-TooltipHost).checkTooltip {
   display: block;
 }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
index 472d33546005e..57ccecef075c9 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
@@ -39,7 +39,6 @@ describe('DetailsHeader', () => {
     ): { size: number; index: number; } => lastResize = { size, index };
     const headerRef = createRef<IDetailsHeader>();
 
-    const columns = [];
     const wrapper = mount(
       <DetailsHeader
         componentRef={ headerRef }
@@ -51,9 +50,8 @@ describe('DetailsHeader', () => {
       />
     );
 
-    const rootElement = wrapper.getDOMNode();
     const sizerElement = wrapper.find('[data-sizer-index=0]').getDOMNode();
-    const header: any = headerRef.value;
+    const header: any = headerRef.current;
 
     // Trigger a mousedown, which validates that the ref to focuszone is hooking up events.
     EventGroup.raise(
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 445fde7394f44..25a76aa132e93 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
@@ -100,9 +100,9 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     this._id = getId('header');
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     const { selection } = this.props;
-    const focusZone = this._root.value;
+    const focusZone = this._root.current;
     const rootElement = findDOMNode(focusZone as any);
 
     this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);
@@ -113,7 +113,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     this._events.on(rootElement, 'keydown', this._onRootKeyDown);
   }
 
-  public componentWillReceiveProps(newProps: IDetailsHeaderProps) {
+  public componentWillReceiveProps(newProps: IDetailsHeaderProps): void {
     const { groupNestingDepth } = this.state;
 
     if (newProps.groupNestingDepth !== groupNestingDepth) {
@@ -121,7 +121,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { columns, ariaLabel, ariaLabelForSelectAllCheckbox, selectAllVisibility, ariaLabelForSelectionColumn } = this.props;
     const { isAllSelected, columnResizeDetails, isSizing, groupNestingDepth, isAllCollapsed } = this.state;
 
@@ -253,7 +253,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
                           className={ css('ms-DetailsHeader-cellTitle', styles.cellTitle) }
                           data-is-focusable={ column.columnActionsMode !== ColumnActionsMode.disabled }
                           role={ column.columnActionsMode !== ColumnActionsMode.disabled ? 'button' : undefined }
-                          aria-describedby={ `${this._id}-${column.key}-tooltip` }
+                          aria-describedby={ this.props.onRenderColumnHeaderTooltip ? `${this._id}-${column.key}-tooltip` : undefined }
                           onContextMenu={ this._onColumnContextMenu.bind(this, column) }
                           onClick={ this._onColumnClick.bind(this, column) }
                           aria-haspopup={ column.columnActionsMode === ColumnActionsMode.hasDropdown }
@@ -326,10 +326,10 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
 
   /** Set focus to the active thing in the focus area. */
   public focus(): boolean {
-    return Boolean(this._root.value && this._root.value.focus());
+    return Boolean(this._root.current && this._root.current.focus());
   }
 
-  private _renderColumnSizer(columnIndex: number) {
+  private _renderColumnSizer(columnIndex: number): JSX.Element {
     const { columns } = this.props;
     const column = this.props.columns[columnIndex];
     const { columnResizeDetails } = this.state;
@@ -371,7 +371,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
    * @param {number} columnIndex (index of the column user double clicked)
    * @param {React.MouseEvent} ev (mouse double click event)
    */
-  private _onSizerDoubleClick(columnIndex: number, ev: React.MouseEvent<HTMLElement>) {
+  private _onSizerDoubleClick(columnIndex: number, ev: React.MouseEvent<HTMLElement>): void {
     const { onColumnAutoResized, columns } = this.props;
     if (onColumnAutoResized) {
       onColumnAutoResized(columns[columnIndex], columnIndex);
@@ -556,7 +556,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     }
   }
 
-  private _onSelectionChanged() {
+  private _onSelectionChanged(): void {
     const isAllSelected = this.props.selection.isAllSelected();
 
     if (this.state.isAllSelected !== isAllSelected) {
@@ -566,7 +566,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     }
   }
 
-  private _onColumnClick(column: IColumn, ev: React.MouseEvent<HTMLElement>) {
+  private _onColumnClick(column: IColumn, ev: React.MouseEvent<HTMLElement>): void {
     const { onColumnClick } = this.props;
 
     if (column.onColumnClick) {
@@ -578,7 +578,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     }
   }
 
-  private _onColumnContextMenu(column: IColumn, ev: React.MouseEvent<HTMLElement>) {
+  private _onColumnContextMenu(column: IColumn, ev: React.MouseEvent<HTMLElement>): void {
     const { onColumnContextMenu } = this.props;
 
     if (column.onColumnContextMenu) {
@@ -594,7 +594,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     }
   }
 
-  private _onToggleCollapseAll() {
+  private _onToggleCollapseAll(): void {
     const { onToggleCollapseAll } = this.props;
     const newCollapsed = !this.state.isAllCollapsed;
     this.setState({
@@ -606,6 +606,6 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   }
 }
 
-function stopPropagation(ev: React.MouseEvent<HTMLElement>) {
+function stopPropagation(ev: React.MouseEvent<HTMLElement>): void {
   ev.stopPropagation();
 }
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 33137cbe29fcf..acd4fd42ca8c0 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -131,8 +131,8 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   }
 
   public scrollToIndex(index: number, measureItem?: (itemIndex: number) => number): void {
-    this._list.value && this._list.value.scrollToIndex(index, measureItem);
-    this._groupedList.value && this._groupedList.value.scrollToIndex(index, measureItem);
+    this._list.current && this._list.current.scrollToIndex(index, measureItem);
+    this._groupedList.current && this._groupedList.current.scrollToIndex(index, measureItem);
   }
 
   public focusIndex(
@@ -152,7 +152,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     }
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     if (this._dragDropHelper) {
       this._dragDropHelper.dispose();
     }
@@ -174,7 +174,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       this.props.items !== prevProps.items &&
       this.props.items.length > 0 &&
       this.state.focusedItemIndex !== -1 &&
-      !elementContains(this._root.value, document.activeElement as HTMLElement, false)
+      !elementContains(this._root.current, document.activeElement as HTMLElement, false)
     ) {
       // Item set has changed and previously-focused item is gone.
       // Set focus to item at index of previously-focused item if it is in range,
@@ -197,7 +197,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     }
   }
 
-  public componentWillReceiveProps(newProps: IDetailsListProps) {
+  public componentWillReceiveProps(newProps: IDetailsListProps): void {
     const {
       checkboxVisibility,
       items,
@@ -250,7 +250,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       ariaLabelForListHeader,
       ariaLabelForSelectAllCheckbox,
@@ -424,7 +424,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     );
   }
 
-  public forceUpdate() {
+  public forceUpdate(): void {
     super.forceUpdate();
     this._forceListUpdates();
   }
@@ -502,26 +502,26 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     return onRenderRow(rowProps, this._onRenderRow);
   }
 
-  private _onGroupExpandStateChanged(isSomeGroupExpanded: boolean) {
+  private _onGroupExpandStateChanged(isSomeGroupExpanded: boolean): void {
     this.setState({ isSomeGroupExpanded: isSomeGroupExpanded });
   }
 
-  private _onColumnIsSizingChanged(column: IColumn, isSizing: boolean) {
+  private _onColumnIsSizingChanged(column: IColumn, isSizing: boolean): void {
     this.setState({ isSizing: isSizing });
   }
 
-  private _onHeaderKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onHeaderKeyDown(ev: React.KeyboardEvent<HTMLElement>): void {
     if (ev.which === KeyCodes.down) {
-      if (this._focusZone.value && this._focusZone.value.focus()) {
+      if (this._focusZone.current && this._focusZone.current.focus()) {
         ev.preventDefault();
         ev.stopPropagation();
       }
     }
   }
 
-  private _onContentKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
+  private _onContentKeyDown(ev: React.KeyboardEvent<HTMLElement>): void {
     if (ev.which === KeyCodes.up && !ev.altKey) {
-      if (this._header.value && this._header.value.focus()) {
+      if (this._header.current && this._header.current.focus()) {
         ev.preventDefault();
         ev.stopPropagation();
       }
@@ -541,7 +541,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     return level;
   }
 
-  private _onRowDidMount(row: DetailsRow) {
+  private _onRowDidMount(row: DetailsRow): void {
     const { item, itemIndex } = row.props;
     const itemKey = this._getItemKey(item, itemIndex);
     this._activeRows[itemKey] = row; // this is used for column auto resize
@@ -554,7 +554,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     }
   }
 
-  private _setFocusToRowIfPending(row: DetailsRow) {
+  private _setFocusToRowIfPending(row: DetailsRow): void {
     const { itemIndex } = row.props;
     if (this._initialFocusedIndex !== undefined && itemIndex === this._initialFocusedIndex) {
       this._setFocusToRow(row);
@@ -562,16 +562,16 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     }
   }
 
-  private _setFocusToRow(row: DetailsRow, forceIntoFirstElement: boolean = false) {
-    if (this._selectionZone.value) {
-      this._selectionZone.value.ignoreNextFocus();
+  private _setFocusToRow(row: DetailsRow, forceIntoFirstElement: boolean = false): void {
+    if (this._selectionZone.current) {
+      this._selectionZone.current.ignoreNextFocus();
     }
-    this._async.setTimeout(() => {
+    this._async.setTimeout((): void => {
       row.focus(forceIntoFirstElement);
     }, 0);
   }
 
-  private _onRowWillUnmount(row: DetailsRow) {
+  private _onRowWillUnmount(row: DetailsRow): void {
     const { onRowWillUnmount } = this.props;
 
     const { item, itemIndex } = row.props;
@@ -583,27 +583,27 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     }
   }
 
-  private _onToggleCollapse(collapsed: boolean) {
+  private _onToggleCollapse(collapsed: boolean): void {
     this.setState({
       isCollapsed: collapsed
     });
-    if (this._groupedList.value) {
-      this._groupedList.value.toggleCollapseAll(collapsed);
+    if (this._groupedList.current) {
+      this._groupedList.current.toggleCollapseAll(collapsed);
     }
   }
 
-  private _forceListUpdates() {
+  private _forceListUpdates(): void {
     this._pendingForceUpdate = false;
 
-    if (this._groupedList.value) {
-      this._groupedList.value.forceUpdate();
+    if (this._groupedList.current) {
+      this._groupedList.current.forceUpdate();
     }
-    if (this._list.value) {
-      this._list.value.forceUpdate();
+    if (this._list.current) {
+      this._list.current.forceUpdate();
     }
   }
 
-  private _adjustColumns(newProps: IDetailsListProps, forceUpdate?: boolean, resizingColumnIndex?: number) {
+  private _adjustColumns(newProps: IDetailsListProps, forceUpdate?: boolean, resizingColumnIndex?: number): void {
     const adjustedColumns = this._getAdjustedColumns(newProps, forceUpdate, resizingColumnIndex);
     const { width: viewportWidth } = this.props.viewport!;
 
@@ -663,9 +663,9 @@ 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[]) {
+  private _getFixedColumns(newColumns: IColumn[]): IColumn[] {
     return newColumns.map(column => {
-      const newColumn = assign({}, column, this._columnOverrides[column.key]);
+      const newColumn: IColumn = assign({}, column, this._columnOverrides[column.key]);
 
       if (!newColumn.calculatedWidth) {
         newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH;
@@ -692,7 +692,7 @@ 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) {
+  private _getJustifiedColumns(newColumns: IColumn[], viewportWidth: number, props: IDetailsListProps, firstIndex: number): IColumn[] {
     const {
       selectionMode,
       checkboxVisibility,
@@ -763,7 +763,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     return adjustedColumns;
   }
 
-  private _onColumnResized(resizingColumn: IColumn, newWidth: number, resizingColumnIndex: number) {
+  private _onColumnResized(resizingColumn: IColumn, newWidth: number, resizingColumnIndex: number): void {
     const newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth);
     if (this.props.onColumnResize) {
       this.props.onColumnResize(resizingColumn, newCalculatedWidth, resizingColumnIndex);
@@ -775,7 +775,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     this._forceListUpdates();
   }
 
-  private _rememberCalculatedWidth(column: IColumn, newCalculatedWidth: number) {
+  private _rememberCalculatedWidth(column: IColumn, newCalculatedWidth: number): void {
     const overrides = this._getColumnOverride(column.key);
     overrides.calculatedWidth = newCalculatedWidth;
     overrides.currentWidth = newCalculatedWidth;
@@ -795,7 +795,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
    * @param {number} columnIndex (double clicked column index)
    * @todo min width 100 should be changed to const value and should be consistent with the value used on _onSizerMove method in DetailsHeader
    */
-  private _onColumnAutoResized(column: IColumn, columnIndex: number) {
+  private _onColumnAutoResized(column: IColumn, columnIndex: number): void {
     let max = 0;
     let count = 0;
     const totalCount = Object.keys(this._activeRows).length;
@@ -822,7 +822,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
    * @param {el} row element that became active in Focus Zone
    * @param {ev} focus event from Focus Zone
    */
-  private _onActiveRowChanged(el?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) {
+  private _onActiveRowChanged(el?: HTMLElement, ev?: React.FocusEvent<HTMLElement>): void {
     const { items, onActiveItemChanged } = this.props;
 
     if (!el) {
@@ -839,7 +839,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     }
   }
 
-  private _onBlur(event: React.FocusEvent<HTMLElement>) {
+  private _onBlur(event: React.FocusEvent<HTMLElement>): void {
     this.setState({
       focusedItemIndex: -1
     });
@@ -903,7 +903,7 @@ export function buildColumns(
   return columns;
 }
 
-function isRightArrow(event: React.KeyboardEvent<HTMLElement>) {
+function isRightArrow(event: React.KeyboardEvent<HTMLElement>): boolean {
   return event.which === getRTLSafeKeyCode(KeyCodes.right);
 }
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx
index 2dad5a197e3a6..bd7d0addb188e 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Link } from 'office-ui-fabric-react/lib/Link';
 import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
@@ -40,11 +40,12 @@ import { DetailsListNavigatingFocusExample } from './examples/DetailsList.Naviga
 const DetailsListNavigatingFocusExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx') as string;
 
 export class DetailsListPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='DetailsList'
         componentName='DetailsListExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/DetailsList'
         exampleCards={
           <div>
             <ExampleCard title='Document DetailsList with 500 items, sorting, filtering, marquee selection, justified columns' isOptIn={ true } code={ DetailsListDocumentsExampleCode }>
@@ -87,44 +88,27 @@ export class DetailsListPage extends React.Component<IComponentDemoPageProps, {}
           />
         }
         overview={
-          <div>
-            <p>
-              DetailsList is a derivative of the <Link href='#/components/list'>List</Link> component. It is a robust way to display an information rich collection of items. It can support powerful ways to aid a user in finding content with sorting, grouping and filtering. Lists are a great way to handle large amounts of content, but poorly designed Lists can be difficult to parse.
-            </p>
-            <p>
-              Use a DetailsList when density of information is critical. Lists can support single and multiple selection, as well as drag and drop and marquee selection. They are composed of a column header, which contains the metadata fields which are attached to the list items, and provide the ability to sort, filter and even group the list. List items are composed of selection, icon, and name columns at minimum. One can also include other columns such as Date Modified, or any other metadata field associated with the collection. Place the most important columns from left to right for ease of recall and comparison.
-            </p>
-            <p>
-              DetailsList is classically used to display files, but is also used to render custom lists that can be purely metadata. Avoid using file type icon overlays to denote status of a file as it can make the entire icon unclear. Be sure to leave ample width for each column’s data. If there are multiple lines of text in a column, consider the variable row height variant.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use them to display content.</li>
-              <li>Provide useful columns of metadata.</li>
-              <li>Display columns in order of importance left to right or right to left depending on the standards of the culture.</li>
-              <li>Give columns ample default width to display information.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Use them to display commands or settings.</li>
-              <li>Overload the view with too many columns that require excessive horizontal scrolling.</li>
-              <li>Make columns so narrow that it truncates the information in typical cases.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...DetailsListStatus}
+            { ...DetailsListStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
index 262aa48d3da73..92f1c6a724949 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
@@ -228,6 +228,7 @@ $detailsList-item-focus-meta-text-color: $ms-color-neutralDark;
     // cause other items to be deselected.
     padding-top: 1px;
     margin-top: -1px;
+    flex-shrink: 0;
   }
 
   & > button {
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 98dff9abac039..a0364df78a765 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -99,7 +99,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     this._onToggleSelection = this._onToggleSelection.bind(this);
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     const { dragDropHelper } = this.props;
 
     if (dragDropHelper) {
@@ -133,8 +133,8 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
       }
     }
 
-    if (columnMeasureInfo && columnMeasureInfo.index >= 0 && this._cellMeasurer.value) {
-      const newWidth = this._cellMeasurer.value.getBoundingClientRect().width;
+    if (columnMeasureInfo && columnMeasureInfo.index >= 0 && this._cellMeasurer.current) {
+      const newWidth = this._cellMeasurer.current.getBoundingClientRect().width;
 
       columnMeasureInfo.onMeasureDone(newWidth);
 
@@ -149,7 +149,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     }
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     const { item, onWillUnmount } = this.props;
 
     // Only call the onWillUnmount callback if we have an item.
@@ -163,14 +163,14 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     }
   }
 
-  public componentWillReceiveProps(newProps: IDetailsRowProps) {
+  public componentWillReceiveProps(newProps: IDetailsRowProps): void {
     this.setState({
       selectionState: this._getSelectionState(newProps),
       groupNestingDepth: newProps.groupNestingDepth
     });
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       className,
       columns,
@@ -196,7 +196,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     const { isSelected = false, isSelectionModal = false } = this.state.selectionState as IDetailsRowSelectionState;
     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 ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : undefined;
     const ariaDescribedBy = getRowAriaDescribedBy ? getRowAriaDescribedBy(item) : undefined;
     const canSelect = selection.canSelectItem!(item);
     const isContentUnselectable = selectionMode === SelectionMode.multiple;
@@ -252,7 +252,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
         data-is-focusable={ true }
         data-selection-index={ itemIndex }
         data-item-index={ itemIndex }
-        aria-rowindex={ itemIndex }
+        aria-rowindex={ itemIndex + 1 }
         data-is-draggable={ isDraggable }
         draggable={ isDraggable }
         data-automationid='DetailsRow'
@@ -311,7 +311,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
    * @param {number} index (the cell index)
    * @param {(width: number) => void} onMeasureDone (the call back function when finish measure)
    */
-  public measureCell(index: number, onMeasureDone: (width: number) => void) {
+  public measureCell(index: number, onMeasureDone: (width: number) => void): void {
     const column = assign({}, this.props.columns[index]) as IColumn;
 
     column.minWidth = 0;
@@ -329,7 +329,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
   }
 
   public focus(forceIntoFirstElement: boolean = false): boolean {
-    return !!this._focusZone.value && this._focusZone.value.focus(forceIntoFirstElement);
+    return !!this._focusZone.current && this._focusZone.current.focus(forceIntoFirstElement);
   }
 
   protected _onRenderCheck(props: IDetailsRowCheckProps) {
@@ -345,7 +345,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     };
   }
 
-  private _onSelectionChanged() {
+  private _onSelectionChanged(): void {
     const selectionState = this._getSelectionState(this.props);
 
     if (!shallowCompare(selectionState, this.state.selectionState)) {
@@ -355,7 +355,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     }
   }
 
-  private _onToggleSelection() {
+  private _onToggleSelection(): void {
     const { selection } = this.props;
 
     selection.toggleIndexSelected(this.props.itemIndex);
@@ -404,7 +404,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
    * @param {boolean} newValue (new isDropping state value)
    * @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
    */
-  private _updateDroppingState(newValue: boolean, event: DragEvent) {
+  private _updateDroppingState(newValue: boolean, event: DragEvent): void {
     const { selectionState, isDropping } = this.state;
     const { dragDropEvents, item } = this.props;
 
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 49428fe9b3fec..907e561757198 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { css } from '../../Utilities';
 import { Check } from '../../Check';
 import * as DetailsRowCheckStyles from './DetailsRowCheck.scss';
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 90f4e7dbc763f..7a92d08978315 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
@@ -29,11 +29,11 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
     this.state = this._getState(props);
   }
 
-  public componentWillReceiveProps(newProps: IDetailsRowFieldsProps) {
+  public componentWillReceiveProps(newProps: IDetailsRowFieldsProps): void {
     this.setState(this._getState(newProps));
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { columns, columnStartIndex, shimmer } = this.props;
     const { cellContent } = this.state;
 
@@ -67,7 +67,7 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
     );
   }
 
-  private _getState(props: IDetailsRowFieldsProps) {
+  private _getState(props: IDetailsRowFieldsProps): IDetailsRowFieldsState {
     const { item, itemIndex, onRenderItemColumn, shimmer } = props;
 
     return {
@@ -85,7 +85,7 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
     };
   }
 
-  private _getCellText(item: any, column: IColumn) {
+  private _getCellText(item: any, column: IColumn): void {
     let value = (item && column && column.fieldName) ? item[column.fieldName] : '';
 
     if (value === null || value === undefined) {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
index 6240400730b83..9ac12c1175ed2 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
@@ -8,7 +8,6 @@ exports[`DetailsHeader can render 1`] = `
   className="ms-FocusZone ms-DetailsHeader"
   data-automationid="DetailsHeader"
   data-focuszone-id="FocusZone1"
-  onClick={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}
@@ -136,7 +135,7 @@ exports[`DetailsHeader can render 1`] = `
       className=""
     >
       <span
-        aria-describedby="header0-a-tooltip"
+        aria-describedby={undefined}
         aria-haspopup={false}
         aria-label={undefined}
         aria-labelledby="header0-a-name "
@@ -184,7 +183,7 @@ exports[`DetailsHeader can render 1`] = `
       className=""
     >
       <span
-        aria-describedby="header0-b-tooltip"
+        aria-describedby={undefined}
         aria-haspopup={false}
         aria-label={undefined}
         aria-labelledby="header0-b-name "
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
index fbdb6a331f19d..abd0be34f4a01 100644
--- 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
@@ -34,7 +34,6 @@ exports[`DetailsList renders List correctly 1`] = `
           className="ms-FocusZone ms-DetailsHeader"
           data-automationid="DetailsHeader"
           data-focuszone-id="FocusZone1"
-          onClick={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
           onMouseDownCapture={[Function]}
@@ -162,7 +161,7 @@ exports[`DetailsList renders List correctly 1`] = `
               className=""
             >
               <span
-                aria-describedby="header0-key-tooltip"
+                aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header0-key-name "
@@ -204,7 +203,6 @@ exports[`DetailsList renders List correctly 1`] = `
           className="ms-FocusZone"
           data-focuszone-id="FocusZone2"
           onBlur={[Function]}
-          onClick={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
           onMouseDownCapture={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md
new file mode 100644
index 0000000000000..ed191105f1ba0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md
@@ -0,0 +1,3 @@
+- Use them to display commands or settings.
+- Overload the view with too many columns that require excessive horizontal scrolling.
+- Make columns so narrow that it truncates the information in typical cases.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md
new file mode 100644
index 0000000000000..6aceae28160a1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md
@@ -0,0 +1,4 @@
+- Use them to display content.
+- Provide useful columns of metadata.
+- Display columns in order of importance left to right or right to left depending on the standards of the culture.
+- Give columns ample default width to display information.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md
new file mode 100644
index 0000000000000..0cac7623ae528
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md
@@ -0,0 +1,5 @@
+DetailsList is a derivative of the <a href='#/components/list'>List</a> component. It is a robust way to display an information rich collection of items. It can support powerful ways to aid a user in finding content with sorting, grouping and filtering. Lists are a great way to handle large amounts of content, but poorly designed Lists can be difficult to parse.
+
+Use a DetailsList when density of information is critical. Lists can support single and multiple selection, as well as drag and drop and marquee selection. They are composed of a column header, which contains the metadata fields which are attached to the list items, and provide the ability to sort, filter and even group the list. List items are composed of selection, icon, and name columns at minimum. One can also include other columns such as Date Modified, or any other metadata field associated with the collection. Place the most important columns from left to right for ease of recall and comparison.
+
+DetailsList is classically used to display files, but is also used to render custom lists that can be purely metadata. Avoid using file type icon overlays to denote status of a file as it can make the entire icon unclear. Be sure to leave ample width for each column’s data. If there are multiple lines of text in a column, consider the variable row height variant.
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 1359126a4b178..f3be1c518bf80 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
@@ -79,7 +79,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       checkboxVisibility,
       columns,
@@ -128,6 +128,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
           selectionMode={ selectionMode }
           constrainMode={ constrainMode }
           groupProps={ groupProps }
+          enterModalSelectionOnTouch={ true }
           onItemInvoked={ this._onItemInvoked }
           onItemContextMenu={ this._onItemContextMenu }
           ariaLabelForListHeader='Column headers. Use menus to perform column operations like sort and filter'
@@ -143,7 +144,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
     );
   }
 
-  private _onDataMiss(index: number) {
+  private _onDataMiss(index: number): void {
     index = Math.floor(index / PAGING_SIZE) * PAGING_SIZE;
 
     if (!this._isFetchingItems) {
@@ -441,7 +442,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
     return false;
   }
 
-  private _onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn) => {
+  private _onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn): void => {
     if (column.columnActionsMode !== ColumnActionsMode.disabled) {
       this.setState({
         contextualMenuProps: this._getContextualMenuProps(ev, column)
@@ -449,7 +450,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
     }
   }
 
-  private _onColumnContextMenu = (column: IColumn, ev: React.MouseEvent<HTMLElement>) => {
+  private _onColumnContextMenu = (column: IColumn, ev: React.MouseEvent<HTMLElement>): void => {
     if (column.columnActionsMode !== ColumnActionsMode.disabled) {
       this.setState({
         contextualMenuProps: this._getContextualMenuProps(ev, column)
@@ -457,13 +458,13 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
     }
   }
 
-  private _onContextualMenuDismissed = () => {
+  private _onContextualMenuDismissed = (): void => {
     this.setState({
       contextualMenuProps: undefined
     });
   }
 
-  private _onSortColumn = (key: string, isSortedDescending: boolean) => {
+  private _onSortColumn = (key: string, isSortedDescending: boolean): void => {
     const sortedItems = _items.slice(0).sort((a: any, b: any) => (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1);
 
     this.setState({
@@ -482,7 +483,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
     });
   }
 
-  private _onGroupByColumn = (column: IColumn) => {
+  private _onGroupByColumn = (column: IColumn): void => {
     const { key, isGrouped } = column;
     const { sortedColumnKey, isSortedDescending, groups, items, columns } = this.state;
 
@@ -564,13 +565,13 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
     return leafKey;
   }
 
-  private _onAddRow = () => {
+  private _onAddRow = (): void => {
     this.setState({
       items: createListItems(1).concat(this.state.items)
     });
   }
 
-  private _onDeleteRow = () => {
+  private _onDeleteRow = (): void => {
     this.setState({
       items: this.state.items!.slice(1)
     });
@@ -602,7 +603,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
       } else if (column.key === 'key') {
         column.columnActionsMode = ColumnActionsMode.disabled;
         column.onRender = (item) => (
-          <Link href='#'>{ item.key }</Link>
+          <Link href='https://microsoft.com' target='_blank' rel='noopener'>{ item.key }</Link>
         );
         column.minWidth = 90;
         column.maxWidth = 90;
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 5d4ce186686a8..fabb597bd6c33 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import {
   DetailsList,
@@ -63,7 +61,7 @@ export class DetailsListBasicExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { items, selectionDetails } = this.state;
 
     return (
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 a35388a1e229b..75b098dd73fc7 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import {
   DetailsList,
@@ -64,7 +62,7 @@ export class DetailsListCompactExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { items, selectionDetails } = this.state;
 
     return (
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 8eb95497aa6c0..207d013e2653c 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { createListItems } from '@uifabric/example-app-base';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx
index e7552c5374c47..494c5596fd295 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { DetailsList, IGroup, IGroupDividerProps } from 'office-ui-fabric-react/lib/DetailsList';
 import { createListItems, createGroups } from '@uifabric/example-app-base';
@@ -21,7 +19,7 @@ export class DetailsListCustomGroupHeadersExample extends React.Component {
     _groups = _groups || createGroups(GROUP_COUNT, 1, 0, ITEMS_PER_GROUP);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DetailsList
@@ -58,7 +56,7 @@ export class DetailsListCustomGroupHeadersExample extends React.Component {
     );
   }
 
-  private _onClick(props: IGroupDividerProps) {
+  private _onClick(props: IGroupDividerProps): () => void {
     return () => {
       props.onToggleSelectGroup!(props.group!);
     };
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx
index c1481847de2ff..11559d08f5428 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { DetailsList, DetailsRow, IDetailsRowProps, IDetailsRowCheckProps } from 'office-ui-fabric-react/lib/DetailsList';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { createListItems } from '@uifabric/example-app-base';
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 472e8ca474fef..2bf18feaa202d 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import {
@@ -104,6 +102,7 @@ export class DetailsListDocumentsExample extends React.Component<any, IDetailsLi
         fieldName: 'name',
         minWidth: 16,
         maxWidth: 16,
+        onColumnClick: this._onColumnClick,
         onRender: (item: IDocument) => {
           return (
             <img
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 7b60397e17cc5..dfc6dc79749a5 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { DetailsList, Selection } from 'office-ui-fabric-react/lib/DetailsList';
 import { IColumn } from 'office-ui-fabric-react/lib/DetailsList';
@@ -33,7 +31,7 @@ export class DetailsListDragDropExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { items, selectionDetails } = this.state;
 
     return (
@@ -80,7 +78,7 @@ export class DetailsListDragDropExample extends React.Component<{}, {
     alert(`Item invoked: ${item.name}`);
   }
 
-  private _onRenderItemColumn(item: any, index: number, column: IColumn) {
+  private _onRenderItemColumn(item: any, index: number, column: IColumn): JSX.Element {
     if (column.key === 'name') {
       return <Link data-selection-invoke={ true }>{ item[column.key] }</Link>;
     }
@@ -88,7 +86,7 @@ export class DetailsListDragDropExample extends React.Component<{}, {
     return item[column.key];
   }
 
-  private _insertBeforeItem(item: any) {
+  private _insertBeforeItem(item: any): void {
     const draggedItems = this._selection.isIndexSelected(_draggedIndex) ? this._selection.getSelection() : [_draggedItem];
 
     const items: any[] = this.state.items.filter((i: number) => draggedItems.indexOf(i) === -1);
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 9db03c9fe8066..59ffbeab088a2 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,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import {
   BaseComponent,
   createRef
@@ -122,8 +120,8 @@ export class DetailsListGroupedExample extends BaseComponent<{}, {
         color: 'blue'
       }])
     }, () => {
-      if (this._root.value) {
-        this._root.value.focusIndex(items.length, true);
+      if (this._root.current) {
+        this._root.current.focusIndex(items.length, true);
       }
     });
   }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx
index c1b19c2ef52e2..1e29b2179402b 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx
@@ -35,7 +35,7 @@ export class DetailsListNavigatingFocusExample extends React.Component<{}, IDeta
     } as IColumn
   ];
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <DetailsList
         items={ this.state.items }
@@ -55,6 +55,6 @@ export class DetailsListNavigatingFocusExample extends React.Component<{}, IDeta
   }
 }
 
-function generateItems(parent: string) {
+function generateItems(parent: string): void {
   return Array.prototype.map.call('abcdefghi', (name: string) => parent + name);
 }
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
index 54e5220ea7ddb..7cc3cfd92d632 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx
@@ -66,7 +66,7 @@ export class DialogBase extends BaseComponent<IDialogProps, {}> {
     });
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       className,
       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 21b58689ced00..4f45ee0719d27 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import * as renderer from 'react-test-renderer';
 
 import { mount } from 'enzyme';
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
index a956ee6dec949..0290dd13f8011 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx
@@ -31,7 +31,7 @@ export class DialogContentBase extends BaseComponent<IDialogContentProps, {}> {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       showCloseButton,
       className,
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
index ca9db4ff5bafa..773fe5a8b1dcb 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx
@@ -17,7 +17,7 @@ const getClassNames = classNamesFunction<IDialogFooterStyleProps, IDialogFooterS
 export class DialogFooterBase extends BaseComponent<IDialogFooterProps, {}> {
   private _classNames: IClassNames<IDialogFooterStyles>;
 
-  public render() {
+  public render(): JSX.Element {
     const {
       className,
       getStyles,
@@ -38,9 +38,9 @@ export class DialogFooterBase extends BaseComponent<IDialogFooterProps, {}> {
     );
   }
 
-  private _renderChildrenAsActions() {
+  private _renderChildrenAsActions(): (JSX.Element | null)[] {
     return React.Children.map(this.props.children, child =>
-      child && <span className={ this._classNames.action }>{ child }</span>
+      child ? <span className={ this._classNames.action }>{ child }</span> : null
     );
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx
index a7fd2c7b80515..9bd06d6c59222 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { DialogBasicExample } from './examples/Dialog.Basic.Example';
@@ -16,11 +17,12 @@ const DialogLargeHeaderExampleCode = require('!raw-loader!office-ui-fabric-react
 const DialogBlockingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.Blocking.Example.tsx') as string;
 
 export class DialogPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Dialog'
         componentName='DialogExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Dialog'
         exampleCards={
           <div>
             <ExampleCard title='Default Dialog' code={ DialogBasicExampleCode }>
@@ -48,43 +50,27 @@ export class DialogPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              Dialogs are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input. In most cases, Dialogs block interactions with the web page or application until being explicitly dismissed, and often request action from the user. They are primarily used for lightweight creation or edit tasks, and simple management tasks.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Dialog/docs/DialogOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use Dialogs for quick, actionable interactions, such as making a choice or needing the user to provide information.</li>
-              <li>When possible, try a non-blocking Dialog before resorting to a blocking Dialog.</li>
-              <li>Only include information needed to help users make a decision.</li>
-              <li>Button text should reflect the actions available to the user (e.g. save, delete).</li>
-              <li>Validate that the user's entries are acceptable before closing the Dialog. Show an inline validation error near the field they must correct.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Dialog/docs/DialogDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don’t overuse Dialogs. To some extent they can be perceived as interrupting workflow, and too many can be a bad user experience.</li>
-              <li>Avoid "Are you sure?" or confirmation Dialogs unless the user is making an irreversible or destructive choice.</li>
-              <li>Do not use a blocking Dialog unless absolutely necessary because they are very disruptive.</li>
-              <li>Don’t have long sentences or complicated choices.</li>
-              <li>Avoid generic button labels like "Ok" if you can be more specific about the action a user is about to complete. </li>
-              <li>Don't dismiss the Dialog if underlying problem is not fixed. Don't put the user back into a broken/error state.</li>
-              <li>Don't provide the user with more than 3 buttons.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Dialog/docs/DialogDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...DialogStatus}
+            { ...DialogStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDonts.md b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDonts.md
new file mode 100644
index 0000000000000..23820e70744aa
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDonts.md
@@ -0,0 +1,7 @@
+- Don’t overuse Dialogs. To some extent they can be perceived as interrupting workflow, and too many can be a bad user experience.
+- Avoid "Are you sure?" or confirmation Dialogs unless the user is making an irreversible or destructive choice.
+- Do not use a blocking Dialog unless absolutely necessary because they are very disruptive.
+- Don’t have long sentences or complicated choices.
+- Avoid generic button labels like "Ok" if you can be more specific about the action a user is about to complete.
+- Don't dismiss the Dialog if underlying problem is not fixed. Don't put the user back into a broken/error state.
+- Don't provide the user with more than 3 buttons.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDos.md b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDos.md
new file mode 100644
index 0000000000000..6d594c3a4f855
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogDos.md
@@ -0,0 +1,5 @@
+- Use Dialogs for quick, actionable interactions, such as making a choice or needing the user to provide information.
+- When possible, try a non-blocking Dialog before resorting to a blocking Dialog.
+- Only include information needed to help users make a decision.
+- Button text should reflect the actions available to the user (e.g. save, delete).
+- Validate that the user's entries are acceptable before closing the Dialog. Show an inline validation error near the field they must correct.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogOverview.md b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogOverview.md
new file mode 100644
index 0000000000000..1ab5ac6894b76
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/docs/DialogOverview.md
@@ -0,0 +1 @@
+Dialogs are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input. In most cases, Dialogs block interactions with the web page or application until being explicitly dismissed, and often request action from the user. They are primarily used for lightweight creation or edit tasks, and simple management tasks.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Divider/DividerPage.tsx b/packages/office-ui-fabric-react/src/components/Divider/DividerPage.tsx
index 01f777e885cc6..484033cc67221 100644
--- a/packages/office-ui-fabric-react/src/components/Divider/DividerPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Divider/DividerPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { VerticalDividerBasicExample } from './examples/VerticalDivider.Basic.Example';
@@ -15,11 +16,12 @@ const VerticalDividerBasicExampleCode = require('!raw-loader!office-ui-fabric-re
 const VerticalDividerCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx') as string;
 
 export class DividerPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Divider'
         componentName='DividerExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Divider'
         exampleCards={
           <div>
             <ExampleCard title='Vertical Divider' code={ VerticalDividerBasicExampleCode }>
@@ -38,47 +40,30 @@ export class DividerPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              A Divider is a line that is used to visually differentiate different parts of a UI. They are commonly used in headers and command bars. This divider automatically center algins itself within the parent container and can be customized to be shown in different heights and colors.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Divider/docs/DividerOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
-          <div>
-            <p>
-              Use a divider component to show a sectional or continuity change in the content between two blocks of information. The spacing around the divider is generally determined by the content surrounding it.
-            </p>
-            <p>
-              There are two recommended divider color combinations:
-              <ol>
-                <li>#C8C8C8/neutralTertiaryAlt divider when used within an #F4F4F4/neutralLighter layout</li>
-                <li> #EAEAEA/neutralLight divider when used within an #FFFFFF/white layout</li>
-              </ol>
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Divider/docs/DividerBestPractices.md') }
+          </PageMarkdown>
         }
         dos={
-          <div>
-            <ul>
-              <li>Use a divider to separate sections that may not otherwise have a clear beginning or end.</li>
-              <li>Use a divider to separate information blocks where the context or continuity changes between the blocks.</li>
-              <li>When the divider is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA use role="presentation".</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Divider/docs/DividerDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Do not use dividers for graphic decoration.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Divider/docs/DividerDonts.md') }
+          </PageMarkdown>
 
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...DividerStatus}
+            { ...DividerStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Divider/docs/DividerBestPractices.md b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerBestPractices.md
new file mode 100644
index 0000000000000..7adf00e231ba1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerBestPractices.md
@@ -0,0 +1,6 @@
+Use a divider component to show a sectional or continuity change in the content between two blocks of information. The spacing around the divider is generally determined by the content surrounding it.
+
+There are two recommended divider color combinations:
+
+1. #C8C8C8/neutralTertiaryAlt divider when used within an #F4F4F4/neutralLighter layout
+1. #EAEAEA/neutralLight divider when used within an #FFFFFF/white layout
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDonts.md b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDonts.md
new file mode 100644
index 0000000000000..93d2dfb5889d0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDonts.md
@@ -0,0 +1 @@
+- Do not use dividers for graphic decoration.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDos.md b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDos.md
new file mode 100644
index 0000000000000..a5d8dd0e7a369
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerDos.md
@@ -0,0 +1,3 @@
+- Use a divider to separate sections that may not otherwise have a clear beginning or end.
+- Use a divider to separate information blocks where the context or continuity changes between the blocks.
+- When the divider is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA use role="presentation".
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Divider/docs/DividerOverview.md b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerOverview.md
new file mode 100644
index 0000000000000..556c7e711f191
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Divider/docs/DividerOverview.md
@@ -0,0 +1 @@
+A Divider is a line that is used to visually differentiate different parts of a UI. They are commonly used in headers and command bars. This divider automatically center algins itself within the parent container and can be customized to be shown in different heights and colors.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Basic.Example.tsx
index a12b5c06da64f..a580578c24d96 100644
--- a/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Basic.Example.tsx
@@ -28,7 +28,7 @@ const getExampleClassNames = memoizeFunction((): IBasicDividerExampleClassNames
 });
 
 export class VerticalDividerBasicExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     const classNames = getExampleClassNames();
     return (
       <div className={ classNames.wrapper }>
diff --git a/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx
index 999660bb2130e..f61066a58cbdb 100644
--- a/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Divider/examples/VerticalDivider.Custom.Example.tsx
@@ -37,7 +37,7 @@ const getVerticalDividerClassNames = memoizeFunction((theme: ITheme): IVerticalD
 });
 
 export class VerticalDividerCustomExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     const exampleClassNames = getExampleClassNames();
     return (
       <div className={ exampleClassNames.wrapper }>
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 045fb0fd3a660..e21331929fb34 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
@@ -21,7 +21,7 @@ export class DocumentCard extends BaseComponent<IDocumentCardProps, any> {
     });
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { onClick, onClickHref, children, className, type, accentColor } = this.props;
     const actionable = (onClick || onClickHref) ? true : false;
 
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 73957cd5537eb..71e3a2623324c 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
@@ -7,7 +7,7 @@ import * as stylesImport from './DocumentCard.scss';
 const styles: any = stylesImport;
 
 export class DocumentCardActions extends BaseComponent<IDocumentCardActionsProps, any> {
-  public render() {
+  public render(): JSX.Element {
     const { actions, views } = this.props;
 
     return (
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 a39d134b7c158..9c97de8423c4c 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
@@ -7,24 +7,25 @@ import * as stylesImport from './DocumentCard.scss';
 const styles: any = stylesImport;
 
 export class DocumentCardActivity extends BaseComponent<IDocumentCardActivityProps, any> {
-  public render() {
+  public render(): JSX.Element | null {
     const { activity, people } = this.props;
 
+    if (!people || people.length === 0) {
+      return null;
+    }
+
     return (
-      people && people.length > 0 &&
-      (
-        <div
-          className={ css('ms-DocumentCardActivity', styles.activity, {
-            ['ms-DocumentCardActivity--multiplePeople ' + styles.activityIsMultiplePeople]: people.length > 1
-          }) }
-        >
-          { this._renderAvatars(people) }
-          <div className={ css('ms-DocumentCardActivity-details', styles.activityDetails) }>
-            <span className={ css('ms-DocumentCardActivity-name', styles.name) }>{ this._getNameString(people) }</span>
-            <span className={ css('ms-DocumentCardActivity-activity', styles.activityActivity) }>{ activity }</span>
-          </div>
+      <div
+        className={ css('ms-DocumentCardActivity', styles.activity, {
+          ['ms-DocumentCardActivity--multiplePeople ' + styles.activityIsMultiplePeople]: people.length > 1
+        }) }
+      >
+        { this._renderAvatars(people) }
+        <div className={ css('ms-DocumentCardActivity-details', styles.activityDetails) }>
+          <span className={ css('ms-DocumentCardActivity-name', styles.name) }>{ this._getNameString(people) }</span>
+          <span className={ css('ms-DocumentCardActivity-activity', styles.activityActivity) }>{ activity }</span>
         </div>
-      )
+      </div>
     );
   }
 
@@ -37,7 +38,7 @@ export class DocumentCardActivity extends BaseComponent<IDocumentCardActivityPro
     );
   }
 
-  private _renderAvatar(person: IDocumentCardActivityPerson) {
+  private _renderAvatar(person: IDocumentCardActivityPerson): JSX.Element {
 
     return (
       <div className={ css('ms-DocumentCardActivity-avatar', styles.avatar) }>
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 bc6fff48f1906..8fabd691477f0 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
@@ -5,7 +5,7 @@ import * as stylesImport from './DocumentCard.scss';
 const styles: any = stylesImport;
 
 export class DocumentCardLocation extends BaseComponent<IDocumentCardLocationProps, any> {
-  public render() {
+  public render(): JSX.Element {
     const { location, locationHref, ariaLabel, onClick } = this.props;
 
     return (
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx
index 11dd49b7b1862..99d143bd28340 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { DocumentCardBasicExample } from './examples/DocumentCard.Basic.Example';
@@ -16,11 +17,12 @@ const DocumentCardCompleteExampleCode = require('!raw-loader!office-ui-fabric-re
 const DocumentCardCompactExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx') as string;
 
 export class DocumentCardPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='DocumentCard'
         componentName='DocumentCardExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/'
         exampleCards={
           <div>
             <ExampleCard title='Default DocumentCard' code={ DocumentCardBasicExampleCode }>
@@ -54,31 +56,22 @@ export class DocumentCardPage extends React.Component<IComponentDemoPageProps, {
           />
         }
         overview={
-          <div>
-            <p>
-              A DocumentCard is a card representation of a file. This is usually richer than just seeing the file in a grid view, as the card can contain additional metadata or actions.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use this control to represent Office documents or other user-relevant files in aggregate views, such as when you are showing the user’s most trending document.</li>
-              <li>Incorporate metadata that is relevant and useful in this particular view. A card can be specialized to be about the document’s latest changes, or about the document’s popularity, as you see fit.</li>
-              <li>Use the DocumentCard when you are illustrating an event that encompasses multiple files. For example, a card can be configured to represent a single upload action that consisted in adding more than one file.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don’t use the DocumentCard in views where the user is likely to be performing bulk operations in files, or when the list may get very long. Specifically, if you are showing all the items inside an actual folder, a card may be overkill because the majority of the items in the folder may not have interesting metadata.</li>
-              <li>Don’t use the DocumentCard if space is at a premium or you can’t show relevant and timely commands or metadata. Cards are useful because they can expose on-item interactions like “Share” buttons or view counts. If your app does not need this, show a simple grid or list of items instead, which are easier to scan.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
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 704d3fed94dd9..5c9349dfebbaf 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -12,7 +12,7 @@ const styles: any = stylesImport;
 const LIST_ITEM_COUNT = 3;
 
 export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps, any> {
-  public render() {
+  public render(): JSX.Element {
     const { previewImages } = this.props;
     let style, preview;
     let isFileList = false;
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx
index 127222419f41f..61b5706975789 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx
@@ -1,10 +1,7 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import {
   BaseComponent,
-  autobind,
   css
 } from '../../Utilities';
 import { IDocumentCardStatusProps } from './DocumentCard.types';
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.test.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.test.tsx
new file mode 100644
index 0000000000000..8117005e9a70f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.test.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { DocumentCardTitle } from './DocumentCardTitle';
+
+const veryLongTitle = 'This is obviously a very very very very very very very very very very loooooooooooooooooooooooooooooooooooooooooooooooong title that will need to be truncated';
+
+describe('DocumentCardTitle', () => {
+  it('truncates a title that is too long', () => {
+    const component = mount(
+      <DocumentCardTitle title={ veryLongTitle } shouldTruncate />
+    );
+
+    // Since we check if the title overflows based on element sizes and jsdom not supporting element sizes,
+    // we're not able to determine truncation based on element size.
+    // We'll therefore test the logic by forcing the truncation that is executed when new props are received.
+    // https://github.com/airbnb/enzyme/issues/1435
+    component.setProps({});
+
+    expect(component.text()).toEqual('This is obviously a very very very very very very v… that will need to be truncated');
+  });
+
+  it('does not truncate a title when shouldTruncate is set to false', () => {
+    const component = mount(
+      <DocumentCardTitle title={ veryLongTitle } shouldTruncate={ false } />
+    );
+
+    // Since we check if the title overflows based on element sizes and jsdom not supporting element sizes,
+    // we're not able to determine truncation based on element size.
+    // We'll therefore test the logic by forcing the truncation that is executed when new props are received.
+    // https://github.com/airbnb/enzyme/issues/1435
+    component.setProps({});
+
+    expect(component.text()).toEqual(veryLongTitle);
+  });
+});
\ No newline at end of file
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 1db79e315b5b3..44ce6f3341f5a 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import {
   BaseComponent,
@@ -42,7 +40,7 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
     };
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     const { title, shouldTruncate, showAsSecondaryTitle } = this.props;
     const miniLength = showAsSecondaryTitle ? TRUNCATION_MINI_LENGTH_SECONDARY : TRUNCATION_MINIMUM_LENGTH;
     if (shouldTruncate && title && title.length > miniLength) {
@@ -53,7 +51,7 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
     }
   }
 
-  public componentWillReceiveProps(newProps: IDocumentCardTitleProps) {
+  public componentWillReceiveProps(newProps: IDocumentCardTitleProps): void {
     this._events.off(window, 'resize');
     this._isTruncated = false;
 
@@ -64,14 +62,14 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
     }
   }
 
-  public componentDidUpdate() {
+  public componentDidUpdate(): void {
     // If we're truncating, make sure the title fits
     if (this.props.shouldTruncate) {
       this._shrinkTitle();
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { title, shouldTruncate, showAsSecondaryTitle } = this.props;
     const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;
 
@@ -119,13 +117,13 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
     }
 
     // Save the width we just started truncation at, so that later we will only update truncation if necessary
-    if (this._titleElement.value) {
-      this._truncatedTitleAtWidth = this._titleElement.value.clientWidth;
+    if (this._titleElement.current) {
+      this._truncatedTitleAtWidth = this._titleElement.current.clientWidth;
     }
 
   }
 
-  private _shrinkTitle() {
+  private _shrinkTitle(): void {
     if (this._doesTitleOverflow()) {
       const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;
       this._isTruncated = true;
@@ -142,7 +140,7 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   }
 
   private _doesTitleOverflow(): boolean {
-    const titleElement = this._titleElement.value;
+    const titleElement = this._titleElement.current;
 
     if (!titleElement) {
       return false;
@@ -151,9 +149,9 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
     return titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD || titleElement.scrollWidth > titleElement.clientWidth;
   }
 
-  private _updateTruncation() {
+  private _updateTruncation(): void {
     // Only update truncation if the title's size has changed since the last time we truncated
-    if (this._titleElement.value && (this._titleElement.value.clientWidth !== this._truncatedTitleAtWidth)) {
+    if (this._titleElement.current && (this._titleElement.current.clientWidth !== this._truncatedTitleAtWidth)) {
       // Throttle truncation so that it doesn't happen during a window resize
       clearTimeout(this._scrollTimerId);
       this._scrollTimerId = this._async.setTimeout(this._startTruncation.bind(this, this.props), 250);
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDonts.md b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDonts.md
new file mode 100644
index 0000000000000..91e89379f28c2
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDonts.md
@@ -0,0 +1,2 @@
+- Don’t use the DocumentCard in views where the user is likely to be performing bulk operations in files, or when the list may get very long. Specifically, if you are showing all the items inside an actual folder, a card may be overkill because the majority of the items in the folder may not have interesting metadata.
+- Don’t use the DocumentCard if space is at a premium or you can’t show relevant and timely commands or metadata. Cards are useful because they can expose on-item interactions like “Share” buttons or view counts. If your app does not need this, show a simple grid or list of items instead, which are easier to scan.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDos.md b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDos.md
new file mode 100644
index 0000000000000..78f202920bc2b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardDos.md
@@ -0,0 +1,3 @@
+- Use this control to represent Office documents or other user-relevant files in aggregate views, such as when you are showing the user’s most trending document.
+- Incorporate metadata that is relevant and useful in this particular view. A card can be specialized to be about the document’s latest changes, or about the document’s popularity, as you see fit.
+- Use the DocumentCard when you are illustrating an event that encompasses multiple files. For example, a card can be configured to represent a single upload action that consisted in adding more than one file.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardOverview.md b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardOverview.md
new file mode 100644
index 0000000000000..938cdc0ee0b81
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/docs/DocumentCardOverview.md
@@ -0,0 +1 @@
+A DocumentCard is a card representation of a file. This is usually richer than just seeing the file in a grid view, as the card can contain additional metadata or actions.
\ No newline at end of file
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 64216d54d58d2..a6b8445556861 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
@@ -11,7 +11,7 @@ import { TestImages } from '../../../common/TestImages';
 import './DocumentCard.Example.scss';
 
 export class DocumentCardBasicExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     const previewProps: IDocumentCardPreviewProps = {
       previewImages: [
         {
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 dd04ff54c3fac..6597182098bae 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
@@ -10,7 +10,7 @@ import {
 import { TestImages } from '../../../common/TestImages';
 
 export class DocumentCardCompactExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     const previewProps: IDocumentCardPreviewProps = {
       getOverflowDocumentCountText: (overflowCount: number) => `+${overflowCount} more`,
       previewImages: [
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 494caa0a604a9..dcaf4ed424db3 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
@@ -15,7 +15,7 @@ import { ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { TestImages } from '../../../common/TestImages';
 
 export class DocumentCardCompleteExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     const previewProps: IDocumentCardPreviewProps = {
       getOverflowDocumentCountText: (overflowCount: number) => `+${overflowCount} more`,
       previewImages: [
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 265e0effa99e1..66cba6b8feecd 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss
@@ -172,7 +172,7 @@ $DropDown-item-height: 32px;
   }
 }
 
-.callout {
+.callout.callout {
   box-shadow: 0 0px 2px 0px rgba(0, 0, 0, 0.2);
   border: 1px solid $ms-color-neutralLight;
 }
@@ -195,10 +195,13 @@ $DropDown-item-height: 32px;
   cursor: pointer;
   display: block;
   width: 100%;
-  height: auto;
   min-height: $DropDown-item-height;
   line-height: 20px;
-  padding: 4px 16px;
+
+  /* once this is converted to js css, then specificity won't be an issue. */
+  height: auto !important;
+  padding: 4px 16px !important;
+
   position: relative;
   border: 1px solid transparent;
   word-wrap: break-word;
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 5c6d95e3736ce..66c9ff5658536 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
@@ -96,7 +96,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
 
   }
 
-  public componentWillReceiveProps(newProps: IDropdownProps) {
+  public componentWillReceiveProps(newProps: IDropdownProps): void {
     // In controlled component usage where selectedKey is provided, update the selectedIndex
     // state if the key or options change.
     const selectedKeyProp: keyof IDropdownProps = this.props.multiSelect ? 'selectedKeys' : 'selectedKey';
@@ -110,8 +110,8 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
 
   public componentDidUpdate(prevProps: IDropdownProps, prevState: IDropdownState) {
     if (prevState.isOpen === true && this.state.isOpen === false) {
-      if (this._dropDown.value) {
-        this._dropDown.value.focus();
+      if (this._dropDown.current) {
+        this._dropDown.current.focus();
       }
 
       if (this.props.onDismiss) {
@@ -121,7 +121,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   // Primary Render
-  public render() {
+  public render(): JSX.Element {
     const id = this._id;
     let {
       disabled
@@ -159,14 +159,14 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
           id={ id }
           tabIndex={ disabled ? -1 : 0 }
           aria-expanded={ isOpen ? 'true' : 'false' }
-          role='combobox'
+          role='listbox'
           aria-autocomplete='none'
           aria-live={ disabled || isOpen ? 'off' : 'assertive' }
           aria-label={ ariaLabel }
           aria-describedby={ id + '-option' }
-          aria-activedescendant={ isOpen && selectedIndices.length === 1 && selectedIndices[0] >= 0 ? (this._id + '-list' + selectedIndices[0]) : null }
+          aria-activedescendant={ isOpen && selectedIndices.length === 1 && selectedIndices[0] >= 0 ? (this._id + '-list' + selectedIndices[0]) : undefined }
           aria-disabled={ disabled }
-          aria-owns={ isOpen ? id + '-list' : null }
+          aria-owns={ isOpen ? id + '-list' : undefined }
           { ...divProps }
           className={ css(
             'ms-Dropdown',
@@ -219,9 +219,10 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     );
   }
 
-  public focus(shouldOpenOnFocus?: boolean) {
-    if (this._dropDown.value && this._dropDown.value.tabIndex !== -1) {
-      this._dropDown.value.focus();
+  public focus(shouldOpenOnFocus?: boolean): void {
+    if (this._dropDown.current && this._dropDown.current.tabIndex !== -1) {
+      this._dropDown.current.focus();
+
       if (shouldOpenOnFocus) {
         this.setState({
           isOpen: true
@@ -230,7 +231,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     }
   }
 
-  public setSelectedIndex(index: number) {
+  public setSelectedIndex(index: number): void {
     const { onChanged, options, selectedKey, selectedKeys, multiSelect } = this.props;
     const { selectedIndices = [] } = this.state;
     const checked: boolean = selectedIndices ? selectedIndices.indexOf(index) > -1 : false;
@@ -375,11 +376,11 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
             directionalHint={ DirectionalHint.bottomLeftEdge }
             { ...calloutProps }
             className={ css('ms-Dropdown-callout', styles.callout, !!calloutProps && calloutProps.className) }
-            target={ this._dropDown.value }
+            target={ this._dropDown.current }
             onDismiss={ this._onDismiss }
             onScroll={ this._onScroll }
             onPositioned={ this._onPositioned }
-            calloutWidth={ dropdownWidth || (this._dropDown.value ? this._dropDown.value.clientWidth : 0) }
+            calloutWidth={ dropdownWidth || (this._dropDown.current ? this._dropDown.current.clientWidth : 0) }
           >
             { onRenderList(props, this._onRenderList) }
           </Callout>
@@ -549,10 +550,10 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   private _onPositioned = (): void => {
-    if (this._focusZone.value) {
+    if (this._focusZone.current) {
       // Focusing an element can trigger a reflow. Making this wait until there is an animation
       // frame can improve perf significantly.
-      this._async.requestAnimationFrame(() => this._focusZone.value!.focus());
+      this._async.requestAnimationFrame(() => this._focusZone.current!.focus());
     }
   }
 
@@ -585,7 +586,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     this._scrollIdleTimeoutId = this._async.setTimeout(() => { this._isScrollIdle = true; }, this._scrollIdleDelay);
   }
 
-  private _onItemMouseEnter(item: any, ev: React.MouseEvent<HTMLElement>) {
+  private _onItemMouseEnter(item: any, ev: React.MouseEvent<HTMLElement>): void {
     if (!this._isScrollIdle) {
       return;
     }
@@ -594,7 +595,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     targetElement.focus();
   }
 
-  private _onItemMouseMove(item: any, ev: React.MouseEvent<HTMLElement>) {
+  private _onItemMouseMove(item: any, ev: React.MouseEvent<HTMLElement>): void {
     const targetElement = ev.currentTarget as HTMLElement;
 
     if (!this._isScrollIdle || document.activeElement === targetElement) {
@@ -614,11 +615,11 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
      * Edge and IE expose a setActive() function for focusable divs that
      * sets the page focus but does not scroll the parent element.
      */
-    if (this._host.value) {
-      if ((this._host.value as any).setActive) {
-        (this._host.value as any).setActive();
+    if (this._host.current) {
+      if ((this._host.current as any).setActive) {
+        (this._host.current as any).setActive();
       } else {
-        this._host.value.focus();
+        this._host.current.focus();
       }
     }
   }
@@ -626,8 +627,8 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   private _onDismiss = (): void => {
     this.setState({ isOpen: false });
 
-    if (this._dropDown.value) {
-      this._dropDown.value.focus();
+    if (this._dropDown.current) {
+      this._dropDown.current.focus();
     }
   }
 
@@ -654,7 +655,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   // Get all selected options for multi-select mode
-  private _getAllSelectedOptions(options: IDropdownOption[], selectedIndices: number[]) {
+  private _getAllSelectedOptions(options: IDropdownOption[], selectedIndices: number[]): IDropdownOption[] {
     const selectedOptions: IDropdownOption[] = [];
     for (const index of selectedIndices) {
       const option = options[index];
@@ -802,8 +803,8 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         if (ev.altKey || ev.metaKey) {
           this.setState({ isOpen: false });
         } else {
-          if (this._host.value) {
-            elementToFocus = getLastFocusable(this._host.value, (this._host.value.lastChild as HTMLElement), true);
+          if (this._host.current) {
+            elementToFocus = getLastFocusable(this._host.current, (this._host.current.lastChild as HTMLElement), true);
           }
         }
         break;
@@ -817,8 +818,8 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         break;
 
       case KeyCodes.down:
-        if (this._host.value) {
-          elementToFocus = getFirstFocusable(this._host.value, (this._host.value.firstChild as HTMLElement), true);
+        if (this._host.current) {
+          elementToFocus = getFirstFocusable(this._host.current, (this._host.current.firstChild as HTMLElement), true);
         }
         break;
 
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 f7ffc94d031b4..f273176f4c821 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { DropdownBasicExample } from './examples/Dropdown.Basic.Example';
@@ -16,11 +17,12 @@ const DropdownCustomExampleCode = require('!raw-loader!office-ui-fabric-react/sr
 const DropdownErrorExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx') as string;
 
 export class DropdownPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Dropdown'
         componentName='DropdownExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Dropdown'
         exampleCards={
           <div>
             <ExampleCard
@@ -55,26 +57,22 @@ export class DropdownPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use a Dropdown when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained.</li>
-              <li>Dropdowns contain shortened statements or words.</li>
-              <li>Use a Dropdown when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options).</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Dropdown/docs/DropdownDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div />
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Dropdown/docs/DropdownDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
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 1a8fccb238b0d..a22a74977077d 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
@@ -5,14 +5,14 @@ exports[`Dropdown multi-select Renders multiselect Dropdown correctly 1`] = `
   className="ms-Dropdown-container"
 >
   <div
-    aria-activedescendant={null}
+    aria-activedescendant={undefined}
     aria-autocomplete="none"
     aria-describedby="Dropdown94-option"
     aria-disabled={undefined}
     aria-expanded="false"
     aria-label={undefined}
     aria-live="assertive"
-    aria-owns={null}
+    aria-owns={undefined}
     className="ms-Dropdown"
     data-is-focusable={true}
     id="Dropdown94"
@@ -20,7 +20,7 @@ exports[`Dropdown multi-select Renders multiselect Dropdown correctly 1`] = `
     onClick={[Function]}
     onKeyDown={[Function]}
     onKeyUp={[Function]}
-    role="combobox"
+    role="listbox"
     tabIndex={0}
   >
     <span
@@ -53,14 +53,14 @@ exports[`Dropdown single-select Renders single-select Dropdown correctly 1`] = `
   className="ms-Dropdown-container"
 >
   <div
-    aria-activedescendant={null}
+    aria-activedescendant={undefined}
     aria-autocomplete="none"
     aria-describedby="Dropdown0-option"
     aria-disabled={undefined}
     aria-expanded="false"
     aria-label={undefined}
     aria-live="assertive"
-    aria-owns={null}
+    aria-owns={undefined}
     className="ms-Dropdown"
     data-is-focusable={true}
     id="Dropdown0"
@@ -68,7 +68,7 @@ exports[`Dropdown single-select Renders single-select Dropdown correctly 1`] = `
     onClick={[Function]}
     onKeyDown={[Function]}
     onKeyUp={[Function]}
-    role="combobox"
+    role="listbox"
     tabIndex={0}
   >
     <span
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDonts.md b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDonts.md
new file mode 100644
index 0000000000000..b08d6752b763d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDonts.md
@@ -0,0 +1 @@
+<!-- Add don'ts here -->
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDos.md b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDos.md
new file mode 100644
index 0000000000000..77e8c0749db6b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDos.md
@@ -0,0 +1,3 @@
+- Use a Dropdown when there are multiple choices that can be collapsed under one title. Or if the list of items is long or when space is constrained.
+- Dropdowns contain shortened statements or words.
+- Use a Dropdown when the selected option is more important than the alternatives (in contrast to radio buttons where all the choices are visible putting more emphasis on the other options).
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md
new file mode 100644
index 0000000000000..c88e66c0bce7e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md
@@ -0,0 +1 @@
+A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.
\ No newline at end of file
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 100ec54223750..d6ef8866243fe 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
@@ -194,8 +194,8 @@ export class DropdownBasicExample extends BaseComponent<{}, {
   }
 
   private _onSetFocusButtonClicked = (): void => {
-    if (this._basicDropdown.value) {
-      this._basicDropdown.value.focus(true);
+    if (this._basicDropdown.current) {
+      this._basicDropdown.current.focus(true);
     }
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Custom.Example.tsx
index 49cd32f927c90..c61bd363d35cd 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Custom.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Custom.Example.tsx
@@ -13,7 +13,7 @@ export class DropdownCustomExample extends React.Component {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-DropdownExample'>
 
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 1801d9b39959c..3ba1e2b031a01 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
@@ -8,7 +8,7 @@ export class DropdownErrorExample extends BaseComponent<{}, {}> {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-DropdownExample'>
         <Dropdown
diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.classNames.ts b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
similarity index 62%
rename from packages/office-ui-fabric-react/src/components/Fabric/Fabric.classNames.ts
rename to packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
index a3990ad9d7db3..746a7facdcbc9 100644
--- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
@@ -1,11 +1,9 @@
 
-import {
-  memoizeFunction
-} from '../../Utilities';
 import {
   ITheme,
   mergeStyles
 } from '../../Styling';
+import { IFabricStyleProps, IFabricStyles } from './Fabric.types';
 
 const inheritFont = { fontFamily: 'inherit' };
 
@@ -13,16 +11,15 @@ export interface IFabricClassNames {
   root: string;
 }
 
-export const getClassNames = memoizeFunction((
-  theme: ITheme,
-  className: string,
-  isFocusVisible: boolean
-): IFabricClassNames => {
+export const getStyles = (props: IFabricStyleProps): IFabricStyles => {
+  const {
+    theme,
+    className,
+  } = props;
+
   return {
-    root: mergeStyles([
+    root: [
       'ms-Fabric',
-      isFocusVisible && 'is-focusVisible',
-      className,
       theme.fonts.medium,
       {
         color: theme.palette.neutralPrimary,
@@ -34,7 +31,8 @@ export const getClassNames = memoizeFunction((
             overflow: 'visible'
           }
         }
-      }
-    ])
+      },
+      className
+    ]
   };
-});
+};
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 8e77d0041f280..1998193d3c869 100644
--- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx
+++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx
@@ -1,101 +1,27 @@
 import * as React from 'react';
 import {
   BaseComponent,
-  KeyCodes,
   customizable,
   getNativeProps,
   divProperties,
-  createRef
+  classNamesFunction
 } from '../../Utilities';
-import {
-  ITheme
-} from '../../Styling';
-import { getClassNames } from './Fabric.classNames';
-
-const DIRECTIONAL_KEY_CODES = [
-  KeyCodes.up,
-  KeyCodes.down,
-  KeyCodes.left,
-  KeyCodes.right,
-  KeyCodes.home,
-  KeyCodes.end,
-  KeyCodes.tab,
-  KeyCodes.pageUp,
-  KeyCodes.pageDown
-];
-
-export interface IFabricProps extends React.HTMLAttributes<HTMLDivElement> {
-  componentRef?: () => void;
-  theme?: ITheme;
-}
-export interface IFabricState {
-  isFocusVisible?: boolean;
-}
-
-// 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 = false;
+import { getStyles } from './Fabric.styles';
+import { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types';
 
-// 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')) {
-  document.documentElement.setAttribute('dir', 'ltr');
-}
+const getClassNames = classNamesFunction<IFabricStyleProps, IFabricStyles>();
 
 @customizable('Fabric', ['theme'])
-export class Fabric extends BaseComponent<IFabricProps, IFabricState> {
-  // tslint:disable-next-line:no-unused-variable
-  private _root = createRef<HTMLDivElement>();
-
-  constructor(props: IFabricProps) {
-    super(props);
-
-    this.state = {
-      isFocusVisible: _lastIsFocusVisible
-    };
-  }
-
-  public componentDidMount() {
-    this._events.on(document.body, 'mousedown', this._onMouseDown, true);
-    this._events.on(document.body, 'keydown', this._onKeyDown, true);
-  }
-
+export class Fabric extends BaseComponent<IFabricProps, {}> {
   public render() {
-    const { isFocusVisible } = this.state;
-    const { className } = this.props;
-
-    const classNames = getClassNames(
-      this.props.theme!,
-      className!,
-      isFocusVisible!
-    );
-
+    const classNames = getClassNames(getStyles, this.props as IFabricStyleProps);
     const divProps = getNativeProps(this.props, divProperties);
+
     return (
       <div
         { ...divProps }
         className={ classNames.root }
-        ref={ this._root }
       />
     );
   }
-
-  private _onMouseDown() {
-    if (this.state.isFocusVisible) {
-      this.setState({
-        isFocusVisible: false
-      });
-
-      _lastIsFocusVisible = false;
-    }
-  }
-
-  private _onKeyDown(ev: KeyboardEvent) {
-    if (!this.state.isFocusVisible && DIRECTIONAL_KEY_CODES.indexOf(ev.which) > -1) {
-      this.setState({
-        isFocusVisible: true
-      });
-
-      _lastIsFocusVisible = true;
-    }
-  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.types.ts b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.types.ts
new file mode 100644
index 0000000000000..7a521e18e5bad
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.types.ts
@@ -0,0 +1,14 @@
+import { IStyle, ITheme } from '../../Styling';
+
+export interface IFabricProps extends React.HTMLAttributes<HTMLDivElement> {
+  componentRef?: () => void;
+  theme?: ITheme;
+}
+
+export interface IFabricStyleProps extends IFabricProps {
+  theme: ITheme;
+}
+
+export interface IFabricStyles {
+  root: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
index 4552419f56652..7b06adfae94ae 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
@@ -100,7 +100,7 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
     );
   }
 
-  private _onRenderVisiblePersonas(personas: IFacepilePersona[], singlePersona: boolean) {
+  private _onRenderVisiblePersonas(personas: IFacepilePersona[], singlePersona: boolean): JSX.Element[] {
     return personas.map((persona: IFacepilePersona, index: number) => {
       const personaControl: JSX.Element = singlePersona ? this._getPersonaControl(persona) : this._getPersonaCoinControl(persona);
       return persona.onClick ?
@@ -162,7 +162,7 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
     );
   }
 
-  private _getElementProps(persona: IFacepilePersona, index: number) {
+  private _getElementProps(persona: IFacepilePersona, index: number): { key: React.Key, ['data-is-focusable']: boolean } & React.HTMLAttributes<HTMLDivElement> {
     return {
       key: (!!persona.imageUrl ? 'i' : '') + index,
       'data-is-focusable': true,
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/FacepileButton.tsx b/packages/office-ui-fabric-react/src/components/Facepile/FacepileButton.tsx
index 383c0282f2e09..3e48b87d7959a 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/FacepileButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/FacepileButton.tsx
@@ -6,7 +6,7 @@ import { getStyles } from '../Button/BaseButton.styles';
 
 export class FacepileButton extends BaseComponent<IButtonProps, {}> {
 
-  public render() {
+  public render(): JSX.Element {
     const baseButtonStyles = getStyles(getTheme());
 
     return (
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx
index 816ddf578e3f7..d6808fa52e106 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx
@@ -3,12 +3,12 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { FacepileAddFaceExample } from './examples/Facepile.AddFace.Example';
 import { FacepileBasicExample } from './examples/Facepile.Basic.Example';
 import { FacepileOverflowExample } from './examples/Facepile.Overflow.Example';
-import { FontClassNames } from '../../Styling';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { FacepileStatus } from './Facepile.checklist';
 
@@ -17,11 +17,12 @@ const FacepileBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src
 const FacepileOverflowExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx') as string;
 
 export class FacepilePage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Facepile'
         componentName='FacepileExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Facepile'
         exampleCards={
           <div>
             <ExampleCard title='Facepile with size and fade in options' code={ FacepileBasicExampleCode }>
@@ -43,65 +44,27 @@ export class FacepilePage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. Many times this component is used when sharing who has access to a specific view or file or when assigning a user to a task within a workflow.
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>Adding people</h2>
-            <p>
-              The component can include an add button which can be used for quickly adding a person to the list.
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>Empty state</h2>
-            <p>
-              The empty state of the Facepile should include only an add button. Another variant is to use an input field with placeholder text instructing the user to add a person. See the PeoplePicker component for the menu used to add people to the Facepile list.
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>One person</h2>
-            <p>
-              When there is only one person in the Facepile, consider using their name next to the face or initials.
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>Expanding the list when there is no overflow</h2>
-
-            <p>
-              When there is a need to show the Facepile expanded into a vertical list, include a downward chevron button. Clicking or tapping on the chevron would open a standard list view of personas.
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>Overflow</h2>
-
-            <p>
-              When the Facepile exceeds a max number of 5 people, show a button at the end of the list indicating how many are not being shown. Clicking or tapping on the overflow would open a standard list view of personas.
-            </p>
-
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use if looking for a way to represent who has access to an area and need to show that as a people representation.</li>
-              <li>Only show the Add button if a user has access to do so.</li>
-              <li>Allow a way for the user to understand who the person is. Many common ways to do this are with a tooltip or adding the ability to open up a PeopleCard Experience.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Use for things other than people.</li>
-              <li>Overwhelm users by listing every single person as a circle but truncate and provide a way to see the full list.</li>
-              <li>Don’t use this control for experiences where you need to manage details of hundreds of users, you are better off using a list control.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...FacepileStatus}
+            { ...FacepileStatus }
           />
         }
       />
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 62c741bd429e4..a75223fb0d25f 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
@@ -12,7 +12,6 @@ exports[`Facepile renders Facepile correctly 1`] = `
       aria-labelledby={undefined}
       className="ms-FocusZone ms-Facepile-members"
       data-focuszone-id="FocusZone1"
-      onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
       onMouseDownCapture={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md
new file mode 100644
index 0000000000000..3b134de760969
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md
@@ -0,0 +1,3 @@
+- Use for things other than people.
+- Overwhelm users by listing every single person as a circle but truncate and provide a way to see the full list.
+- Don’t use this control for experiences where you need to manage details of hundreds of users, you are better off using a list control.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md
new file mode 100644
index 0000000000000..450077a4d2a13
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md
@@ -0,0 +1,3 @@
+- Use if looking for a way to represent who has access to an area and need to show that as a people representation.
+- Only show the Add button if a user has access to do so.
+- Allow a way for the user to understand who the person is. Many common ways to do this are with a tooltip or adding the ability to open up a PeopleCard Experience.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md
new file mode 100644
index 0000000000000..0a6d45d803c7b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md
@@ -0,0 +1,21 @@
+The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. Many times this component is used when sharing who has access to a specific view or file or when assigning a user to a task within a workflow.
+
+## Adding people
+
+The component can include an add button which can be used for quickly adding a person to the list.
+
+## Empty state
+
+The empty state of the Facepile should include only an add button. Another variant is to use an input field with placeholder text instructing the user to add a person. See the PeoplePicker component for the menu used to add people to the Facepile list.
+
+## One person
+
+When there is only one person in the Facepile, consider using their name next to the face or initials.
+
+## Expanding the list when there is no overflow
+
+When there is a need to show the Facepile expanded into a vertical list, include a downward chevron button. Clicking or tapping on the chevron would open a standard list view of personas.
+
+## Overflow
+
+When the Facepile exceeds a max number of 5 people, show a button at the end of the list indicating how many are not being shown. Clicking or tapping on the overflow would open a standard list view of personas.
\ No newline at end of file
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 c153c8538b402..4a86170129ff3 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
@@ -20,7 +20,7 @@ export class FacepileAddFaceExample extends React.Component<{}, IFacepileAddFace
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { numberOfFaces } = this.state;
     const facepileProps: IFacepileProps = {
       personas: facepilePersonas.slice(0, numberOfFaces),
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 691190302c099..6449710eaa22f 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
@@ -27,7 +27,7 @@ export class FacepileBasicExample extends React.Component<{}, IFacepileBasicExam
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { numberOfFaces, personaSize } = this.state;
     const facepileProps: IFacepileProps = {
       personaSize: personaSize,
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 4b5ee203e29e4..e7161c36f80fd 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
@@ -37,7 +37,7 @@ export class FacepileOverflowExample extends React.Component<{}, IFacepileOverfl
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { displayedPersonas, overflowButtonType } = this.state;
     facepileProps.maxDisplayablePersonas = displayedPersonas;
     facepileProps.overflowButtonType = overflowButtonType;
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
index 2fac102b5b5a3..ce617e2f6437a 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx
@@ -1,6 +1,4 @@
-/* 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';
@@ -18,7 +16,7 @@ jest.useFakeTimers();
 
 describe('FocusTrapZone', () => {
   let lastFocusedElement: HTMLElement | undefined;
-  function _onFocus(ev: any) {
+  function _onFocus(ev: any): void {
     lastFocusedElement = ev.target;
   }
 
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 3319557f02d33..4ea422a4b9a06 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
@@ -23,7 +23,7 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
   private _isInFocusStack = false;
   private _isInClickStack = false;
 
-  public componentWillMount() {
+  public componentWillMount(): void {
     const { isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true } = this.props;
     if (forceFocusInsideTrap) {
       this._isInFocusStack = true;
@@ -35,11 +35,11 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     }
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     const { isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true, elementToFocusOnDismiss, disableFirstFocus = false } = this.props;
 
     this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement as HTMLElement;
-    if (!elementContains(this._root.value, this._previouslyFocusedElement) && !disableFirstFocus) {
+    if (!elementContains(this._root.current, this._previouslyFocusedElement) && !disableFirstFocus) {
       this.focus();
     }
 
@@ -52,14 +52,14 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     }
   }
 
-  public componentWillReceiveProps(nextProps: IFocusTrapZoneProps) {
+  public componentWillReceiveProps(nextProps: IFocusTrapZoneProps): void {
     const { elementToFocusOnDismiss } = nextProps;
     if (elementToFocusOnDismiss && this._previouslyFocusedElement !== elementToFocusOnDismiss) {
       this._previouslyFocusedElement = elementToFocusOnDismiss;
     }
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     const { ignoreExternalFocusing } = this.props;
 
     this._events.dispose();
@@ -80,7 +80,7 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { className, ariaLabelledBy } = this.props;
     const divProps = getNativeProps(this.props, divProperties);
 
@@ -108,11 +108,11 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
 
     let _firstFocusableChild;
 
-    if (this._root.value) {
+    if (this._root.current) {
       if (focusSelector) {
-        _firstFocusableChild = this._root.value.querySelector('.' + focusSelector);
+        _firstFocusableChild = this._root.current.querySelector('.' + focusSelector);
       } else {
-        _firstFocusableChild = getNextElement(this._root.value, this._root.value.firstChild as HTMLElement, true, false, false, true);
+        _firstFocusableChild = getNextElement(this._root.current, this._root.current.firstChild as HTMLElement, true, false, false, true);
       }
     }
     if (_firstFocusableChild) {
@@ -134,12 +134,12 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
       return;
     }
 
-    if (!this._root.value) {
+    if (!this._root.current) {
       return;
     }
 
-    const _firstFocusableChild = getFirstFocusable(this._root.value, this._root.value.firstChild as HTMLElement, true);
-    const _lastFocusableChild = getLastTabbable(this._root.value, this._root.value.lastChild as HTMLElement, true);
+    const _firstFocusableChild = getFirstFocusable(this._root.current, this._root.current.firstChild as HTMLElement, true);
+    const _lastFocusableChild = getLastTabbable(this._root.current, this._root.current.lastChild as HTMLElement, true);
 
     if (ev.shiftKey && _firstFocusableChild === ev.target) {
       focusAsync(_lastFocusableChild);
@@ -152,11 +152,11 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     }
   }
 
-  private _forceFocusInTrap(ev: FocusEvent) {
+  private _forceFocusInTrap(ev: FocusEvent): void {
     if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) {
       const focusedElement = document.activeElement as HTMLElement;
 
-      if (!elementContains(this._root.value, focusedElement)) {
+      if (!elementContains(this._root.current, focusedElement)) {
         this.focus();
         ev.preventDefault();
         ev.stopPropagation();
@@ -164,11 +164,11 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     }
   }
 
-  private _forceClickInTrap(ev: MouseEvent) {
+  private _forceClickInTrap(ev: MouseEvent): void {
     if (FocusTrapZone._clickStack.length && this === FocusTrapZone._clickStack[FocusTrapZone._clickStack.length - 1]) {
       const clickedElement = ev.target as HTMLElement;
 
-      if (clickedElement && !elementContains(this._root.value, clickedElement)) {
+      if (clickedElement && !elementContains(this._root.current, 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 3eaa6ec90c340..3d63fb232441d 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react';
-import {
-  Link
-} from 'office-ui-fabric-react/lib/Link';
 import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import FocusTrapZoneBoxExample from './examples/FocusTrapZone.Box.Example';
@@ -21,11 +19,12 @@ import FocusTrapZoneNestedExample from './examples/FocusTrapZone.Nested.Example'
 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() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='FocusTrapZone'
         componentName='FocusTrapZoneExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/FocusTrapZone'
         exampleCards={
           <div>
             <ExampleCard title='Simple Box' code={ FocusTrapZoneBoxExampleCode }>
@@ -51,10 +50,9 @@ export class FocusTrapZonePage extends React.Component<IComponentDemoPageProps,
           />
         }
         overview={
-          <div>
-            <Link target='_blank' href='http://dev.office.com/fabric/utilities/FocusTrapZone'>FocusTrapZone</Link>
-            <span> is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.</span>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/docs/FocusTrapZoneOverview.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
       />
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/docs/FocusTrapZoneOverview.md b/packages/office-ui-fabric-react/src/components/FocusTrapZone/docs/FocusTrapZoneOverview.md
new file mode 100644
index 0000000000000..33b632403e555
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/docs/FocusTrapZoneOverview.md
@@ -0,0 +1 @@
+<a target='_blank' href='http://dev.office.com/fabric/utilities/FocusTrapZone'>FocusTrapZone</a> is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.
\ No newline at end of file
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 c235864294499..82dba91bf0b8a 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
@@ -1,6 +1,4 @@
-/* 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 { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
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 6f3531818f087..80cf5a5fd0152 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
@@ -1,6 +1,4 @@
-/* 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 { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
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 0eee480b8cb7a..60b46d16b903a 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
@@ -1,6 +1,4 @@
-/* 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 { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
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 4c726df79e49e..9d744081c9761 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 /* tslint:disable:no-string-literal */
 
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 21ee8495b7b58..b4c426aa1d69d 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
@@ -1,6 +1,4 @@
-/* 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';
@@ -11,7 +9,7 @@ import { FocusZoneDirection, FocusZoneTabbableElements } from './FocusZone.types
 
 describe('FocusZone', () => {
   let lastFocusedElement: HTMLElement | undefined;
-  function _onFocus(ev: any) {
+  function _onFocus(ev: any): void {
     lastFocusedElement = ev.target;
   }
 
@@ -56,7 +54,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -152,7 +150,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -196,7 +194,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -295,7 +293,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -407,7 +405,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -513,7 +511,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -619,10 +617,10 @@ describe('FocusZone', () => {
     expect(lastFocusedElement).toBe(buttonA);
   });
 
-  it('can use arrows bidirectionally with data-no-horizontal-wrap and data-no-vertical-wrap', () => {
+  it('can reset alignment on mouse down', () => {
     const component = ReactTestUtils.renderIntoDocument(
       <div { ...{ onFocusCapture: _onFocus } }>
-        <FocusZone checkForNoWrap={ true } data-no-horizontal-wrap={ true } data-no-vertical-wrap={ true }>
+        <FocusZone>
           <button className='a'>a</button>
           <button className='b'>b</button>
           <button className='c'>c</button>
@@ -631,7 +629,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -692,47 +690,22 @@ describe('FocusZone', () => {
     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);
+    // Mousing down on a should reset alignment to a.
+    ReactTestUtils.Simulate.mouseDown(focusZone, { target: buttonA });
 
-    // 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.
+    // Pressing down should go to 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('click resets focus alignment when bidirectional', () => {
+  it('can use arrows bidirectionally with data-no-horizontal-wrap and data-no-vertical-wrap', () => {
     const component = ReactTestUtils.renderIntoDocument(
       <div { ...{ onFocusCapture: _onFocus } }>
-        <FocusZone>
+        <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>
@@ -741,7 +714,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -790,22 +763,51 @@ describe('FocusZone', () => {
     ReactTestUtils.Simulate.focus(buttonA);
     expect(lastFocusedElement).toBe(buttonA);
 
-    // Clicking on b should focus b, and reset the focus alignment to the second column
-    // note that a click in a browser fires mouseDown, focus, then click events
-    ReactTestUtils.Simulate.focus(buttonB);
-    ReactTestUtils.Simulate.click(buttonB);
+    // 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);
 
-    // Clicking on c should focus c, and reset the focus alignment to the first column
-    ReactTestUtils.Simulate.focus(buttonC);
-    ReactTestUtils.Simulate.click(buttonC);
+    // 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 up should go to a.
+    // 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);
   });
@@ -821,7 +823,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -896,7 +898,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance)!.firstChild as Element;
 
     const buttonA = focusZone.querySelector('.a') as HTMLElement;
     const divB = focusZone.querySelector('.b') as HTMLElement;
@@ -986,7 +988,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance)!.firstChild as Element;
 
     const buttonA = focusZone.querySelector('.a') as HTMLElement;
     const divB = focusZone.querySelector('.b') as HTMLElement;
@@ -1116,7 +1118,7 @@ describe('FocusZone', () => {
       </div>
     );
 
-    const focusZoneElement = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    const focusZoneElement = ReactDOM.findDOMNode(component as React.ReactInstance)!.firstChild as Element;
     const buttonAElement = focusZoneElement.querySelector('.a') as HTMLElement;
 
     // HACK declare that elements are not null at this point.
@@ -1178,7 +1180,7 @@ describe('FocusZone', () => {
       </div >
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -1258,7 +1260,7 @@ describe('FocusZone', () => {
       </div >
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance)!.firstChild as Element;
 
     const buttonA = focusZone.querySelector('.a') as HTMLElement;
 
@@ -1294,7 +1296,7 @@ describe('FocusZone', () => {
       </div >
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
@@ -1352,7 +1354,7 @@ describe('FocusZone', () => {
       </div >
     );
 
-    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    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;
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 68dac458c2809..ede76728ed76b 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
@@ -84,12 +84,12 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     this._processingTabKey = false;
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     _allInstances[this._id] = this;
-    if (this._root.value) {
-      const windowElement = this._root.value.ownerDocument.defaultView;
+    if (this._root.current) {
+      const windowElement = this._root.current.ownerDocument.defaultView;
 
-      let parentElement = getParent(this._root.value, ALLOW_VIRTUAL_ELEMENTS);
+      let parentElement = getParent(this._root.current, ALLOW_VIRTUAL_ELEMENTS);
 
       while (
         parentElement &&
@@ -146,7 +146,6 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
         aria-describedby={ ariaDescribedBy }
         onKeyDown={ this._onKeyDown }
         onFocus={ this._onFocus }
-        onClick={ this._onClick }
         onMouseDownCapture={ this._onMouseDown }
       >
         { this.props.children }
@@ -160,25 +159,25 @@ 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 focus(forceIntoFirstElement: boolean = false): boolean {
-    if (this._root.value) {
-      if (!forceIntoFirstElement && this._root.value.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' && this._isInnerZone) {
-        const ownerZoneElement = this._getOwnerZone(this._root.value) as HTMLElement;
+    if (this._root.current) {
+      if (!forceIntoFirstElement && this._root.current.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' && this._isInnerZone) {
+        const ownerZoneElement = this._getOwnerZone(this._root.current) as HTMLElement;
 
-        if (ownerZoneElement !== this._root.value) {
+        if (ownerZoneElement !== this._root.current) {
           const ownerZone = _allInstances[ownerZoneElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string];
 
-          return !!ownerZone && ownerZone.focusElement(this._root.value);
+          return !!ownerZone && ownerZone.focusElement(this._root.current);
         }
 
         return false;
-      } else if (!forceIntoFirstElement && this._activeElement && elementContains(this._root.value, this._activeElement)
+      } else if (!forceIntoFirstElement && this._activeElement && elementContains(this._root.current, this._activeElement)
         && isElementTabbable(this._activeElement)) {
         this._activeElement.focus();
         return true;
       } else {
-        const firstChild = this._root.value.firstChild as HTMLElement;
+        const firstChild = this._root.current.firstChild as HTMLElement;
 
-        return this.focusElement(getNextElement(this._root.value, firstChild, true) as HTMLElement);
+        return this.focusElement(getNextElement(this._root.current, firstChild, true) as HTMLElement);
       }
     }
     return false;
@@ -213,34 +212,23 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   private _onFocus = (ev: React.FocusEvent<HTMLElement>): void => {
     const { onActiveElementChanged } = this.props;
 
-    this._setTargetElement(ev.target, false);
-    if (onActiveElementChanged) {
-      onActiveElementChanged(this._activeElement as HTMLElement, ev);
-    }
-  }
-
-  private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
-    this._setTargetElement(ev.target, true);
-  }
-
-  private _setTargetElement = (target: EventTarget, forceUpdateAlignment?: boolean): void => {
-    const { onActiveElementChanged } = this.props;
-
-    if (this._isImmediateDescendantOfZone(target as HTMLElement)) {
-      this._activeElement = target as HTMLElement;
-      this._setFocusAlignment(this._activeElement, forceUpdateAlignment, forceUpdateAlignment);
+    if (this._isImmediateDescendantOfZone(ev.target as HTMLElement)) {
+      this._activeElement = ev.target as HTMLElement;
+      this._setFocusAlignment(this._activeElement);
     } else {
-      let parentElement = target as HTMLElement;
+      let parentElement = ev.target as HTMLElement;
 
-      while (parentElement && parentElement !== this._root.value) {
+      while (parentElement && parentElement !== this._root.current) {
         if (isElementTabbable(parentElement) && this._isImmediateDescendantOfZone(parentElement)) {
           this._activeElement = parentElement;
-          this._setFocusAlignment(this._activeElement, forceUpdateAlignment, forceUpdateAlignment);
           break;
         }
         parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement;
       }
     }
+    if (onActiveElementChanged) {
+      onActiveElementChanged(this._activeElement as HTMLElement, ev);
+    }
   }
 
   /**
@@ -262,7 +250,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     let target = ev.target as HTMLElement;
     const path = [];
 
-    while (target && target !== this._root.value) {
+    while (target && target !== this._root.current) {
       path.push(target);
       target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement;
     }
@@ -271,7 +259,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       target = path.pop() as HTMLElement;
 
       if (target && isElementTabbable(target)) {
-        this._setActiveElement(target);
+        this._setActiveElement(target, true);
       }
 
       if (isElementFocusZone(target)) {
@@ -281,7 +269,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     }
   }
 
-  private _setActiveElement(element: HTMLElement): void {
+  private _setActiveElement(element: HTMLElement, forceAlignemnt?: boolean): void {
     const previousActiveElement = this._activeElement;
 
     this._activeElement = element;
@@ -295,7 +283,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     }
 
     if (this._activeElement) {
-      if (!this._focusAlignment) {
+      if (!this._focusAlignment || forceAlignemnt) {
         this._setFocusAlignment(element, true, true);
       }
 
@@ -313,7 +301,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       return;
     }
 
-    if (document.activeElement === this._root.value && this._isInnerZone) {
+    if (document.activeElement === this._root.current && this._isInnerZone) {
       // If this element has focus, it is being controlled by a parent.
       // Ignore the keystroke.
       return;
@@ -407,8 +395,8 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
             !this._shouldInputLoseFocus(ev.target as HTMLInputElement, false)) {
             return false;
           }
-          const firstChild = this._root.value && this._root.value.firstChild as HTMLElement | null;
-          if (this._root.value && firstChild && this.focusElement(getNextElement(this._root.value, firstChild, true) as HTMLElement)) {
+          const firstChild = this._root.current && this._root.current.firstChild as HTMLElement | null;
+          if (this._root.current && firstChild && this.focusElement(getNextElement(this._root.current, firstChild, true) as HTMLElement)) {
             break;
           }
           return;
@@ -420,8 +408,8 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
             return false;
           }
 
-          const lastChild = this._root.value && this._root.value.lastChild as HTMLElement | null;
-          if (this._root.value && this.focusElement(getPreviousElement(this._root.value, lastChild, true, true, true) as HTMLElement)) {
+          const lastChild = this._root.current && this._root.current.lastChild as HTMLElement | null;
+          if (this._root.current && this.focusElement(getPreviousElement(this._root.current, lastChild, true, true, true) as HTMLElement)) {
             break;
           }
           return;
@@ -445,7 +433,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
    * Walk up the dom try to find a focusable element.
    */
   private _tryInvokeClickForFocusable(target: HTMLElement): boolean {
-    if (target === this._root.value) {
+    if (target === this._root.current) {
       return false;
     }
 
@@ -464,7 +452,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       }
 
       target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement;
-    } while (target !== this._root.value);
+    } while (target !== this._root.current);
 
     return false;
   }
@@ -473,7 +461,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
    * Traverse to find first child zone.
    */
   private _getFirstInnerZone(rootElement?: HTMLElement | null): FocusZone | null {
-    rootElement = rootElement || this._activeElement || this._root.value;
+    rootElement = rootElement || this._activeElement || this._root.current;
 
     if (!rootElement) {
       return null;
@@ -513,7 +501,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     let changedFocus = false;
     const isBidirectional = this.props.direction === FocusZoneDirection.bidirectional;
 
-    if (!element || !this._root.value) {
+    if (!element || !this._root.current) {
       return false;
     }
 
@@ -526,7 +514,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     const activeRect = isBidirectional ? element.getBoundingClientRect() : null;
 
     do {
-      element = (isForward ? getNextElement(this._root.value, element) : getPreviousElement(this._root.value, element)) as HTMLElement;
+      element = (isForward ? getNextElement(this._root.current, element) : getPreviousElement(this._root.current, element)) as HTMLElement;
 
       if (isBidirectional) {
         if (element) {
@@ -560,9 +548,9 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       this.focusElement(candidateElement);
     } else if (this.props.isCircularNavigation && useDefaultWrap) {
       if (isForward) {
-        return this.focusElement(getNextElement(this._root.value, this._root.value.firstElementChild as HTMLElement, true) as HTMLElement);
+        return this.focusElement(getNextElement(this._root.current, this._root.current.firstElementChild as HTMLElement, true) as HTMLElement);
       } else {
-        return this.focusElement(getPreviousElement(this._root.value, this._root.value.lastElementChild as HTMLElement, true, true, true) as HTMLElement);
+        return this.focusElement(getPreviousElement(this._root.current, this._root.current.lastElementChild as HTMLElement, true, true, true) as HTMLElement);
       }
     }
 
@@ -730,13 +718,13 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   }
 
   private _isImmediateDescendantOfZone(element?: HTMLElement): boolean {
-    return this._getOwnerZone(element) === this._root.value;
+    return this._getOwnerZone(element) === this._root.current;
   }
 
   private _getOwnerZone(element?: HTMLElement): HTMLElement | null {
     let parentElement = getParent(element as HTMLElement, ALLOW_VIRTUAL_ELEMENTS);
 
-    while (parentElement && parentElement !== this._root.value && parentElement !== document.body) {
+    while (parentElement && parentElement !== this._root.current && parentElement !== document.body) {
       if (isElementFocusZone(parentElement)) {
         return parentElement;
       }
@@ -744,13 +732,13 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);
     }
 
-    return this._root.value;
+    return this._root.current;
   }
 
   private _updateTabIndexes(element?: HTMLElement) {
-    if (!element && this._root.value) {
+    if (!element && this._root.current) {
       this._defaultFocusElement = null;
-      element = this._root.value;
+      element = this._root.current;
       if (this._activeElement && !elementContains(element, this._activeElement)) {
         this._activeElement = null;
       }
@@ -830,7 +818,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       // callback shouldInputLoseFocusOnArrowKey
       if (
         isRangeSelected ||
-        (selectionStart > 0 && !isForward) ||
+        (selectionStart! > 0 && !isForward) ||
         (selectionStart !== inputValue.length && isForward) ||
         (!!this.props.handleTabKey && !(this.props.shouldInputLoseFocusOnArrowKey
           && this.props.shouldInputLoseFocusOnArrowKey(element)))
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 7443be6a2b82c..023a052c50817 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { FocusZonePhotosExample } from './examples/FocusZone.Photos.Example';
@@ -16,11 +17,12 @@ const FocusZoneDisabledExampleCode = require('!raw-loader!office-ui-fabric-react
 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() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='FocusZone'
         componentName='FocusZoneExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/FocusZone'
         exampleCards={
           <div>
             <ExampleCard title='Non-uniform photos within bidirectional FocusZone' code={ FocusZonePhotosExampleCode }>
@@ -46,11 +48,9 @@ export class FocusZonePage extends React.Component<IComponentDemoPageProps, {}>
           />
         }
         overview={
-          <div>
-            <p>FocusZones abstract arrow key navigation behaviors. Tabbable elements (buttons, anchors, and elements with data-is-focusable='true' attributes) are considered when pressing directional arrow keys and focus is moved appropriately. Tabbing to a zone sets focus only to the current "active" element, making it simple to use the tab key to transition from one zone to the next, rather than through every focusable element.</p>
-
-            <p>Using a FocusZone is simple. Just wrap a bunch of content inside of a FocusZone, and arrows and tabbling will be handled for you! See examples below.</p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/FocusZone/docs/FocusZoneOverview.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
       />
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/docs/FocusZoneOverview.md b/packages/office-ui-fabric-react/src/components/FocusZone/docs/FocusZoneOverview.md
new file mode 100644
index 0000000000000..f622f7eafcb24
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/docs/FocusZoneOverview.md
@@ -0,0 +1,3 @@
+FocusZones abstract arrow key navigation behaviors. Tabbable elements (buttons, anchors, and elements with data-is-focusable='true' attributes) are considered when pressing directional arrow keys and focus is moved appropriately. Tabbing to a zone sets focus only to the current "active" element, making it simple to use the tab key to transition from one zone to the next, rather than through every focusable element.
+
+Using a FocusZone is simple. Just wrap a bunch of content inside of a FocusZone, and arrows and tabbling will be handled for you! See examples below.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx
index d5f93fdae9cc4..fb63dd475f8b1 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx
@@ -1,6 +1,4 @@
-/* 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 } from 'office-ui-fabric-react/lib/FocusZone';
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx
index c26277b33bc58..c41477de97a2f 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx
@@ -49,7 +49,7 @@ export class FocusZoneListExample extends React.Component {
     this._selection.setItems(ITEMS);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <FocusZone
         className='ms-FocusZoneListExample'
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx
index 1ceaf2e425ea8..c4d2126105c1a 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import { createArray } from 'office-ui-fabric-react/lib/Utilities';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
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
index 2fb2a8a02e843..1810dc9a2b8cf 100644
--- 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
@@ -1,8 +1,5 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
-
-import { DefaultButton, BaseButton } from 'office-ui-fabric-react/lib/Button';
+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';
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 f30a12023f958..c4464105cfbdd 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
@@ -28,7 +28,7 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
     };
   }
 
-  public componentWillReceiveProps(newProps: any) {
+  public componentWillReceiveProps(newProps: any): void {
     if (newProps.group) {
       const newCollapsed = newProps.group.isCollapsed;
       const isGroupLoading = newProps.headerProps && newProps.headerProps.isGroupLoading;
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
index 8f9e61fef19c2..a3dea1d7c1eff 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import {
   css
 } from '../../Utilities';
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 b42da1572c0e1..840b951897b31 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
@@ -56,12 +56,12 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
   }
 
   public scrollToIndex(index: number, measureItem?: (itemIndex: number) => number): void {
-    if (this._list.value) {
-      this._list.value.scrollToIndex(index, measureItem);
+    if (this._list.current) {
+      this._list.current.scrollToIndex(index, measureItem);
     }
   }
 
-  public componentWillReceiveProps(newProps: IGroupedListProps) {
+  public componentWillReceiveProps(newProps: IGroupedListProps): void {
     const {
       groups,
       selectionMode
@@ -121,7 +121,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
     this._forceListUpdates();
   }
 
-  public toggleCollapseAll(allCollapsed: boolean) {
+  public toggleCollapseAll(allCollapsed: boolean): void {
     const { groups } = this.state;
     const { groupProps } = this.props;
     const onToggleCollapseAll = groupProps && groupProps.onToggleCollapseAll;
@@ -242,16 +242,16 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
     }
   }
 
-  private _forceListUpdates(groups?: IGroup[]) {
+  private _forceListUpdates(groups?: IGroup[]): void {
     groups = groups || this.state.groups;
 
     const groupCount = groups ? groups.length : 1;
 
-    if (this._list.value) {
-      this._list.value.forceUpdate();
+    if (this._list.current) {
+      this._list.current.forceUpdate();
 
       for (let i = 0; i < groupCount; i++) {
-        const group = this._list.value.refs['group_' + String(i)] as GroupedListSection;
+        const group = this._list.current.refs['group_' + String(i)] as GroupedListSection;
         if (group) {
           group.forceListUpdate();
         }
@@ -293,7 +293,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
     return !!(groups && groups.some(group => group.children ? this._computeIsSomeGroupExpanded(group.children) : !group.isCollapsed));
   }
 
-  private _updateIsSomeGroupExpanded() {
+  private _updateIsSomeGroupExpanded(): void {
     const { groups } = this.state;
     const { onGroupExpandStateChanged } = this.props;
 
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx
index df8228539ddb0..f746b33c0fadd 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { GroupedListBasicExample } from './examples/GroupedList.Basic.Example';
@@ -14,11 +15,12 @@ const GroupedListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/
 const GroupedListCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.tsx') as string;
 
 export class GroupedListPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='GroupedList'
         componentName='GroupedListExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/GroupedList'
         exampleCards={
           <div>
             <ExampleCard title='GroupedList basic example' isOptIn={ true } code={ GroupedListBasicExampleCode }>
@@ -37,12 +39,14 @@ export class GroupedListPage extends React.Component<IComponentDemoPageProps, {}
           />
         }
         overview={
-          <p>Allows you to render a set of items as multiple lists with various grouping properties.</p>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/GroupedList/docs/GroupedListOverview.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...GroupedListStatus}
+            { ...GroupedListStatus }
           />
         }
       />
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 26a4f75f7cb40..ba57b6c882b68 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
@@ -140,11 +140,11 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
     };
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     const { dragDropHelper, selection } = this.props;
 
-    if (dragDropHelper && this._root.value) {
-      this._dragDropSubscription = dragDropHelper.subscribe(this._root.value, this._events, this._getGroupDragDropOptions());
+    if (dragDropHelper && this._root.current) {
+      this._dragDropSubscription = dragDropHelper.subscribe(this._root.current, this._events, this._getGroupDragDropOptions());
     }
 
     if (selection) {
@@ -167,8 +167,8 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
         delete this._dragDropSubscription;
       }
 
-      if (this.props.dragDropHelper && this._root.value) {
-        this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.value, this._events, this._getGroupDragDropOptions());
+      if (this.props.dragDropHelper && this._root.current) {
+        this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getGroupDragDropOptions());
       }
     }
   }
@@ -248,14 +248,14 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
   public forceListUpdate() {
     const { group } = this.props;
 
-    if (this._list.value) {
-      this._list.value.forceUpdate();
+    if (this._list.current) {
+      this._list.current.forceUpdate();
 
       if (group && group.children && group.children.length > 0) {
         const subGroupCount = group.children.length;
 
         for (let i = 0; i < subGroupCount; i++) {
-          const subGroup = this._list.value.refs['subGroup_' + String(i)] as GroupedListSection;
+          const subGroup = this._list.current.refs['subGroup_' + String(i)] as GroupedListSection;
 
           if (subGroup) {
             subGroup.forceListUpdate();
@@ -283,7 +283,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
     return <GroupFooter { ...props } />;
   }
 
-  private _onSelectionChange() {
+  private _onSelectionChange(): void {
     const { group, selection } = this.props;
     const isSelected = selection!.isRangeSelected(group!.startIndex, group!.count);
 
@@ -299,7 +299,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
     };
   }
 
-  private _onRenderGroup(renderCount: number) {
+  private _onRenderGroup(renderCount: number): JSX.Element {
     const {
       group,
       items,
@@ -378,7 +378,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
     return 1;
   }
 
-  private _getGroupKey(group: any, index: number) {
+  private _getGroupKey(group: any, index: number): string {
     return 'group-' + ((group && group.key) ? group.key : String(group.level) + String(index));
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/docs/GroupedListOverview.md b/packages/office-ui-fabric-react/src/components/GroupedList/docs/GroupedListOverview.md
new file mode 100644
index 0000000000000..3fe7044a88a77
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/docs/GroupedListOverview.md
@@ -0,0 +1 @@
+Allows you to render a set of items as multiple lists with various grouping properties.
\ No newline at end of file
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 4f4073aa84842..7220c30af50af 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
@@ -39,7 +39,7 @@ export class GroupedListBasicExample extends React.Component {
     this._selection.setItems(_items);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <FocusZone>
         <SelectionZone
@@ -58,7 +58,7 @@ export class GroupedListBasicExample extends React.Component {
     );
   }
 
-  private _onRenderCell(nestingDepth: number, item: any, itemIndex: number) {
+  private _onRenderCell(nestingDepth: number, item: any, itemIndex: number): JSX.Element {
     const {
       _selection: selection
     } = this;
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 ab54727668f33..ae4042579def4 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
@@ -21,7 +21,7 @@ export class GroupedListCustomExample extends React.Component {
     _groups = createGroups(4, 0, 0, 5);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <GroupedList
         items={ _items }
@@ -37,7 +37,7 @@ export class GroupedListCustomExample extends React.Component {
     );
   }
 
-  private _onRenderCell(nestingDepth: number, item: any, itemIndex: number) {
+  private _onRenderCell(nestingDepth: number, item: any, itemIndex: number): JSX.Element {
     return (
       <div data-selection-index={ itemIndex }>
         <span className='ms-GroupedListExample-name'>
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 05e07d1c3bff1..7652fb732e2df 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import {
   BaseComponent,
   getNativeProps,
@@ -45,15 +43,15 @@ export class ExpandingCard extends BaseComponent<IExpandingCardProps, IExpanding
     };
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._checkNeedsScroll();
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     this._async.dispose();
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       targetElement,
       theme,
@@ -142,9 +140,9 @@ export class ExpandingCard extends BaseComponent<IExpandingCardProps, IExpanding
   }
 
   private _checkNeedsScroll = (): void => {
-    if (this._expandedElem.value) {
+    if (this._expandedElem.current) {
       this._async.requestAnimationFrame(() => {
-        if (this._expandedElem.value && this._expandedElem.value.scrollHeight >= this.props.expandedCardHeight!) {
+        if (this._expandedElem.current && this._expandedElem.current.scrollHeight >= this.props.expandedCardHeight!) {
           this.setState({
             needsScroll: true
           });
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 7c8e72ca6ac71..ea92999f58a99 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import {
   BaseComponent,
   divProperties,
@@ -20,9 +18,9 @@ import { ExpandingCardMode, OpenCardMode } from './ExpandingCard.types';
 import { getStyles } from './HoverCard.styles';
 
 export interface IHoverCardState {
-  isHoverCardVisible: boolean;
-  mode: ExpandingCardMode;
-  openMode: OpenCardMode;
+  isHoverCardVisible?: boolean;
+  mode?: ExpandingCardMode;
+  openMode?: OpenCardMode;
 }
 
 export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
@@ -37,7 +35,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
   private _hoverCard = createRef<HTMLDivElement>();
   private _dismissTimerId: number;
   private _openTimerId: number;
-  private _currentMouseTarget: EventTarget;
+  private _currentMouseTarget: EventTarget | null;
 
   private _styles: IHoverCardStyles;
 
@@ -52,7 +50,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
     };
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     const target = this._getTargetElement();
 
     this._events.on(target, 'mouseenter', this._cardOpen);
@@ -90,7 +88,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
   }
 
   // Render
-  public render() {
+  public render(): JSX.Element {
     const {
       expandingCardProps,
       children,
@@ -138,13 +136,17 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
         return target as HTMLElement;
 
       default:
-        return this._hoverCard.value || undefined;
+        return this._hoverCard.current || undefined;
     }
   }
 
+  private _shouldBlockHoverCard(): boolean {
+    return !!(this.props.shouldBlockHoverCard && this.props.shouldBlockHoverCard());
+  }
+
   // Show HoverCard
   private _cardOpen = (ev: MouseEvent): void => {
-    if (ev.type === 'keydown' && !(ev.which === KeyCodes.c)) {
+    if (this._shouldBlockHoverCard() || (ev.type === 'keydown' && !(ev.which === KeyCodes.c))) {
       return;
     }
     this._async.clearTimeout(this._dismissTimerId);
@@ -166,6 +168,8 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
             openMode: ev.type === 'keydown' ? OpenCardMode.hotKey : OpenCardMode.hover
           });
         }
+
+        return prevState;
       });
     }, this.props.cardOpenDelay!);
   }
@@ -199,11 +203,13 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
 
     this.setState((prevState: IHoverCardState) => {
       if (!prevState.isHoverCardVisible) {
-        return ({
+        return {
           isHoverCardVisible: true,
           mode: ExpandingCardMode.expanded
-        });
+        };
       }
+
+      return prevState;
     });
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.types.ts b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.types.ts
index 1c5a70cfdea05..79bcc5b54fa37 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.types.ts
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.types.ts
@@ -82,6 +82,11 @@ export interface IHoverCardProps extends React.HTMLAttributes<HTMLDivElement | H
    * Trap focus or not
    */
   trapFocus?: boolean;
+
+  /**
+   * Should block hover card or not
+   */
+  shouldBlockHoverCard?: () => void;
 }
 
 export interface IHoverCardStyles {
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 20eff65a39632..ea75ee0b8ae95 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx
@@ -4,6 +4,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { HoverCardBasicExample } from './examples/HoverCard.Basic.Example';
@@ -17,11 +18,12 @@ const HoverCardBasicExampleCode = require('!raw-loader!office-ui-fabric-react/sr
 const HoverCardTargetExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx') as string;
 
 export class HoverCardPage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='HoverCard'
         componentName='HoverCardExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/HoverCard'
         exampleCards={
           <LayerHost>
             <ExampleCard title='HoverCard' code={ HoverCardBasicExampleCode }>
@@ -42,9 +44,9 @@ export class HoverCardPage extends React.Component<IComponentDemoPageProps, any>
           />
         }
         overview={
-          <div>
-            <p>HoverCards supplement content associated with a specific data element.</p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/HoverCard/docs/HoverCardOverview.md') }
+          </PageMarkdown>
         }
         componentStatus={
           <ComponentStatus
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/docs/HoverCardOverview.md b/packages/office-ui-fabric-react/src/components/HoverCard/docs/HoverCardOverview.md
new file mode 100644
index 0000000000000..b68e2622fee7c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/docs/HoverCardOverview.md
@@ -0,0 +1 @@
+HoverCards supplement content associated with a specific data element.
\ No newline at end of file
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 2968e13027b82..c26c02f5d6ff8 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
@@ -1,6 +1,4 @@
-/* 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,
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.base.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.base.tsx
index 278e099688bf6..d2ff9a2ee6a1c 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.base.tsx
@@ -25,7 +25,7 @@ export class Icon extends BaseComponent<IIconProps, IIconState> {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       ariaLabel,
       className,
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 c107523257b8e..64f96cfa82818 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { IconBasicExample } from './examples/Icon.Basic.Example';
@@ -18,11 +19,12 @@ const IconColorExampleCode = require('!raw-loader!office-ui-fabric-react/src/com
 const IconImageSheetExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx') as string;
 
 export class IconPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Icon'
         componentName='IconExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Icon'
         exampleCards={
           <div>
             <ExampleCard title='Icon' code={ IconBasicExampleCode }>
@@ -48,30 +50,22 @@ export class IconPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              In a computer's graphical user interface ( GUI ), an icon is an image that represents an application, a capability, or some other concept or specific entity with meaning for the user. An icon is usually selectable but can also be a nonselectable image such as a company's logo.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Icon/docs/IconOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Adjust to proper size to highlight importance but not occupying too much space.</li>
-              <li>Be simple and concise.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Icon/docs/IconDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Use Icons to show pictures.</li>
-              <li>Use photos or long sentences as icons.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Icon/docs/IconDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/Icon/docs/IconDonts.md b/packages/office-ui-fabric-react/src/components/Icon/docs/IconDonts.md
new file mode 100644
index 0000000000000..6bd5aeb9603c0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Icon/docs/IconDonts.md
@@ -0,0 +1,2 @@
+- Use Icons to show pictures.
+- Use photos or long sentences as icons.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Icon/docs/IconDos.md b/packages/office-ui-fabric-react/src/components/Icon/docs/IconDos.md
new file mode 100644
index 0000000000000..6b47d1a010ea1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Icon/docs/IconDos.md
@@ -0,0 +1,2 @@
+- Adjust to proper size to highlight importance but not occupying too much space.
+- Be simple and concise.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Icon/docs/IconOverview.md b/packages/office-ui-fabric-react/src/components/Icon/docs/IconOverview.md
new file mode 100644
index 0000000000000..3b1789c9c7802
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Icon/docs/IconOverview.md
@@ -0,0 +1,3 @@
+In a computer's graphical user interface ( GUI ), an icon is an image that represents an application, a capability, or some other concept or specific entity with meaning for the user. An icon is usually selectable but can also be a nonselectable image such as a company's logo.
+
+For a list of Icons, visit our <a href='https://developer.microsoft.com/en-us/fabric#/styles/icons'>Icon documentation</a>.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx
index f05b207a3ab45..c8e6ca72f401b 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx
@@ -1,11 +1,9 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import './IconExample.scss';
 
 export class IconBasicExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Icon iconName='CompassNW' className='ms-IconExample' />
diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx
index d4f9bf420b22d..0164d815d7d22 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx
@@ -1,12 +1,10 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import './IconExample.scss';
 
 export class IconColorExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Icon iconName={ 'CompassNW' } className={ 'ms-IconExample ms-IconColorExample-deepSkyBlue' } />
diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx
index 24d3e04bb266c..337081fbc16c0 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx
@@ -1,12 +1,10 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { Icon, IconType } from 'office-ui-fabric-react/lib/Icon';
 import './IconExample.scss';
 import { TestImages } from '../../../common/TestImages';
 
 export class IconImageSheetExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Icon
diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx
index 8303d934b47c6..4e6735f1e2d6b 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx
@@ -1,7 +1,5 @@
 /* tslint:disable:jsx-wrap-multiline */
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import './IconExample.scss';
 import { mergeStyles, registerIcons } from 'office-ui-fabric-react/lib/Styling';
@@ -75,7 +73,7 @@ const BorderBlindsIcon = (props: { col1?: string, col2?: string, col3?: string }
 };
 
 export class IconSvgExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Icon iconName='onedrive-svg' className='ms-IconExample' />
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
index 5d13ac2caf02a..44404536221d3 100644
--- a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import {
   BaseComponent,
   classNamesFunction,
@@ -49,7 +47,7 @@ export class ImageBase extends BaseComponent<IImageProps, IImageState> {
     };
   }
 
-  public componentWillReceiveProps(nextProps: IImageProps) {
+  public componentWillReceiveProps(nextProps: IImageProps): void {
     if (nextProps.src !== this.props.src) {
       this.setState({
         loadState: ImageLoadState.notLoaded
@@ -67,7 +65,7 @@ export class ImageBase extends BaseComponent<IImageProps, IImageState> {
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const imageProps = getNativeProps(this.props, imageProperties, ['width', 'height']);
     const {
       src,
@@ -151,8 +149,8 @@ export class ImageBase extends BaseComponent<IImageProps, IImageState> {
       // .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 = this._imageElement.value ? src && (this._imageElement.value.naturalWidth > 0 && this._imageElement.value.naturalHeight > 0) ||
-        (this._imageElement.value.complete && ImageBase._svgRegex.test(src!)) : false;
+      const isLoaded: boolean = this._imageElement.current ? src && (this._imageElement.current.naturalWidth > 0 && this._imageElement.current.naturalHeight > 0) ||
+        (this._imageElement.current.complete && ImageBase._svgRegex.test(src!)) : false;
 
       if (isLoaded) {
         this._computeCoverStyle(this.props);
@@ -163,25 +161,25 @@ export class ImageBase extends BaseComponent<IImageProps, IImageState> {
     }
   }
 
-  private _computeCoverStyle(props: IImageProps) {
+  private _computeCoverStyle(props: IImageProps): void {
     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.value &&
-      this._frameElement.value) {
+      this._imageElement.current &&
+      this._frameElement.current) {
       // 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.value.clientWidth / this._frameElement.value.clientHeight;
+        desiredRatio = this._frameElement.current.clientWidth / this._frameElement.current.clientHeight;
       }
 
       // Examine the source image to determine its original ratio.
-      const naturalRatio = this._imageElement.value.naturalWidth / this._imageElement.value.naturalHeight;
+      const naturalRatio = this._imageElement.current.naturalWidth / this._imageElement.current.naturalHeight;
 
       // Should we crop from the top or the sides?
       if (naturalRatio > desiredRatio) {
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 5c68075f7286a..ca63b70a8a669 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,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import * as ReactTestUtils from 'react-dom/test-utils';
 import * as renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
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 d09b82965ceb2..4c6f7188beffa 100644
--- a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import './ImagePage.scss';
@@ -23,11 +24,12 @@ const ImageNoneExampleCode = require('!raw-loader!office-ui-fabric-react/src/com
 const ImageMaximizeFrameExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx') as string;
 
 export class ImagePage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Image'
         componentName='ImageExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Image'
         exampleCards={
           <div>
             <ExampleCard title='ImageFit: Not specified' code={ ImageDefaultExampleCode }>
@@ -60,33 +62,22 @@ export class ImagePage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            Images render an image. The borders have been added to these examples in order to help visualize empty space in the image frame.
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Image/docs/ImageOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>
-                Provide descriptive values for the alt text attribute for all images.
-                If alt text isn't provided for images, the image information is inaccessible, for example, to people who cannot see and use a screen reader that reads aloud the information on a page.
-                <ul>
-                  <li>Consider context. If the image represents a function, be sure to indicate that. If it is to be consumed with other objects on the page, consider that as well.</li>
-                  <li>Make the description brief but accurate. Use one sentence, two at the most.</li>
-                </ul>
-              </li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Image/docs/ImageDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Repeat information in your alt text that is already on the page. Don't use "image of" or "graphic of" to describe it, as that is already apparent to the reader.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Image/docs/ImageDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/Image/docs/ImageDonts.md b/packages/office-ui-fabric-react/src/components/Image/docs/ImageDonts.md
new file mode 100644
index 0000000000000..81f37145e1ee6
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Image/docs/ImageDonts.md
@@ -0,0 +1 @@
+- Repeat information in your alt text that is already on the page. Don't use "image of" or "graphic of" to describe it, as that is already apparent to the reader.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Image/docs/ImageDos.md b/packages/office-ui-fabric-react/src/components/Image/docs/ImageDos.md
new file mode 100644
index 0000000000000..0a42ddaf626b4
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Image/docs/ImageDos.md
@@ -0,0 +1,4 @@
+- Provide descriptive values for the alt text attribute for all images.
+If alt text isn't provided for images, the image information is inaccessible, for example, to people who cannot see and use a screen reader that reads aloud the information on a page.
+  - Consider context. If the image represents a function, be sure to indicate that. If it is to be consumed with other objects on the page, consider that as well.
+  - Make the description brief but accurate. Use one sentence, two at the most.
diff --git a/packages/office-ui-fabric-react/src/components/Image/docs/ImageOverview.md b/packages/office-ui-fabric-react/src/components/Image/docs/ImageOverview.md
new file mode 100644
index 0000000000000..33c14c2dd74de
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Image/docs/ImageOverview.md
@@ -0,0 +1 @@
+Images render an image. The borders have been added to these examples in order to help visualize empty space in the image frame.
\ No newline at end of file
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 cd578c92bf63d..b7b8d562b2ce8 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
@@ -7,7 +7,7 @@ import {
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageCenterExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     const imageProps: IImageProps = {
       src: 'http://placehold.it/800x300',
       imageFit: ImageFit.center,
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 4205b03e12b5e..f09c7cab84078 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
@@ -7,7 +7,7 @@ import {
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageContainExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     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 cc7413420b627..d0bd820c33d78 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
@@ -7,7 +7,7 @@ import {
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageCoverExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     const imageProps: IImageProps = {
       src: 'http://placehold.it/500x500',
       imageFit: ImageFit.cover
diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx
index 12f31376505f8..271b5a138c68d 100644
--- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx
@@ -3,7 +3,7 @@ import { Image } from 'office-ui-fabric-react/lib/Image';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageDefaultExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <p>With no imageFit property set, the width and height props control the size of the frame. Depending on which of those props is used, the image may scale to fit the frame.</p>
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 d16f5779de52f..592272df632e8 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
@@ -7,7 +7,7 @@ import {
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageMaximizeFrameExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     const imageProps: IImageProps = {
       src: 'http://placehold.it/500x500',
       imageFit: ImageFit.cover,
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 288bdfaadbda0..5663ca0222611 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
@@ -7,7 +7,7 @@ import {
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageNoneExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     const imageProps: IImageProps = {
       src: 'http://placehold.it/500x250',
       imageFit: ImageFit.none,
diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.base.tsx b/packages/office-ui-fabric-react/src/components/Label/Label.base.tsx
index ffad9139703d7..5618c9bb7d227 100644
--- a/packages/office-ui-fabric-react/src/components/Label/Label.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Label/Label.base.tsx
@@ -5,7 +5,7 @@ import { getLabelClassNames } from './Label.classNames';
 
 @customizable('Label', ['theme'])
 export class Label extends BaseComponent<ILabelProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     const { disabled, required, children, className, theme } = this.props;
     return (
       <label
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 d8f5309b5285e..73cbe8c6bcce5 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
@@ -1,6 +1,4 @@
-/* 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';
@@ -14,7 +12,7 @@ describe('Label', () => {
     const component = ReactTestUtils.renderIntoDocument(
       <Label>test</Label>
     );
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
 
     expect(renderedDOM.textContent).toEqual('test');
   });
diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.types.ts b/packages/office-ui-fabric-react/src/components/Label/Label.types.ts
index 6df484a69cb70..4189663243207 100644
--- a/packages/office-ui-fabric-react/src/components/Label/Label.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Label/Label.types.ts
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { ITheme } from '../../Styling';
 
 export interface ILabel {
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 0a4a56da9b28e..11f948210ffae 100644
--- a/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { LabelBasicExample } from './examples/Label.Basic.Example';
@@ -12,11 +13,12 @@ import { LabelStatus } from './Label.checklist';
 const LabelBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx') as string;
 
 export class LabelPage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Label'
         componentName='LabelExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Label'
         exampleCards={
           <ExampleCard title='Label' code={ LabelBasicExampleCode }>
             <LabelBasicExample />
@@ -31,31 +33,22 @@ export class LabelPage extends React.Component<IComponentDemoPageProps, any> {
           />
         }
         overview={
-          <div>
-            <p>
-              Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Label/docs/LabelOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use sentence casing, e.g. “First name”.</li>
-              <li>Be short and concise.</li>
-              <li>When adding a Label to components, use the text as a noun or short noun phrase.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Label/docs/LabelDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Use Labels as instructional text, e.g. “Click to get started”.</li>
-              <li>Don’t use full sentences or complex punctuation (colons, semicolons, etc.).</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Label/docs/LabelDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/Label/docs/LabelDonts.md b/packages/office-ui-fabric-react/src/components/Label/docs/LabelDonts.md
new file mode 100644
index 0000000000000..33370b8e68f5d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Label/docs/LabelDonts.md
@@ -0,0 +1,2 @@
+- Use Labels as instructional text, e.g. “Click to get started”.
+- Don’t use full sentences or complex punctuation (colons, semicolons, etc.).
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Label/docs/LabelDos.md b/packages/office-ui-fabric-react/src/components/Label/docs/LabelDos.md
new file mode 100644
index 0000000000000..7269633705a33
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Label/docs/LabelDos.md
@@ -0,0 +1,3 @@
+- Use sentence casing, e.g. “First name”.
+- Be short and concise.
+- When adding a Label to components, use the text as a noun or short noun phrase.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Label/docs/LabelOverview.md b/packages/office-ui-fabric-react/src/components/Label/docs/LabelOverview.md
new file mode 100644
index 0000000000000..7cbdb2ed43e85
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Label/docs/LabelOverview.md
@@ -0,0 +1 @@
+Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx
index 791fa98d0f960..8d0f66c54b544 100644
--- a/packages/office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
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
index 260af0b334ea6..fa98fab4fde76 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx
@@ -23,7 +23,7 @@ let _defaultHostSelector: string | undefined;
 
 const getClassNames = classNamesFunction<ILayerStyleProps, ILayerStyles>();
 
-@customizable('Layer', ['theme'])
+@customizable('Layer', ['theme', 'hostId'])
 export class LayerBase extends BaseComponent<ILayerProps, {}> {
 
   public static defaultProps: ILayerProps = {
@@ -73,11 +73,11 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
     }
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this.componentDidUpdate();
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     this._removeLayerElement();
 
     if (this.props.hostId) {
@@ -88,7 +88,7 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
     }
   }
 
-  public componentDidUpdate() {
+  public componentDidUpdate(): void {
     const host = this._getHost();
 
     const { className, getStyles, theme } = this.props;
@@ -108,7 +108,7 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
       this._host = host;
 
       if (!this._layerElement) {
-        const rootElement = this._rootElement.value;
+        const rootElement = this._rootElement.current;
         const doc = getDocument(rootElement);
 
         if (!doc || !rootElement) {
@@ -116,7 +116,7 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
         }
 
         this._layerElement = doc.createElement('div');
-        this._layerElement.className = classNames.root;
+        this._layerElement.className = classNames.root!;
 
         host.appendChild(this._layerElement);
         setVirtualParent(this._layerElement, rootElement);
@@ -146,7 +146,7 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <span
         className='ms-Layer'
@@ -155,7 +155,7 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
     );
   }
 
-  private _removeLayerElement() {
+  private _removeLayerElement(): void {
     if (this._layerElement) {
       this.props.onLayerWillUnmount!();
 
@@ -171,7 +171,7 @@ export class LayerBase extends BaseComponent<ILayerProps, {}> {
 
   private _getHost(): Node | undefined {
     const { hostId } = this.props;
-    const doc = getDocument(this._rootElement.value);
+    const doc = getDocument(this._rootElement.current);
 
     if (!doc) {
       return undefined;
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 c749b94e1ed7c..9794524990eec 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
@@ -24,7 +24,7 @@ describe('Layer', () => {
 
       public context: any;
 
-      public render() {
+      public render(): JSX.Element {
         return (
           <div id='child'>{ this.context.foo }</div>
         );
@@ -42,7 +42,7 @@ describe('Layer', () => {
         };
       }
 
-      public render() {
+      public render(): JSX.Element {
         return (
           <div id='parent'>
             <Layer hostId='foo'>
@@ -55,7 +55,7 @@ describe('Layer', () => {
 
     class App extends React.Component<{}, {}> {
 
-      public render() {
+      public render(): JSX.Element {
         return (
           <div id='app'>
             <Parent />
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 054c08096c93d..7a8f81aa60af2 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx
@@ -12,15 +12,15 @@ export class LayerHost extends BaseComponent<ILayerHostProps, {}> {
     return false;
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     LayerBase.notifyHostChanged(this.props.id!);
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     LayerBase.notifyHostChanged(this.props.id!);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div { ...this.props } className={ css('ms-LayerHost', this.props.className) } />
     );
diff --git a/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx b/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx
index 23e6f79db7c0f..4aa50f53da49c 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx
@@ -4,22 +4,26 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { LayerBasicExample } from './examples/Layer.Basic.Example';
 import { LayerHostedExample } from './examples/Layer.Hosted.Example';
+import { LayerCustomizedExample } from './examples/Layer.Customized.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { LayerStatus } from './Layer.checklist';
 
 const LayerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx') as string;
 const LayerHostedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx') as string;
+const LayerCustomizedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Layer/examples/Layer.Customized.Example.tsx') as string;
 
 export class LayerPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Layer'
         componentName='LayerExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Layer'
         exampleCards={
           <div>
             <ExampleCard title='Basic layered content' code={ LayerBasicExampleCode }>
@@ -28,6 +32,9 @@ export class LayerPage extends React.Component<IComponentDemoPageProps, {}> {
             <ExampleCard title='Using LayerHost to control projection' code={ LayerHostedExampleCode }>
               <LayerHostedExample />
             </ExampleCard>
+            <ExampleCard title='Using Customizer to control the default layer behavior' code={ LayerCustomizedExampleCode }>
+              <LayerCustomizedExample />
+            </ExampleCard>
           </div>
         }
         propertiesTables={
@@ -38,42 +45,27 @@ export class LayerPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              A Layer is a technical component that does not have specific Design guidance.
-            </p>
-            <p>
-              { `Layers are used to render content outside of a DOM tree, at the end of the document. This allows content to escape traditional boundaries caused by "overflow: hidden" css rules and keeps it on the top without using z-index rules. This is useful for example in ContextualMenu and Tooltip scenarios, where the content should always overlay everything else.` }
-            </p>
-            <p>{
-              `There are some special considerations. Due to the nature of rendering content elsewhere asynchronously, React refs within content will not be resolvable synchronously at the time the Layer is mounted. Therefore, to use refs correctly, use functional refs ( ref={ (el) => { this._root = el; } ) rather than string refs ( ref='root' ). Additionally measuring the physical Layer element will not include any of the children, since it won't render it. Events that propgate from within the content will not go through the Layer element as well.`
-            }</p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Layer/docs/LayerOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>{
-                'Use functional refs ( ref={ (el) => { this._root = el; } ).'
-              }
-              </li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Layer/docs/LayerDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>{ 'Don\'t use string refs ( ref=\'root\' ).' }</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Layer/docs/LayerDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...LayerStatus}
+            { ...LayerStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDonts.md b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDonts.md
new file mode 100644
index 0000000000000..ddf4a091d5b6d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDonts.md
@@ -0,0 +1 @@
+- Don't use string refs `ref='root'`.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDos.md b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDos.md
new file mode 100644
index 0000000000000..e0e0083725950
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerDos.md
@@ -0,0 +1 @@
+- Use functional refs `ref={ (el) => { this._root = el; }`.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Layer/docs/LayerOverview.md b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerOverview.md
new file mode 100644
index 0000000000000..cb8eb33347489
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Layer/docs/LayerOverview.md
@@ -0,0 +1,5 @@
+A Layer is a technical component that does not have specific Design guidance.
+
+Layers are used to render content outside of a DOM tree, at the end of the document. This allows content to escape traditional boundaries caused by "overflow: hidden" css rules and keeps it on the top without using z-index rules. This is useful for example in ContextualMenu and Tooltip scenarios, where the content should always overlay everything else.
+
+There are some special considerations. Due to the nature of rendering content elsewhere asynchronously, React refs within content will not be resolvable synchronously at the time the Layer is mounted. Therefore, to use refs correctly, use functional refs `ref={ (el) => { this._root = el; }` rather than string refs `ref='root'`. Additionally measuring the physical Layer element will not include any of the children, since it won't render it. Events that propgate from within the content will not go through the Layer element as well.
\ No newline at end of file
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 535c03f86259a..8e2fffbd32cc0 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
@@ -27,11 +27,11 @@ export class LayerContentExample extends BaseComponent<{}, {
     };
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._async.setInterval(() => this.setState({ time: new Date().toLocaleTimeString() }), 1000);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className={ 'LayerExample-content ' + AnimationClassNames.scaleUpIn100 }>
         <div className='LayerExample-textContent'>{ this.context.message }</div>
@@ -62,7 +62,7 @@ export class LayerBasicExample extends BaseComponent<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { showLayer } = this.state;
 
     return (
diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Customized.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Customized.Example.tsx
new file mode 100644
index 0000000000000..8ec036b198ef7
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Customized.Example.tsx
@@ -0,0 +1,93 @@
+
+import * as React from 'react';
+import { Customizer } from '@uifabric/utilities';
+import { Panel } from '../../../Panel';
+import { Checkbox } from '../../../Checkbox';
+import { LayerHost } from '../LayerHost';
+
+export interface ILayerCustomizedExampleState {
+  showPanel: boolean;
+  trapPanel: boolean;
+}
+
+export class LayerCustomizedExample extends React.Component<{}, ILayerCustomizedExampleState> {
+  constructor(props: {}) {
+    super(props);
+
+    this.state = {
+      showPanel: true,
+      trapPanel: true
+    };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div>
+        <p>
+          A <code>Panel</code> is rendered, trapped in a specified container.
+          Use 'Show panel' to show/hide the panel (or click the X to dismiss it).
+          Use 'Trap panel' to release the panel from its bounds.
+        </p>
+        <Checkbox label='Show panel' checked={ this.state.showPanel } onChange={ this._onShowPanelChange } />
+        <Checkbox label='Trap panel' checked={ this.state.trapPanel } onChange={ this._onTrapPanelChange } />
+        <Customizer
+          scopedSettings={
+            this.state.trapPanel ? {
+              Layer: {
+                hostId: 'test'
+              }
+            } : {}
+          }
+        >
+          {
+            this.state.showPanel ?
+              (
+                <Panel
+                  isOpen={ true }
+                  hasCloseButton={ true }
+                  headerText='Test'
+                  focusTrapZoneProps={
+                    {
+                      isClickableOutsideFocusTrap: true,
+                      forceFocusInsideTrap: false
+                    }
+                  }
+                  onDismissed={ this._onDismissPanel }
+                />
+              ) : (
+                <div />
+              )
+          }
+        </Customizer>
+        <LayerHost
+          id='test'
+          style={
+            {
+              position: 'relative',
+              height: '400px',
+              overflow: 'hidden'
+            }
+          }
+        />
+      </div>
+    );
+  }
+
+  private _onDismissPanel = (): void => {
+    this.setState({
+      showPanel: false
+    });
+  }
+
+  private _onShowPanelChange = (event: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean): void => {
+    this.setState({
+      showPanel: !!checked
+    });
+  }
+
+  private _onTrapPanelChange = (event: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean): void => {
+    this.setState({
+      trapPanel: !!checked
+    });
+  }
+}
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 3844df5772229..abab0b9ad46f2 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
@@ -23,7 +23,7 @@ export class LayerHostedExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { showLayer, showLayerNoId, showHost } = this.state;
     const content = (
       <div className={ 'LayerExample-content ' + AnimationClassNames.scaleUpIn100 } >
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
index 255adf0716bb4..d770b1a17d940 100644
--- a/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx
@@ -21,7 +21,7 @@ const getClassNames = classNamesFunction<ILinkStyleProps, ILinkStyles>();
 export class LinkBase extends BaseComponent<ILinkProps, any> implements ILink {
   private _link = createRef<HTMLAnchorElement | HTMLButtonElement | null>();
 
-  public render() {
+  public render(): JSX.Element {
     const { disabled, children, className, href, theme, getStyles } = this.props;
 
     const classNames = getClassNames(getStyles!, {
@@ -60,8 +60,8 @@ export class LinkBase extends BaseComponent<ILinkProps, any> implements ILink {
   }
 
   public focus() {
-    if (this._link.value) {
-      this._link.value.focus();
+    if (this._link.current) {
+      this._link.current.focus();
     }
   }
 
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 109783f3195f6..afa26bd42905b 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,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { LinkBase } from './Link.base';
 
 import {
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 86e45618b070b..caecfff31d25a 100644
--- a/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { LinkBasicExample } from './examples/Link.Basic.Example';
@@ -12,11 +13,12 @@ import { LinkStatus } from './Link.checklist';
 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() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Link'
         componentName='LinkExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Link'
         exampleCards={
           <ExampleCard title='Link' code={ LinkBasicExampleCode }>
             <LinkBasicExample />
@@ -32,37 +34,22 @@ export class LinkPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.
-            </p>
-
-            <p>
-              A Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Link/docs/LinkOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use to navigate to another page, window, or help topic; display a definition; initiate a command; or choose an option.</li>
-              <li>Make Links discoverable by visual inspection alone. Users shouldn't have to interact with your program to find links.</li>
-              <li>Use Links that give specific descriptive information about the result of clicking on the link, using as much text as necessary. Users should be able to accurately predict the result of a link from its link text and optional Tooltip.</li>
-              <li>Use text that suggests clicking, such as a command starting with an imperative verb like "Show", "Print", "Copy", or "Delete".</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Link/docs/LinkDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>
-                Use if the action is destructive or irreversible. Because users associate links with navigation (and the ability to back out), Links aren't appropriate for commands with significant consequences.
-              </li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Link/docs/LinkDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/Link/docs/LinkDonts.md b/packages/office-ui-fabric-react/src/components/Link/docs/LinkDonts.md
new file mode 100644
index 0000000000000..8209bbe334a41
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Link/docs/LinkDonts.md
@@ -0,0 +1 @@
+- Use if the action is destructive or irreversible. Because users associate links with navigation (and the ability to back out), Links aren't appropriate for commands with significant consequences.
diff --git a/packages/office-ui-fabric-react/src/components/Link/docs/LinkDos.md b/packages/office-ui-fabric-react/src/components/Link/docs/LinkDos.md
new file mode 100644
index 0000000000000..d868102317df7
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Link/docs/LinkDos.md
@@ -0,0 +1,4 @@
+- Use to navigate to another page, window, or help topic; display a definition; initiate a command; or choose an option.
+- Make Links discoverable by visual inspection alone. Users shouldn't have to interact with your program to find links.
+- Use Links that give specific descriptive information about the result of clicking on the link, using as much text as necessary. Users should be able to accurately predict the result of a link from its link text and optional Tooltip.
+- Use text that suggests clicking, such as a command starting with an imperative verb like "Show", "Print", "Copy", or "Delete".
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Link/docs/LinkOverview.md b/packages/office-ui-fabric-react/src/components/Link/docs/LinkOverview.md
new file mode 100644
index 0000000000000..405f318bc8740
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Link/docs/LinkOverview.md
@@ -0,0 +1,3 @@
+With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.
+
+A Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.
diff --git a/packages/office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx
index 50df2c37b25ed..d3073e4c2a9a2 100644
--- a/packages/office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx
@@ -3,7 +3,7 @@ import { Link } from 'office-ui-fabric-react/lib/Link';
 import './Link.Example.scss';
 
 export class LinkBasicExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-LinkExample'>
         <span>When a link has an href, </span>
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 9e8a2749e7cab..49581283a9479 100644
--- a/packages/office-ui-fabric-react/src/components/List/List.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/List.tsx
@@ -257,15 +257,15 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     }
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
 
     this._updatePages();
     this._measureVersion++;
-    this._scrollElement = findScrollableParent(this._root.value) as HTMLElement;
+    this._scrollElement = findScrollableParent(this._root.current) as HTMLElement;
 
     this._events.on(window, 'resize', this._onAsyncResize);
-    if (this._root.value) {
-      this._events.on(this._root.value, 'focus', this._onFocus, true);
+    if (this._root.current) {
+      this._events.on(this._root.current, 'focus', this._onFocus, true);
     }
     if (this._scrollElement) {
       this._events.on(this._scrollElement, 'scroll', this._onScroll);
@@ -273,7 +273,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     }
   }
 
-  public componentWillReceiveProps(newProps: IListProps) {
+  public componentWillReceiveProps(newProps: IListProps): void {
     if (newProps.items !== this.props.items ||
       newProps.renderCount !== this.props.renderCount ||
       newProps.startIndex !== this.props.startIndex) {
@@ -289,7 +289,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     }
   }
 
-  public shouldComponentUpdate(newProps: IListProps, newState: IListState) {
+  public shouldComponentUpdate(newProps: IListProps, newState: IListState): boolean {
     const { pages: oldPages } = this.state;
     const { pages: newPages } = newState;
     let shouldComponentUpdate = false;
@@ -318,7 +318,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     return shouldComponentUpdate;
   }
 
-  public forceUpdate() {
+  public forceUpdate(): void {
     this._invalidatePageCache();
     // Ensure that when the list is force updated we update the pages first before render.
     this._updateRenderRects(this.props, true);
@@ -328,7 +328,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     super.forceUpdate();
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       className,
       role
@@ -367,7 +367,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   /**
    * when props.items change or forceUpdate called, throw away cached pages
    */
-  private _invalidatePageCache() {
+  private _invalidatePageCache(): void {
     this._pageCache = {};
   }
 
@@ -473,10 +473,10 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   }
 
   /** Track the last item index focused so that we ensure we keep it rendered. */
-  private _onFocus(ev: any) {
+  private _onFocus(ev: any): void {
     let target = ev.target as HTMLElement;
 
-    while (target !== this._surface.value) {
+    while (target !== this._surface.current) {
       const indexString = target.getAttribute('data-list-index');
 
       if (indexString) {
@@ -492,7 +492,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
    * Called synchronously to reset the required render range to 0 on scrolling. After async scroll has executed,
    * we will call onAsyncIdle which will reset it back to it's correct value.
    */
-  private _onScroll() {
+  private _onScroll(): void {
     if (!this.state.isScrolling) {
       this.setState({ isScrolling: true });
     }
@@ -500,7 +500,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     this._onScrollingDone();
   }
 
-  private _resetRequiredWindows() {
+  private _resetRequiredWindows(): void {
     this._requiredWindowsAhead = 0;
     this._requiredWindowsBehind = 0;
   }
@@ -508,7 +508,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   /**
    * Debounced method to asynchronously update the visible region on a scroll event.
    */
-  private _onAsyncScroll() {
+  private _onAsyncScroll(): void {
     this._updateRenderRects();
 
     // Only update pages when the visible rect falls outside of the materialized rect.
@@ -523,7 +523,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
    * This is an async debounced method that will try and increment the windows we render. If we can increment
    * either, we increase the amount we render and re-evaluate.
    */
-  private _onAsyncIdle() {
+  private _onAsyncIdle(): void {
     const { renderedWindowsAhead, renderedWindowsBehind } = this.props;
     const {
       _requiredWindowsAhead: requiredWindowsAhead,
@@ -552,15 +552,15 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
    * Function to call when the list is done scrolling.
    * This function is debounced.
    */
-  private _onScrollingDone() {
+  private _onScrollingDone(): void {
     this.setState({ isScrolling: false });
   }
 
-  private _onAsyncResize() {
+  private _onAsyncResize(): void {
     this.forceUpdate();
   }
 
-  private _updatePages(props: IListProps = this.props) {
+  private _updatePages(props: IListProps = this.props): void {
     // console.log('updating pages');
 
     if (!this._requiredRect) {
@@ -604,7 +604,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
    * @param newPages The new pages
    * @param props The props to use
    */
-  private _notifyPageChanges(oldPages: IPage[], newPages: IPage[], props: IListProps = this.props) {
+  private _notifyPageChanges(oldPages: IPage[], newPages: IPage[], props: IListProps = this.props): void {
     const {
       onPageAdded,
       onPageRemoved
@@ -639,7 +639,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     }
   }
 
-  private _updatePageMeasurements(pages: IPage[]) {
+  private _updatePageMeasurements(pages: IPage[]): boolean {
     let heightChanged = false;
 
     // when not in virtualize mode, we render all the items without page measurement
@@ -699,7 +699,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   }
 
   /** Called when a page has been added to the DOM. */
-  private _onPageAdded(page: IPage) {
+  private _onPageAdded(page: IPage): void {
     const { onPageAdded } = this.props;
 
     // console.log('page added', page.startIndex, this.state.pages.map(page => page.key).join(', '));
@@ -710,7 +710,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   }
 
   /** Called when a page has been removed from the DOM. */
-  private _onPageRemoved(page: IPage) {
+  private _onPageRemoved(page: IPage): void {
     const { onPageRemoved } = this.props;
 
     // console.log('  --- page removed', page.startIndex, this.state.pages.map(page => page.key).join(', '));
@@ -910,7 +910,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   }
 
   /** Calculate the visible rect within the list where top: 0 and left: 0 is the top/left of the list. */
-  private _updateRenderRects(props?: IListProps, forceUpdate?: boolean) {
+  private _updateRenderRects(props?: IListProps, forceUpdate?: boolean): void {
     props = props || this.props;
     const { renderedWindowsAhead, renderedWindowsBehind } = props;
     const { pages } = this.state;
@@ -927,7 +927,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     // This needs to be called to recalculate when new pages should be loaded.
     // We check to see how far we've scrolled and if it's further than a third of a page we run it again.
     if (
-      this._surface.value &&
+      this._surface.current &&
       (forceUpdate ||
         !pages ||
         !this._surfaceRect ||
@@ -935,7 +935,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
         scrollHeight !== this._scrollHeight ||
         Math.abs(this._scrollTop - scrollTop) > this._estimatedPageHeight / 3)
     ) {
-      surfaceRect = this._surfaceRect = _measureSurfaceRect(this._surface.value);
+      surfaceRect = this._surfaceRect = _measureSurfaceRect(this._surface.current);
       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 8f9ba43d51e08..941d82a209724 100644
--- a/packages/office-ui-fabric-react/src/components/List/ListPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/ListPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { ListBasicExample } from './examples/List.Basic.Example';
@@ -27,11 +28,12 @@ export class ListPage extends React.Component<IComponentDemoPageProps, {}> {
     _cachedItems = _cachedItems || createListItems(5000);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='List'
         componentName='ListExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/List'
         exampleCards={
           <div>
             <ExampleCard title='List of 5000 grid items' isOptIn={ true } code={ ListGridExampleCode }>
@@ -57,17 +59,9 @@ export class ListPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              <span>List provides a base component for rendering large sets of items. It is agnostic of layout, the tile component used, and selection management. These concerns can be layered separately.</span>
-            </p>
-            <p>
-              <b>Performance is important, and DOM content is expensive. Therefore limit what you render.</b> Unlike a simple for loop that renders all items in a set, a List uses ui virtualization. It only renders a subset of items, and as you scroll around, the subset of rendered content is shifted to what you're looking at. This gives a much better experience for large sets, especially when the per-item components are complex/render intensive/network intensive.
-            </p>
-            <p>
-              Lists break down the set of items passed in into pages. Only pages within a "materialized window" are actually rendered. As that window changes due to scroll events, pages that fall outside that window are removed, and their layout space is remembered and pushed into spacer elements. This gives the user the experience of browsing massive amounts of content but only using a small number of actual elements. This gives the browser much less layout to resolve, and gives React DOM diffing much less content to worry about.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/List/docs/ListOverview.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md b/packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md
new file mode 100644
index 0000000000000..8ddcc1743928c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/List/docs/ListOverview.md
@@ -0,0 +1,5 @@
+List provides a base component for rendering large sets of items. It is agnostic of layout, the tile component used, and selection management. These concerns can be layered separately.
+
+**Performance is important, and DOM content is expensive. Therefore limit what you render.** Unlike a simple for loop that renders all items in a set, a List uses ui virtualization. It only renders a subset of items, and as you scroll around, the subset of rendered content is shifted to what you're looking at. This gives a much better experience for large sets, especially when the per-item components are complex/render intensive/network intensive.
+
+Lists break down the set of items passed in into pages. Only pages within a "materialized window" are actually rendered. As that window changes due to scroll events, pages that fall outside that window are removed, and their layout space is remembered and pushed into spacer elements. This gives the user the experience of browsing massive amounts of content but only using a small number of actual elements. This gives the browser much less layout to resolve, and gives React DOM diffing much less content to worry about.
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 a55ce1d62f309..fae71f294ce3b 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
@@ -28,7 +28,7 @@ export class ListBasicExample extends React.Component<IListBasicExampleProps, an
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { items: originalItems } = this.props;
     const { items } = this.state;
     const resultCountText = items.length === originalItems.length ? '' : ` (${items.length} of ${originalItems.length} shown)`;
@@ -44,7 +44,7 @@ export class ListBasicExample extends React.Component<IListBasicExampleProps, an
     );
   }
 
-  private _onFilterChanged(text: string) {
+  private _onFilterChanged(text: string): void {
     const { items } = this.props;
 
     this.setState({
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 bff85a17d7a2c..eb8ba99f3c6d4 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
@@ -16,7 +16,7 @@ export class ListGhostingExample extends React.Component<IListGhostingExamplePro
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { items } = this.props;
 
     return (
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 0d735d05bca59..184a1ba77606e 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
@@ -23,7 +23,7 @@ export class ListGridExample extends React.Component<IListGridExampleProps> {
     this._getPageHeight = this._getPageHeight.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <FocusZone>
         <List
@@ -38,7 +38,7 @@ export class ListGridExample extends React.Component<IListGridExampleProps> {
     );
   }
 
-  private _getItemCountForPage(itemIndex: number, surfaceRect: IRectangle) {
+  private _getItemCountForPage(itemIndex: number, surfaceRect: IRectangle): number {
     if (itemIndex === 0) {
       this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);
       this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);
@@ -48,7 +48,7 @@ export class ListGridExample extends React.Component<IListGridExampleProps> {
     return this._columnCount * ROWS_PER_PAGE;
   }
 
-  private _getPageHeight(itemIndex: number, surfaceRect: IRectangle) {
+  private _getPageHeight(itemIndex: number, surfaceRect: IRectangle): number {
     return this._rowHeight * ROWS_PER_PAGE;
   }
 
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 1a5abcb5578c1..5c509796ffcb5 100644
--- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
+++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
@@ -59,12 +59,12 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     };
   }
 
-  public componentDidMount() {
-    this._scrollableParent = findScrollableParent(this._root.value) as HTMLElement;
+  public componentDidMount(): void {
+    this._scrollableParent = findScrollableParent(this._root.current) 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._root.value : this._scrollableSurface;
+    const hitTarget = this.props.isDraggingConstrainedToRoot ? this._root.current : this._scrollableSurface;
 
     this._events.on(
       hitTarget,
@@ -82,7 +82,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
       true);
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     if (this._autoScroll) {
       this._autoScroll.dispose();
     }
@@ -125,7 +125,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
   }
 
   /** Determine if the mouse event occured on a scrollbar of the target element. */
-  private _isMouseEventOnScrollbar(ev: MouseEvent) {
+  private _isMouseEventOnScrollbar(ev: MouseEvent): boolean {
     const targetElement = ev.target as HTMLElement;
     const targetScrollbarWidth = (targetElement.offsetWidth - targetElement.clientWidth);
 
@@ -165,16 +165,16 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     }
 
     if (!this._isTouch && isEnabled && !this._isDragStartInSelection(ev) && (!onShouldStartSelection || onShouldStartSelection(ev))) {
-      if (this._scrollableSurface && ev.button === 0 && this._root.value) {
+      if (this._scrollableSurface && ev.button === 0 && this._root.current) {
         this._selectedIndicies = {};
         this._preservedIndicies = undefined;
         this._events.on(window, 'mousemove', this._onAsyncMouseMove);
         this._events.on(this._scrollableParent, 'scroll', this._onAsyncMouseMove);
         this._events.on(window, 'click', this._onMouseUp, true);
 
-        this._autoScroll = new AutoScroll(this._root.value);
+        this._autoScroll = new AutoScroll(this._root.current);
         this._scrollTop = this._scrollableSurface.scrollTop;
-        this._rootRect = this._root.value.getBoundingClientRect();
+        this._rootRect = this._root.current.getBoundingClientRect();
 
         this._onMouseMove(ev);
       }
@@ -208,7 +208,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     };
   }
 
-  private _onAsyncMouseMove(ev: MouseEvent) {
+  private _onAsyncMouseMove(ev: MouseEvent): void {
     this._async.requestAnimationFrame(() => {
       this._onMouseMove(ev);
     });
@@ -217,7 +217,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     ev.preventDefault();
   }
 
-  private _onMouseMove(ev: MouseEvent) {
+  private _onMouseMove(ev: MouseEvent): boolean | undefined {
     if (!this._autoScroll) {
       return;
     }
@@ -269,7 +269,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     return false;
   }
 
-  private _onMouseUp(ev: MouseEvent) {
+  private _onMouseUp(ev: MouseEvent): void {
     this._events.off(window);
     this._events.off(this._scrollableParent, 'scroll');
 
@@ -303,11 +303,11 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
    */
   private _isDragStartInSelection(ev: MouseEvent): boolean {
     const selection = this.props.selection;
-    if (!this._root.value || (selection && selection.getSelectedCount() === 0)) {
+    if (!this._root.current || (selection && selection.getSelectedCount() === 0)) {
       return false;
     }
 
-    const allElements = this._root.value.querySelectorAll('[data-selection-index]');
+    const allElements = this._root.current.querySelectorAll('[data-selection-index]');
     for (let i = 0; i < allElements.length; i++) {
       const element = allElements[i];
       const index = Number(element.getAttribute('data-selection-index'));
@@ -325,7 +325,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._root.value) {
+    while (element && element !== this._root.current) {
       if (element.getAttribute('data-selection-toggle') === 'true') {
         return true;
       }
@@ -336,14 +336,14 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     return false;
   }
 
-  private _evaluateSelection(dragRect: IRectangle, rootRect: IRectangle) {
+  private _evaluateSelection(dragRect: IRectangle, rootRect: IRectangle): void {
     // Break early if we don't need to evaluate.
-    if (!dragRect || !this._root.value) {
+    if (!dragRect || !this._root.current) {
       return;
     }
 
     const { selection } = this.props;
-    const allElements = this._root.value.querySelectorAll('[data-selection-index]');
+    const allElements = this._root.current.querySelectorAll('[data-selection-index]');
 
     if (!this._itemRectCache) {
       this._itemRectCache = {};
diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelectionPage.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelectionPage.tsx
index d1e497e7ba5cb..652663238ce53 100644
--- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelectionPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelectionPage.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   ExampleCard,
   ComponentPage,
+  PageMarkdown,
   IComponentDemoPageProps
 } from '@uifabric/example-app-base';
 
@@ -10,33 +11,21 @@ import { MarqueeSelectionBasicExample } from './examples/MarqueeSelection.Basic.
 const MarqueeSelectionBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx') as string;
 
 export class MarqueeSelectionPage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='MarqueeSelection'
         componentName='MarqueeSelectionExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/MarqueeSelection'
         exampleCards={
           <ExampleCard title='Basic Selection Example' code={ MarqueeSelectionBasicExampleCode }>
             <MarqueeSelectionBasicExample />
           </ExampleCard>
         }
         overview={
-          <div>
-            <p>
-              The MarqueeSelection component provides a service which allows the user to drag a rectangle to be drawn around
-              items to select them. This works in conjunction with a selection object, which can be used to generically store selection state, separate from a component that consumes the state.
-            </p>
-            <p>
-              MarqueeSelection also works in conjunction with the AutoScroll utility to automatically scroll the container when we drag a rectangle within the vicinity of the edges.
-            </p>
-            <p>
-              When a selection rectangle is dragged, we look for elements with the <b>data-selection-index</b> attribute populated. We get these elements' boundingClientRects and compare them with the root's rect to determine selection state. We update the selection state appropriately.
-            </p>
-            <p>
-              In virtualization cases where items that were once selected are dematerialized, we will keep the item in its
-              previous state until we know definitively if it's on/off. (In other words, this works with List.)
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/MarqueeSelection/docs/MarqueeSelectionOverview.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
       />
diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/docs/MarqueeSelectionOverview.md b/packages/office-ui-fabric-react/src/components/MarqueeSelection/docs/MarqueeSelectionOverview.md
new file mode 100644
index 0000000000000..2a3b08b9fe619
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/docs/MarqueeSelectionOverview.md
@@ -0,0 +1,9 @@
+The MarqueeSelection component provides a service which allows the user to drag a rectangle to be drawn around
+items to select them. This works in conjunction with a selection object, which can be used to generically store selection state, separate from a component that consumes the state.
+
+MarqueeSelection also works in conjunction with the AutoScroll utility to automatically scroll the container when we drag a rectangle within the vicinity of the edges.
+
+When a selection rectangle is dragged, we look for elements with the **data-selection-index** attribute populated. We get these elements' boundingClientRects and compare them with the root's rect to determine selection state. We update the selection state appropriately.
+
+In virtualization cases where items that were once selected are dematerialized, we will keep the item in its
+previous state until we know definitively if it's on/off. (In other words, this works with List.)
diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx
index 4396c07dabcf4..3e256ae89093c 100644
--- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/examples/MarqueeSelection.Basic.Example.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import {
   css,
@@ -55,11 +53,11 @@ export class MarqueeSelectionBasicExample extends React.Component<{}, IMarqueeSe
     this._selection.setItems(PHOTOS);
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._isMounted = true;
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <MarqueeSelection selection={ this._selection } isEnabled={ this.state.isMarqueeEnabled }>
         <Checkbox
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 bb9e3228c718e..ed70283be509a 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
@@ -1,6 +1,4 @@
-/* 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';
@@ -14,7 +12,7 @@ describe('MessageBar', () => {
 
   function renderIntoDocument(element: React.ReactElement<any>): HTMLElement {
     const component = ReactTestUtils.renderIntoDocument(element);
-    const renderedDOM: Element = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
     return renderedDOM as HTMLElement;
   }
 
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 17fcdbed433ac..8d7368c813c1a 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
@@ -195,7 +195,7 @@ export class MessageBar extends BaseComponent<IMessageBarProps, IMessageBarState
     );
   }
 
-  private _getAnnouncementPriority(): string {
+  private _getAnnouncementPriority(): 'assertive' | 'polite' {
     switch (this.props.messageBarType) {
       case MessageBarType.blocked:
       case MessageBarType.error:
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBarPage.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBarPage.tsx
index c8ad8e9461a73..9f3b92774bcdc 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBarPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBarPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { MessageBarBasicExample } from './examples/MessageBar.Basic.Example';
@@ -12,11 +13,12 @@ import { MessageBarStatus } from './MessageBar.checklist';
 const MessageBarBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx') as string;
 
 export class MessageBarPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='MessageBar'
         componentName='MessageBarExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/MessageBar'
         exampleCards={
           <ExampleCard
             title='Various MessageBar types'
@@ -33,38 +35,27 @@ export class MessageBarPage extends React.Component<IComponentDemoPageProps, {}>
           />
         }
         overview={
-          <div>
-            <p>
-              A MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/MessageBar/docs/MessageBarOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Place the message bar near the top of the relevant view, in a highly visible but unobtrusive location.</li>
-              <li>Keep the text very brief. Be succinct and your users are more likely to read everything you say.</li>
-              <li>Consider how localization may affect the message. Translation to other languages may add up to 33% more characters to the string length.</li>
-              <li>Use the right variant for the type and urgency of the particular message (see variants)</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don’t use paragraphs, long sentences, or special formatting in a MessageBar. The control tries to grow to accommodate all the text and will just result in pushing the user’s main content too low on the view.</li>
-              <li>Don’t use buttons when a subtler link will suffice. Reserve the usage of button for when the MessageBar has a single ”hero” action that has vital usefulness to the user at that particular moment. Using more than one button is discouraged.
-              </li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...MessageBarStatus}
+            { ...MessageBarStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDonts.md b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDonts.md
new file mode 100644
index 0000000000000..c6395569d1846
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDonts.md
@@ -0,0 +1,2 @@
+- Don’t use paragraphs, long sentences, or special formatting in a MessageBar. The control tries to grow to accommodate all the text and will just result in pushing the user’s main content too low on the view.
+- Don’t use buttons when a subtler link will suffice. Reserve the usage of button for when the MessageBar has a single ”hero” action that has vital usefulness to the user at that particular moment. Using more than one button is discouraged.
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDos.md b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDos.md
new file mode 100644
index 0000000000000..e81210d598b05
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarDos.md
@@ -0,0 +1,4 @@
+- Place the message bar near the top of the relevant view, in a highly visible but unobtrusive location.
+- Keep the text very brief. Be succinct and your users are more likely to read everything you say.
+- Consider how localization may affect the message. Translation to other languages may add up to 33% more characters to the string length.
+- Use the right variant for the type and urgency of the particular message (see variants)
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarOverview.md b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarOverview.md
new file mode 100644
index 0000000000000..b7ecf68c232b5
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/docs/MessageBarOverview.md
@@ -0,0 +1 @@
+A MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.
\ No newline at end of file
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 635a65ff412c4..41d21eb32b3de 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { MessageBarButton } from 'office-ui-fabric-react/lib/Button';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { Label } from 'office-ui-fabric-react/lib/Label';
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 99cdb11f5a5ac..548a195cc62b4 100644
--- a/packages/office-ui-fabric-react/src/components/Modal/Modal.tsx
+++ b/packages/office-ui-fabric-react/src/components/Modal/Modal.tsx
@@ -46,7 +46,7 @@ export class Modal extends BaseComponent<IModalProps, IDialogState> implements I
     };
   }
 
-  public componentWillReceiveProps(newProps: IModalProps) {
+  public componentWillReceiveProps(newProps: IModalProps): void {
     clearTimeout(this._onModalCloseTimer);
 
     // Opening the dialog
@@ -142,13 +142,13 @@ export class Modal extends BaseComponent<IModalProps, IDialogState> implements I
   }
 
   public focus() {
-    if (this._focusTrapZone.value) {
-      this._focusTrapZone.value.focus();
+    if (this._focusTrapZone.current) {
+      this._focusTrapZone.current.focus();
     }
   }
 
   // Watch for completed animations and set the state
-  private _onModalClose() {
+  private _onModalClose(): void {
     this.setState({
       isOpen: false
     });
diff --git a/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx b/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx
index 2e9c33c7742fe..9650fdf89cf59 100644
--- a/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Modal/ModalPage.tsx
@@ -3,9 +3,9 @@ import {
   ComponentPage,
   ExampleCard,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
-import { Link } from 'office-ui-fabric-react/lib/Link';
 import { ModalBasicExample } from './examples/Modal.Basic.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { ModalStatus } from './Modal.checklist';
@@ -13,11 +13,12 @@ import { ModalStatus } from './Modal.checklist';
 const ModalBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx') as string;
 
 export class ModalPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Modal'
         componentName='ModalExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Modal'
         exampleCards={
           <div>
             <ExampleCard title='Modal' code={ ModalBasicExampleCode }>
@@ -33,37 +34,27 @@ export class ModalPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input, or can be used to advertise new app features. In some cases, Modals block interactions with the web page or application until being explicitly dismissed. They are can be used for lightweight creation or edit tasks and simple management tasks, or for hosting heavier temporary content.
-            </p>
-            <p>
-              For usage requiring a quick choice from the user, <Link href='#/components/dialog'>Dialog</Link> may be a more appropriate control.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Modal/docs/ModalOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use Modals for actionable interactions, such as needing the user to provide information or change settings.</li>
-              <li>When possible, try a non-blocking Modal before resorting to a blocking Modal.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Modal/docs/ModalDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don’t overuse Modals. In some cases they can be perceived as interrupting workflow, and too many can be a bad user experience.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Modal/docs/ModalDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ModalStatus}
+            { ...ModalStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDonts.md b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDonts.md
new file mode 100644
index 0000000000000..55106e03d7405
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDonts.md
@@ -0,0 +1 @@
+- Don’t overuse Modals. In some cases they can be perceived as interrupting workflow, and too many can be a bad user experience.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDos.md b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDos.md
new file mode 100644
index 0000000000000..45af682a25833
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalDos.md
@@ -0,0 +1,2 @@
+- Use Modals for actionable interactions, such as needing the user to provide information or change settings.
+- When possible, try a non-blocking Modal before resorting to a blocking Modal.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Modal/docs/ModalOverview.md b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalOverview.md
new file mode 100644
index 0000000000000..c83f71cbf1a21
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Modal/docs/ModalOverview.md
@@ -0,0 +1,3 @@
+Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input, or can be used to advertise new app features. In some cases, Modals block interactions with the web page or application until being explicitly dismissed. They are can be used for lightweight creation or edit tasks and simple management tasks, or for hosting heavier temporary content.
+
+For usage requiring a quick choice from the user, <a href='#/components/dialog'>Dialog</a> may be a more appropriate control.
diff --git a/packages/office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx
index 89520fea9692b..8806ec82f70eb 100644
--- a/packages/office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx
@@ -14,7 +14,7 @@ export class ModalBasicExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
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
index 1501432da5fcc..5edfd2c966d48 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx
@@ -66,7 +66,7 @@ export class NavBase extends BaseComponent<INavProps, INavState> implements INav
     }
   }
 
-  public componentWillReceiveProps(newProps: INavProps) {
+  public componentWillReceiveProps(newProps: INavProps): void {
     const newGroups = newProps.groups || [];
     const isGroupCollapsed = this.state.isGroupCollapsed!;
 
@@ -122,7 +122,7 @@ export class NavBase extends BaseComponent<INavProps, INavState> implements INav
     return (<div className={ classNames.linkText }>{ link.name }</div>);
   }
 
-  private _renderNavLink(link: INavLink, linkIndex: number, nestingLevel: number) {
+  private _renderNavLink(link: INavLink, linkIndex: number, nestingLevel: number): JSX.Element {
     const {
       getStyles,
       groups,
diff --git a/packages/office-ui-fabric-react/src/components/Nav/NavPage.tsx b/packages/office-ui-fabric-react/src/components/Nav/NavPage.tsx
index 92bd70d1a9d99..ee9fa4554740e 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/NavPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/NavPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { NavBasicExample } from './examples/Nav.Basic.Example';
@@ -18,11 +19,12 @@ const NavNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/com
 const NavByKeysExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Nav/examples/Nav.ByKeys.Example.tsx') as string;
 
 export class NavPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Nav'
         componentName='NavExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Nav'
         exampleCards={
           <div>
             <ExampleCard title='Basic Nav bar with sample links' code={ NavBasicExampleCode }>
@@ -47,38 +49,27 @@ export class NavPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              Navs (also called "left nav" or "navigation pane") provide links to the main areas of an app or a site. In larger configurations, the Nav is always on-screen, usually on the left of the view. In smaller configurations, the Nav may collapse into a skinnier version or be completely hidden until the user taps an icon.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Nav/docs/NavOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use Nav for apps with many top-level navigation items that are of similar type. For example, a sports app with categories like Football, Baseball, Basketball, Soccer, and so on.</li>
-              <li>Keep the names of the navigation items brief and clear, rather than trying to be overly specific.</li>
-              <li>Use the word that feels right for the navigation. For example, some items may make better sense as nouns (e.g. “Files”), others as adjectives (“Shared”). Use what makes sense for users, and keep it short! </li>
-              <li>Try to keep your app’s nav in a consistent order across platforms. This sort of consistency increases predictability which drives user confidence, thus retaining and engaging them.</li>
-              <li>UseNav for an app with a medium to high number of top-level views or categories. If your app is very simple, you may prefer a simpler hub-and-spoke layout.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Nav/docs/NavDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Overload your Nav. Too many items in the Nav is indicative of an app that is poorly organized or trying to do too much.</li>
-              <li>Include actions. You may reserve a space for actions, if you keep them well separated from the main Nav and their appearance makes it obvious that tapping them will execute a command instead of navigating.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Nav/docs/NavDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...NavStatus}
+            { ...NavStatus }
           />
         }
       />
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 fbbe421b3f491..b1e5e6fd2fb61 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
@@ -6,7 +6,6 @@ exports[`Nav renders Nav correctly 1`] = `
   aria-labelledby={undefined}
   className="ms-FocusZone"
   data-focuszone-id="FocusZone0"
-  onClick={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/Nav/docs/NavDonts.md b/packages/office-ui-fabric-react/src/components/Nav/docs/NavDonts.md
new file mode 100644
index 0000000000000..11c5e84cb4a8d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Nav/docs/NavDonts.md
@@ -0,0 +1,2 @@
+- Overload your Nav. Too many items in the Nav is indicative of an app that is poorly organized or trying to do too much.
+- Include actions. You may reserve a space for actions, if you keep them well separated from the main Nav and their appearance makes it obvious that tapping them will execute a command instead of navigating.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Nav/docs/NavDos.md b/packages/office-ui-fabric-react/src/components/Nav/docs/NavDos.md
new file mode 100644
index 0000000000000..f78fdfc189c63
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Nav/docs/NavDos.md
@@ -0,0 +1,5 @@
+- Use Nav for apps with many top-level navigation items that are of similar type. For example, a sports app with categories like Football, Baseball, Basketball, Soccer, and so on.
+- Keep the names of the navigation items brief and clear, rather than trying to be overly specific.
+- Use the word that feels right for the navigation. For example, some items may make better sense as nouns (e.g. “Files”), others as adjectives (“Shared”). Use what makes sense for users, and keep it short!
+- Try to keep your app’s nav in a consistent order across platforms. This sort of consistency increases predictability which drives user confidence, thus retaining and engaging them.
+- UseNav for an app with a medium to high number of top-level views or categories. If your app is very simple, you may prefer a simpler hub-and-spoke layout.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Nav/docs/NavOverview.md b/packages/office-ui-fabric-react/src/components/Nav/docs/NavOverview.md
new file mode 100644
index 0000000000000..ff696fb9a2018
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Nav/docs/NavOverview.md
@@ -0,0 +1 @@
+Navs (also called "left nav" or "navigation pane") provide links to the main areas of an app or a site. In larger configurations, the Nav is always on-screen, usually on the left of the view. In smaller configurations, the Nav may collapse into a skinnier version or be completely hidden until the user taps an icon.
\ No newline at end of file
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 2815526478277..19afa0f9554f2 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
@@ -8,15 +8,14 @@ export class NavBasicExample extends React.Component<any, any> {
     this._onClickHandler = this._onClickHandler.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-NavExample-LeftPane'>
         <Nav
           groups={
             [
               {
-                links:
-                [
+                links: [
                   {
                     name: 'Home',
                     url: 'http://example.com',
@@ -62,12 +61,12 @@ export class NavBasicExample extends React.Component<any, any> {
     );
   }
 
-  private _onClickHandler(e: React.MouseEvent<HTMLElement>) {
+  private _onClickHandler(e: React.MouseEvent<HTMLElement>): false {
     alert('test');
     return false;
   }
 
-  private _onClickHandler2(e: React.MouseEvent<HTMLElement>) {
+  private _onClickHandler2(e: React.MouseEvent<HTMLElement>): false {
     return false;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.ByKeys.Example.tsx b/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.ByKeys.Example.tsx
index ef575a17e1182..7d570bfad55e0 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.ByKeys.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.ByKeys.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Nav } from 'office-ui-fabric-react/lib/Nav';
 
 export class NavByKeysExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <Nav
         groups={ [{
diff --git a/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.FabricDemoApp.Example.tsx b/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.FabricDemoApp.Example.tsx
index 1990227e0adc2..f950494934721 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.FabricDemoApp.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.FabricDemoApp.Example.tsx
@@ -4,7 +4,7 @@ import { AppDefinition } from '../../../demo/AppDefinition';
 import { Nav } from 'office-ui-fabric-react/lib/Nav';
 
 export class NavFabricDemoAppExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <Nav
         groups={ AppDefinition.examplePages }
@@ -13,7 +13,7 @@ export class NavFabricDemoAppExample extends React.Component<any, any> {
     );
   }
 
-  private _onRenderLink(link: any): (JSX.Element | null) {
+  private _onRenderLink = (link: any): JSX.Element | null => {
     return (
       <span>
         <span key={ 1 } className='Nav-linkText'>{ link.name }</span>
@@ -23,5 +23,4 @@ export class NavFabricDemoAppExample extends React.Component<any, any> {
       </span>
     );
   }
-
 }
diff --git a/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.Nested.Example.tsx b/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.Nested.Example.tsx
index 08bf29c79d3b7..b961f7efb369c 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.Nested.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.Nested.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Nav } from 'office-ui-fabric-react/lib/Nav';
 
 export class NavNestedExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <Nav
         groups={ [{
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 ea1d653ad93d8..a8167f57d85e0 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
@@ -6,7 +6,6 @@ import {
   getNativeProps,
   divProperties,
   focusFirstChild,
-  getFirstFocusable,
   elementContains
 } from '../../Utilities';
 import { mergeStyles } from '../../Styling';
@@ -31,7 +30,7 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       items,
       overflowItems,
@@ -87,11 +86,11 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
     let focusSucceeded = false;
 
     if (this.props.doNotContainWithinFocusZone) {
-      if (this._divContainer.value) {
-        focusSucceeded = focusFirstChild(this._divContainer.value);
+      if (this._divContainer.current) {
+        focusSucceeded = focusFirstChild(this._divContainer.current);
       }
-    } else if (this._focusZone.value) {
-      focusSucceeded = this._focusZone.value.focus(forceIntoFirstElement);
+    } else if (this._focusZone.current) {
+      focusSucceeded = this._focusZone.current.focus(forceIntoFirstElement);
     }
 
     return focusSucceeded;
@@ -110,12 +109,12 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
     }
 
     if (this.props.doNotContainWithinFocusZone) {
-      if (this._divContainer.value && elementContains(this._divContainer.value, childElement)) {
+      if (this._divContainer.current && elementContains(this._divContainer.current, childElement)) {
         childElement.focus();
         focusSucceeded = document.activeElement === childElement;
       }
-    } else if (this._focusZone.value) {
-      focusSucceeded = this._focusZone.value.focusElement(childElement);
+    } else if (this._focusZone.current) {
+      focusSucceeded = this._focusZone.current.focusElement(childElement);
     }
 
     return focusSucceeded;
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSetPage.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSetPage.tsx
index c003673055fb1..d8a3e0e83da17 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSetPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSetPage.tsx
@@ -4,6 +4,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { OverflowSetCustomExample } from './examples/OverflowSet.Custom.Example';
@@ -17,18 +18,16 @@ const OverflowSetBasicExampleCode = require('!raw-loader!office-ui-fabric-react/
 const OverflowSetVerticalExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx') as string;
 
 export class OverflowSetPage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='OverflowSet'
         componentName='OverflowSetExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/OverflowSet'
         overview={
-          <div>
-            <p>
-              The OverflowSet is a flexible container component that is useful for displaying a primary set of content with additional content in an overflow callout.
-              Note that the example below is only an example of how to render the component, not a specific use case.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/OverflowSet/docs/OverflowSetOverview.md') }
+          </PageMarkdown>
         }
         exampleCards={
           <LayerHost>
@@ -52,7 +51,7 @@ export class OverflowSetPage extends React.Component<IComponentDemoPageProps, an
         }
         componentStatus={
           <ComponentStatus
-            {...OverflowSetStatus}
+            { ...OverflowSetStatus }
           />
         }
         isHeaderVisible={ this.props.isHeaderVisible }
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/docs/OverflowSetOverview.md b/packages/office-ui-fabric-react/src/components/OverflowSet/docs/OverflowSetOverview.md
new file mode 100644
index 0000000000000..e1c3374a3e46b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/docs/OverflowSetOverview.md
@@ -0,0 +1 @@
+The OverflowSet is a flexible container component that is useful for displaying a primary set of content with additional content in an overflow callout. Note that the example below is only an example of how to render the component, not a specific use case.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Basic.Example.tsx
index 0e6fdeacb756f..2a6cfc49372ab 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Basic.Example.tsx
@@ -1,6 +1,4 @@
-/* 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 { Link } from 'office-ui-fabric-react/lib/Link';
@@ -14,7 +12,7 @@ const styles: any = stylesImport;
 
 export class OverflowSetBasicExample extends BaseComponent<any, any> {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <OverflowSet
         items={ [
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 470d5d9501620..721cf36584ed0 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
@@ -1,6 +1,4 @@
-/* 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 { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
@@ -14,7 +12,7 @@ const styles: any = stylesImport;
 
 export class OverflowSetCustomExample extends BaseComponent<any, any> {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <OverflowSet
         items={ [
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 a8d6b8571bf4e..9995e3b259d9a 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,6 +1,4 @@
-/* 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 { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
@@ -14,7 +12,7 @@ import * as stylesImport from './OverflowSet.Example.scss';
 
 export class OverflowSetVerticalExample extends BaseComponent<any, any> {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <OverflowSet
         vertical
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
index baa25fc6f8f53..0b5e62c45b530 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.base.tsx
@@ -19,15 +19,15 @@ const getClassNames = classNamesFunction<IOverlayStyleProps, IOverlayStyles>();
 @customizable('Overlay', ['theme'])
 export class OverlayBase extends BaseComponent<IOverlayProps, {}> {
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     disableBodyScroll();
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     enableBodyScroll();
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       isDarkThemed: isDark,
       className,
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 56b3d0c1ffaf6..8569317e569c0 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { OverlayDarkExample } from './examples/Overlay.Dark.Example';
@@ -14,11 +15,12 @@ const OverlayLightExampleCode = require('!raw-loader!office-ui-fabric-react/src/
 const OverlayDarkExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx') as string;
 
 export class OverlayPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Overlay'
         componentName='OverlayExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Overlay'
         exampleCards={
           <div>
             <ExampleCard title='Light' code={ OverlayLightExampleCode }>
@@ -38,29 +40,22 @@ export class OverlayPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              Overlays are used to render a semi-transparent layer on top of existing UI. Overlays help focus the user on the content that sits above the added layer and are often used to help designate a modal or blocking experience. Overlays can be seen used in conjunction with Panels and Dialogs.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Overlay/docs/OverlayOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use a dark Overlay with a first-run experience.</li>
-              <li>Use a white Overlay for dialogs and panels.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Overlay/docs/OverlayDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Use an Overlay when you want the user to interact with the UI that is being covered.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Overlay/docs/OverlayDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDonts.md b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDonts.md
new file mode 100644
index 0000000000000..ea35603f5308a
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDonts.md
@@ -0,0 +1 @@
+- Use an Overlay when you want the user to interact with the UI that is being covered.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDos.md b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDos.md
new file mode 100644
index 0000000000000..aa2ae083c7b7e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayDos.md
@@ -0,0 +1,2 @@
+- Use a dark Overlay with a first-run experience.
+- Use a white Overlay for dialogs and panels.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayOverview.md b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayOverview.md
new file mode 100644
index 0000000000000..c20c1418e663a
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Overlay/docs/OverlayOverview.md
@@ -0,0 +1 @@
+Overlays are used to render a semi-transparent layer on top of existing UI. Overlays help focus the user on the content that sits above the added layer and are often used to help designate a modal or blocking experience. Overlays can be seen used in conjunction with Panels and Dialogs.
\ No newline at end of file
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 cba3b6f29748b..072d33413af5d 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
@@ -22,7 +22,7 @@ export class OverlayDarkExample extends React.Component<{}, {
     this.state = { isOverlayVisible: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isOverlayVisible } = this.state;
     const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>();
     const classNames = getClassNames(getStyles);
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 f44d9952d98f1..ad4310de7e077 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
@@ -22,7 +22,7 @@ export class OverlayLightExample extends React.Component<{}, {
     this.state = { isOverlayVisible: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isOverlayVisible } = this.state;
     const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>();
     const classNames = getClassNames(getStyles);
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 342b065e1f397..1ed46a5d3c04e 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import * as ReactDOM from 'react-dom';
 
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 90cb2aa87a666..08ee0f55276c0 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
@@ -1,11 +1,11 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import {
   BaseComponent,
   css,
+  divProperties,
   getId,
+  getNativeProps,
   getRTL,
   createRef
 } from '../../Utilities';
@@ -56,7 +56,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     };
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._events.on(window, 'resize', this._updateFooterPosition);
 
     if (this.props.isOpen) {
@@ -64,7 +64,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     }
   }
 
-  public componentWillReceiveProps(newProps: IPanelProps) {
+  public componentWillReceiveProps(newProps: IPanelProps): void {
     if (newProps.isOpen !== this.state.isOpen) {
       if (newProps.isOpen) {
         this.open();
@@ -74,7 +74,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     }
   }
 
-  public render() {
+  public render(): JSX.Element | null {
     const {
       className = '',
       elementToFocusOnDismiss,
@@ -102,6 +102,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     const isOnRightSide = isRTL ? isLeft : !isLeft;
     const headerTextId = headerText && id + '-headerText';
     const customWidthStyles = (type === PanelType.custom) ? { width: customWidth } : {};
+    const nativeProps = getNativeProps(this.props, divProperties);
 
     if (!isOpen && !isAnimating && !isHiddenOnDismiss) {
       return null;
@@ -137,6 +138,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
           }
         >
           <div
+            { ...nativeProps }
             className={
               css(
                 'ms-Panel',
@@ -175,9 +177,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
                 ) }
               style={ customWidthStyles }
               elementToFocusOnDismiss={ elementToFocusOnDismiss }
-              isClickableOutsideFocusTrap={
-                isLightDismiss || isHiddenOnDismiss || (focusTrapZoneProps && focusTrapZoneProps.isClickableOutsideFocusTrap)
-              }
+              isClickableOutsideFocusTrap={ focusTrapZoneProps && !focusTrapZoneProps.isClickableOutsideFocusTrap ? false : true }
             >
               <div className={ css('ms-Panel-commands') } data-is-visible={ true } >
                 { onRenderNavigation(this.props, this._onRenderNavigation) }
@@ -288,7 +288,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
     );
 
     return (
-      <div ref={ this._content } className={ contentClass } >
+      <div ref={ this._content } className={ contentClass } data-is-scrollable={ true } >
         { props.children }
       </div>
     );
@@ -310,7 +310,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
   }
 
   private _updateFooterPosition(): void {
-    const _content = this._content.value;
+    const _content = this._content.current;
     if (_content) {
       const height = _content.clientHeight;
       const innerHeight = _content.scrollHeight;
diff --git a/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx b/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx
index 11921546e8e4d..3b2921bd5a578 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/PanelPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { PanelSmallRightExample } from './examples/Panel.SmallRight.Example';
@@ -18,7 +19,6 @@ import { PanelLightDismissExample } from './examples/Panel.LightDismiss.Example'
 import { PanelLightDismissCustomExample } from './examples/Panel.LightDismissCustom.Example';
 import { PanelNonModalExample } from './examples/Panel.NonModal.Example';
 import { PanelFooterExample } from './examples/Panel.Footer.Example';
-import { FontClassNames } from '../../Styling';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { PanelStatus } from './Panel.checklist';
 
@@ -37,11 +37,13 @@ const PanelNonModalExampleCode = require('!raw-loader!office-ui-fabric-react/src
 const PanelFooterExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Panel/examples/Panel.Footer.Example.tsx') as string;
 
 export class PanelPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Panel'
         componentName='PanelExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Panel'
+        allowNativeProps={ true }
         exampleCards={
           <div>
             <ExampleCard title='Panel - Small Panel, Anchored Right, Fixed Width' code={ PanelSmallRightExampleCode }>
@@ -93,45 +95,27 @@ export class PanelPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              Panels are modal UI overlays that provide contextual app information. They often request some kind of creation or management action from the user. Panels are paired with the Overlay component, also known as a Light Dismiss. The Overlay blocks interactions with the app view until dismissed either through clicking or tapping on the Overlay or by selecting a close or completion action within the Panel.
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>Examples of experiences that use Panels</h2>
-
-            <ul>
-              <li>Member or group list creation or management</li>
-              <li>Document list creation or management</li>
-              <li>Permissions creation or management</li>
-              <li>Settings creation or management</li>
-              <li>Multi-field forms</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Panel/docs/PanelOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use for self-contained experiences where the user does not need to interact with the app view to complete the task. </li>
-              <li>Use for complex creation, edit or management experiences.</li>
-              <li>Consider how the panel and its contained contents will scale across Fabric’s responsive web breakpoints.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Panel/docs/PanelDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Use for experiences where the user needs to interact with the app view.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Panel/docs/PanelDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...PanelStatus}
+            { ...PanelStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDonts.md b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDonts.md
new file mode 100644
index 0000000000000..ff26f72a43a52
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDonts.md
@@ -0,0 +1 @@
+- Use for experiences where the user needs to interact with the app view.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDos.md b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDos.md
new file mode 100644
index 0000000000000..5772bada9a91d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelDos.md
@@ -0,0 +1,3 @@
+- Use for self-contained experiences where the user does not need to interact with the app view to complete the task.
+- Use for complex creation, edit or management experiences.
+- Consider how the panel and its contained contents will scale across Fabric’s responsive web breakpoints.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Panel/docs/PanelOverview.md b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelOverview.md
new file mode 100644
index 0000000000000..b658e5f59ec84
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Panel/docs/PanelOverview.md
@@ -0,0 +1,9 @@
+Panels are modal UI overlays that provide contextual app information. They often request some kind of creation or management action from the user. Panels are paired with the Overlay component, also known as a Light Dismiss. The Overlay blocks interactions with the app view until dismissed either through clicking or tapping on the Overlay or by selecting a close or completion action within the Panel.
+
+## Examples of experiences that use Panels
+
+- Member or group list creation or management
+- Document list creation or management
+- Permissions creation or management
+- Settings creation or management
+- Multi-field forms
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx
index 8a71586012434..f81b117564ec3 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Custom.Example.tsx
@@ -13,7 +13,7 @@ export class PanelCustomExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
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 9269f6e81f9c1..56f6b13cbd043 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
@@ -11,7 +11,7 @@ export class PanelExtraLargeExample extends React.Component<{}, {
     this.state = { showPanel: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Footer.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Footer.Example.tsx
index ebae074445ab2..6a055c4f3cba6 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Footer.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Footer.Example.tsx
@@ -11,7 +11,7 @@ export class PanelFooterExample extends React.Component<{}, {
     this.state = { showPanel: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.HiddenOnDismiss.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.HiddenOnDismiss.Example.tsx
index e9f81fc3b292c..380dbb0fbbd8a 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.HiddenOnDismiss.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.HiddenOnDismiss.Example.tsx
@@ -12,7 +12,7 @@ export class PanelHiddenOnDismissExample extends React.Component<{}, {
     this.state = { showPanel: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
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 8f1b57da41804..4fd8e436d6d0d 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
@@ -11,7 +11,7 @@ export class PanelLargeExample extends React.Component<{}, {
     this.state = { showPanel: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx
index afa1b898d6f7f..25ce479dcef15 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LargeFixed.Example.tsx
@@ -13,7 +13,7 @@ export class PanelLargeFixedExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx
index 2c23cb51c7162..1a95503f54fb4 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismiss.Example.tsx
@@ -12,7 +12,7 @@ export class PanelLightDismissExample extends React.Component<{}, {
     this.state = { showPanel: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismissCustom.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismissCustom.Example.tsx
index 0ecb89095af43..ea8b4aeda8c96 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismissCustom.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.LightDismissCustom.Example.tsx
@@ -14,7 +14,7 @@ export class PanelLightDismissCustomExample extends React.Component<{}, {
     this.state = { showPanel: false, hideDialog: true };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx
index 68c5573a2ca41..f24e59ef2ace2 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Medium.Example.tsx
@@ -11,7 +11,7 @@ export class PanelMediumExample extends React.Component<{}, {
     this.state = { showPanel: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx
index 23fa0bec46f29..481527a87312a 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.NonModal.Example.tsx
@@ -11,7 +11,7 @@ export class PanelNonModalExample extends React.Component<{}, {
     this.state = { showPanel: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallFluid.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallFluid.Example.tsx
index 34559332f4394..5ee7c48bc003a 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallFluid.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallFluid.Example.tsx
@@ -11,7 +11,7 @@ export class PanelSmallFluidExample extends React.Component<{}, {
     this.state = { showPanel: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallLeft.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallLeft.Example.tsx
index 078c52927564b..698d477fb0ee5 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallLeft.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallLeft.Example.tsx
@@ -11,7 +11,7 @@ export class PanelSmallLeftExample extends React.Component<{}, {
     this.state = { showPanel: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx
index c51e9dbacd31e..554b785647ada 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.SmallRight.Example.tsx
@@ -14,7 +14,7 @@ export class PanelSmallRightExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton
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
index b723aa4a152ac..2f7b99c2ea72b 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx
@@ -8,7 +8,7 @@ import {
   IRenderFunction,
 } from '../../Utilities';
 import { TooltipHost, TooltipOverflowMode, DirectionalHint } from '../../Tooltip';
-import { PersonaCoin } from './PersonaCoin';
+import { PersonaCoin } from './PersonaCoin/PersonaCoin';
 import {
   IPersonaProps,
   IPersonaSharedProps,
@@ -37,7 +37,7 @@ export class PersonaBase extends BaseComponent<IPersonaProps, {}> {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       hidePersonaDetails,
       onRenderOptionalText,
@@ -62,6 +62,7 @@ export class PersonaBase extends BaseComponent<IPersonaProps, {}> {
       initialsColor,
       onPhotoLoadingStateChange,
       onRenderCoin,
+      onRenderInitials,
       presence,
       primaryText,
       showSecondaryText,
@@ -80,6 +81,7 @@ export class PersonaBase extends BaseComponent<IPersonaProps, {}> {
       initialsColor,
       onPhotoLoadingStateChange,
       onRenderCoin,
+      onRenderInitials,
       presence,
       primaryText,
       size,
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 c9baa333da78e..6d6de2f2bc90d 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,8 +1,6 @@
 import * as React from 'react';
 import { IRenderFunction } from '../../Utilities';
 import { PersonaBase } from './Persona.base';
-import { PersonaCoinBase } from './PersonaCoin';
-import { PersonaPresenceBase } from './PersonaPresence';
 import { ImageLoadState } from '../../Image';
 import { IStyle, ITheme } from '../../Styling';
 import { IStyleFunction } from '../../Utilities';
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx
index c466e9233e277..c411c653ec473 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx
@@ -9,15 +9,15 @@ import {
   getRTL,
 } from '../../../Utilities';
 import { mergeStyles } from '../../../Styling';
-import { PersonaPresence } from '../PersonaPresence';
+import { PersonaPresence } from '../PersonaPresence/index';
 import {
   Icon
-} from '../../Icon';
+} from '../../../Icon';
 import {
   Image,
   ImageFit,
   ImageLoadState
-} from '../../Image';
+} from '../../../Image';
 import {
   IPersonaCoinProps,
   IPersonaCoinStyleProps,
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx
index 19b2042deccb0..b8c491b922643 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   PersonaPresence,
   PersonaSize,
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 b318f55c8012a..83eb6062817ac 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { PersonaInitialsExample } from './examples/Persona.Initials.Example';
@@ -20,11 +21,12 @@ const PersonaCustomRenderExampleCode = require('!raw-loader!office-ui-fabric-rea
 const PersonaCustomCoinRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx') as string;
 
 export class PersonaPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Persona'
         componentName='PersonaExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Persona'
         exampleCards={
           <div>
             <ExampleCard title='Persona in various sizes' code={ PersonaBasicExampleCode }>
@@ -53,31 +55,22 @@ export class PersonaPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              Personas are used for rendering an individual's avatar and presence. They are used within the PeoplePicker components.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Persona/docs/PersonaOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use Size 24 Persona in text fields in read mode or in experiences such as multi-column list view which need compact Persona representations.</li>
-              <li>Use Size 32 Persona in text fields in edit mode.</li>
-              <li>Use Size 32, Size 40, and Size 48 Personas in menus and list views.</li>
-              <li>Use Size 72 and Size 100 Personas in profile cards and views.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Persona/docs/PersonaDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Change the values of the color swatches in high contrast mode. </li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Persona/docs/PersonaDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx
index 4118f8b14044a..4c7dbe713b3f7 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx
@@ -5,7 +5,7 @@ import {
   customizable,
 } from '../../../Utilities';
 import { IStyleSet } from '../../../Styling';
-import { Icon } from '../../Icon';
+import { Icon } from '../../../Icon';
 import {
   IPersonaPresenceProps,
   IPersonaPresenceStyleProps,
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts
index 1c042712ee459..4322c5dd53f9e 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts
@@ -17,11 +17,7 @@ import {
 export const getStyles = (
   props: IPersonaPresenceStyleProps
 ): IPersonaPresenceStyles => {
-  const {
-    className,
-    theme,
-  } = props;
-
+  const { theme } = props;
   const { semanticColors } = theme;
 
   const size = sizeBoolean(props.size as PersonaSize);
diff --git a/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDonts.md b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDonts.md
new file mode 100644
index 0000000000000..ca3763b7b1e26
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDonts.md
@@ -0,0 +1 @@
+- Change the values of the color swatches in high contrast mode.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDos.md b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDos.md
new file mode 100644
index 0000000000000..d062adb79ed5f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaDos.md
@@ -0,0 +1,4 @@
+- Use Size 24 Persona in text fields in read mode or in experiences such as multi-column list view which need compact Persona representations.
+- Use Size 32 Persona in text fields in edit mode.
+- Use Size 32, Size 40, and Size 48 Personas in menus and list views.
+- Use Size 72 and Size 100 Personas in profile cards and views.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaOverview.md b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaOverview.md
new file mode 100644
index 0000000000000..10ba58c6958d5
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Persona/docs/PersonaOverview.md
@@ -0,0 +1 @@
+Personas are used for rendering an individual's avatar and presence. They are used within the PeoplePicker components.
\ No newline at end of file
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 ad08d5d1851fc..b2fe15f2fd535 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
@@ -27,7 +27,7 @@ export class PersonaAlternateExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { renderPersonaDetails } = this.state;
 
     return (
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 b7cdd24779170..bec1d243e181b 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
@@ -30,7 +30,7 @@ export class PersonaBasicExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { renderPersonaDetails } = this.state;
 
     return (
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 9aaf14c66b3ed..16d2acf42edd9 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
@@ -20,7 +20,7 @@ const examplePersona = {
 
 export class PersonaCustomCoinRenderExample extends React.Component {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-PersonaExample'>
         <div className={ exampleStyles.exampleLabel }>Custom functional element in place of persona coin's image</div>
diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx
index dacf8cc58ee08..11651e807cfd6 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx
@@ -22,7 +22,7 @@ const examplePersona = {
 
 export class PersonaCustomRenderExample extends React.Component {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-PersonaExample'>
         <div className={ exampleStyles.exampleLabel }>Custom icon in secondary text</div>
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 58f851002fd71..aaa122aec6398 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
@@ -18,7 +18,7 @@ const personaWithInitials = {
 };
 
 export class PersonaInitialsExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-PersonaExample'>
         <Persona
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 c10c0f10b7b51..174942d4a4cd7 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/index.ts
@@ -1,5 +1,5 @@
 export * from './Persona';
 export * from './Persona.base';
 export * from './Persona.types';
-export * from './PersonaCoin';
+export * from './PersonaCoin/index';
 export * from './PersonaConsts';
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 e96dcae184dac..aa686955bf417 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
@@ -3,7 +3,8 @@ import {
   BaseComponent,
   KeyCodes,
   css,
-  getId
+  getId,
+  createRef
 } from '../../Utilities';
 import { CommandButton } from '../../Button';
 import { IPivotProps } from './Pivot.types';
@@ -42,6 +43,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
   private _keyToIndexMapping: { [key: string]: number };
   private _keyToTabIds: { [key: string]: string };
   private _pivotId: string;
+  private focusZone = createRef<FocusZone>();
 
   constructor(props: IPivotProps) {
     super(props);
@@ -68,7 +70,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
     this._renderPivotLink = this._renderPivotLink.bind(this);
   }
 
-  public componentWillReceiveProps(nextProps: IPivotProps) {
+  public componentWillReceiveProps(nextProps: IPivotProps): void {
     const links: IPivotItemProps[] = this._getPivotLinks(nextProps);
 
     this.setState((prevState, props) => {
@@ -89,7 +91,16 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
     });
   }
 
-  public render() {
+  /**
+   * Sets focus to the first pivot tab.
+   */
+  public focus(): void {
+    if (this.focusZone.current) {
+      this.focusZone.current.focus();
+    }
+  }
+
+  public render(): JSX.Element {
     return (
       <div>
         { this._renderPivotLinks() }
@@ -101,9 +112,9 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
   /**
    * Renders the set of links to route between pivots
    */
-  private _renderPivotLinks() {
+  private _renderPivotLinks(): JSX.Element {
     return (
-      <FocusZone direction={ FocusZoneDirection.horizontal }>
+      <FocusZone componentRef={ this.focusZone } direction={ FocusZoneDirection.horizontal }>
         <ul
           className={ css('ms-Pivot', styles.root,
             { ['ms-Pivot--large ' + styles.rootIsLarge]: this.props.linkSize === PivotLinkSize.large },
@@ -117,7 +128,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
   }
 
   private _renderPivotLink = (link: IPivotItemProps): JSX.Element => {
-    const { itemKey } = link;
+    const { itemKey, headerButtonProps } = link;
     const tabId = this._keyToTabIds[itemKey as string];
     const { onRenderItemLink } = link;
     let linkContent: JSX.Element | null;
@@ -130,6 +141,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
 
     return (
       <CommandButton
+        { ...headerButtonProps }
         id={ tabId }
         key={ itemKey }
         className={ css(
@@ -144,7 +156,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
         ariaLabel={ link.ariaLabel }
         role='tab'
         aria-selected={ this.state.selectedKey === itemKey }
-        name={ link.linkText }
+        name={ link.headerText }
       >
         { linkContent }
       </CommandButton>
@@ -152,7 +164,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
   }
 
   private _renderLinkContent = (link: IPivotItemProps): JSX.Element => {
-    const { itemCount, itemIcon, linkText } = link;
+    const { itemCount, itemIcon, headerText } = link;
 
     return (
       <span className={ css('ms-Pivot-link-content') }>
@@ -161,7 +173,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
             <Icon iconName={ itemIcon } />
           </span>
         ) }
-        { linkText !== undefined && <span className={ css('ms-Pivot-text', styles.text) }> { link.linkText }</span> }
+        { headerText !== undefined && <span className={ css('ms-Pivot-text', styles.text) }> { link.headerText }</span> }
         { itemCount !== undefined && <span className={ css('ms-Pivot-count', styles.count) } > ({ itemCount })</span> }
       </span>
     );
@@ -170,7 +182,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
   /**
    * Renders the current Pivot Item
    */
-  private _renderPivotItem() {
+  private _renderPivotItem(): JSX.Element | null {
     if (this.props.headersOnly) {
       return null;
     }
@@ -204,7 +216,8 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
         const itemKey = pivotItem.props.itemKey || index.toString();
 
         links.push({
-          linkText: pivotItem.props.linkText,
+          headerText: pivotItem.props.headerText || pivotItem.props.linkText,
+          headerButtonProps: pivotItem.props.headerButtonProps,
           ariaLabel: pivotItem.props.ariaLabel,
           itemKey: itemKey,
           itemCount: pivotItem.props.itemCount,
@@ -233,14 +246,14 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
   /**
    * whether the key exists in the pivot items.
    */
-  private _isKeyValid(itemKey: string | undefined) {
+  private _isKeyValid(itemKey: string | undefined): boolean {
     return itemKey !== undefined && this._keyToIndexMapping[itemKey] !== undefined;
   }
 
   /**
    * Handles the onClick event on PivotLinks
    */
-  private _onLinkClick(itemKey: string, ev: React.MouseEvent<HTMLElement>) {
+  private _onLinkClick(itemKey: string, ev: React.MouseEvent<HTMLElement>): void {
     ev.preventDefault();
     this._updateSelectedItem(itemKey, ev);
   }
@@ -248,7 +261,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
   /**
    * Handle the onKeyPress eventon the PivotLinks
    */
-  private _onKeyPress(itemKey: string, ev: React.KeyboardEvent<HTMLElement>) {
+  private _onKeyPress(itemKey: string, ev: React.KeyboardEvent<HTMLElement>): void {
     ev.preventDefault();
     if (ev.which === KeyCodes.enter) {
       this._updateSelectedItem(itemKey);
@@ -258,7 +271,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
   /**
    * Updates the state with the new selected index
    */
-  private _updateSelectedItem(itemKey: string, ev?: React.MouseEvent<HTMLElement>) {
+  private _updateSelectedItem(itemKey: string, ev?: React.MouseEvent<HTMLElement>): void {
     this.setState({
       selectedKey: itemKey,
       selectedTabId: this._keyToTabIds[itemKey]
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.types.ts b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.types.ts
index 372f5d52085b9..594dabd61284c 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.types.ts
@@ -4,7 +4,10 @@ import { Pivot } from './Pivot';
 import { PivotItem } from './PivotItem';
 
 export interface IPivot {
-
+  /**
+   * Sets focus to the first pivot tab.
+   */
+  focus(): void;
 }
 
 export interface IPivotProps extends React.Props<Pivot> {
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.tsx b/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.tsx
index ed5c5ea8a10f4..bba693d1e17e8 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.tsx
@@ -8,7 +8,7 @@ import { IPivotItemProps } from './PivotItem.types';
 
 export class PivotItem extends BaseComponent<IPivotItemProps, {}> {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div
         { ...getNativeProps(this.props, divProperties) }
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts b/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts
index 616ca5f694a8f..8eabb6604e170 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts
@@ -8,10 +8,21 @@ export interface IPivotItemProps extends React.HTMLAttributes<HTMLDivElement> {
   componentRef?: () => void;
 
   /**
-   * The text displayed of each pivot link.
+   * The text displayed of each pivot link - renaming to 'headerText'.
+   * @deprecated
    */
   linkText?: string;
 
+  /**
+   * The text displayed of each pivot link.
+   */
+  headerText?: string;
+
+  /**
+   * Props for the header command button supporting native props - data-* and aria-* - for each pivot header/link element
+   */
+  headerButtonProps?: { [key: string]: string | number | boolean };
+
   /**
    * An required key to uniquely identify a pivot item.
    *
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 37c8c6a06ad37..73e92bcc0c26b 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { PivotBasicExample } from './examples/Pivot.Basic.Example';
@@ -30,11 +31,12 @@ const PivotOverrideExampleCode = require('!raw-loader!office-ui-fabric-react/src
 const PivotSeparateExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx') as string;
 
 export class PivotPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Pivot'
         componentName='PivotExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Pivot'
         exampleCards={
           <div>
             <ExampleCard title='Default Pivot' code={ PivotBasicExampleCode }>
@@ -79,43 +81,22 @@ export class PivotPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.
-            </p>
-
-            <ul>
-              <li>Tapping on a pivot item header navigates to that header's section content.</li>
-              <li>Swiping left or right on a pivot item header navigates to the adjacent section.</li>
-              <li>Swiping left or right on section content navigates to the adjacent section. </li>
-              <li>Pivots are stationary when all pivot headers fit within the allowed space.</li>
-              <li>Pivots carousel when all pivot headers don't fit within the allowed space.</li>
-            </ul>
-
-            <p>
-              Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Pivot/docs/PivotOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use on content-heavy pages that require a significant amount of scrolling to access the various sections.</li>
-              <li>Be concise on the navigation labels, ideally one or two words rather than a phrase.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Pivot/docs/PivotDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don’t use on pages which doesn’t scroll.</li>
-              <li>Don’t use the Pivot to link to a new page.</li>
-              <li>Don’t use the Pivot to link to hidden content.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Pivot/docs/PivotDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
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 3b4aa053821ef..225f07e583fc7 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
@@ -7,7 +7,6 @@ exports[`Pivot renders Pivot correctly 1`] = `
     aria-labelledby={undefined}
     className="ms-FocusZone"
     data-focuszone-id="FocusZone1"
-    onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDonts.md b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDonts.md
new file mode 100644
index 0000000000000..6915a809d8159
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDonts.md
@@ -0,0 +1,3 @@
+- Don’t use on pages which doesn’t scroll.
+- Don’t use the Pivot to link to a new page.
+- Don’t use the Pivot to link to hidden content.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDos.md b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDos.md
new file mode 100644
index 0000000000000..759f4498948c6
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotDos.md
@@ -0,0 +1,2 @@
+- Use on content-heavy pages that require a significant amount of scrolling to access the various sections.
+- Be concise on the navigation labels, ideally one or two words rather than a phrase.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotOverview.md b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotOverview.md
new file mode 100644
index 0000000000000..71d82f61121f2
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Pivot/docs/PivotOverview.md
@@ -0,0 +1,9 @@
+The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.
+
+- Tapping on a pivot item header navigates to that header's section content.
+- Swiping left or right on a pivot item header navigates to the adjacent section.
+- Swiping left or right on section content navigates to the adjacent section.
+- Pivots are stationary when all pivot headers fit within the allowed space.
+- Pivots carousel when all pivot headers don't fit within the allowed space.
+
+Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content.
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx
index 4b1efa1d9964a..dfb8328f59234 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx
@@ -5,11 +5,18 @@ import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
 const exampleStyles: any = exampleStylesImport;
 
 export class PivotBasicExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Pivot>
-          <PivotItem linkText='My Files'>
+          <PivotItem
+            headerText='My Files'
+            linkText='I am deprecated. "headerText" overwrites me'
+            headerButtonProps={ {
+              'data-order': 1,
+              'data-title': 'My Files Title'
+            } }
+          >
             <Label className={ exampleStyles.exampleLabel }>Pivot #1</Label>
           </PivotItem>
           <PivotItem linkText='Recent'>
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Fabric.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Fabric.Example.tsx
index 2cfb209adb489..98b848cadff90 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Fabric.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Fabric.Example.tsx
@@ -12,7 +12,7 @@ import { SpinnerBasicExample } from '../../Spinner/examples/Spinner.Basic.Exampl
 import { PersonaBasicExample } from '../../Persona/examples/Persona.Basic.Example';
 
 export class PivotFabricExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Pivot linkFormat={ PivotLinkFormat.links } linkSize={ PivotLinkSize.normal }>
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.IconCount.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.IconCount.Example.tsx
index bd8be4a772a45..d816af332de77 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.IconCount.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.IconCount.Example.tsx
@@ -8,7 +8,7 @@ import {
 } from 'office-ui-fabric-react/lib/Pivot';
 
 export class PivotIconCountExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Pivot>
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Large.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Large.Example.tsx
index bb7e624ad3290..bd3a043e9de49 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Large.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Large.Example.tsx
@@ -7,7 +7,7 @@ import {
 } from 'office-ui-fabric-react/lib/Pivot';
 
 export class PivotLargeExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Pivot linkSize={ PivotLinkSize.large }>
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.OnChange.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.OnChange.Example.tsx
index 703c04d967d07..5c9a6c9eef00f 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.OnChange.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.OnChange.Example.tsx
@@ -8,7 +8,7 @@ import {
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class PivotOnChangeExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Pivot linkSize={ PivotLinkSize.large } linkFormat={ PivotLinkFormat.tabs } onLinkClick={ this.onLinkClick }>
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Override.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Override.Example.tsx
index 4ca343dbc228e..ddc0df5f76c2d 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Override.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Override.Example.tsx
@@ -17,7 +17,7 @@ export class PivotOverrideExample extends React.Component<any, any> {
     this._handleClick = this._handleClick.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Pivot selectedKey={ `${this.state.selectedKey}` }>
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Remove.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Remove.Example.tsx
index c00203e74239c..58efcb12f2d89 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Remove.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Remove.Example.tsx
@@ -26,7 +26,7 @@ export class PivotRemoveExample extends React.Component<any, IPivotOnChangeExamp
 
     this._handleClick = this._handleClick.bind(this);
   }
-  public render() {
+  public render(): JSX.Element {
     let pivotArray: React.ReactElement<IPivotItemProps>[] = [];
 
     if (this.state.shouldShowFirstPivotItem) {
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx
index 7a8bdbf4b0c1f..bc2255d70bb38 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Separate.Example.tsx
@@ -4,7 +4,7 @@ import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
 export class PivotSeparateExample extends React.Component<any, any> {
   public state = { selectedKey: 'rectangleRed' };
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <div
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Tabs.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Tabs.Example.tsx
index ca110537dcef5..c860644c79e32 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Tabs.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.Tabs.Example.tsx
@@ -7,7 +7,7 @@ import {
 } from 'office-ui-fabric-react/lib/Pivot';
 
 export class PivotTabsExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Pivot linkFormat={ PivotLinkFormat.tabs }>
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.TabsLarge.Example.tsx b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.TabsLarge.Example.tsx
index 3a756c6d001c3..15396e2d5ef9b 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.TabsLarge.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/examples/Pivot.TabsLarge.Example.tsx
@@ -8,7 +8,7 @@ import {
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class PivotTabsLargeExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Pivot linkFormat={ PivotLinkFormat.tabs } linkSize={ PivotLinkSize.large }>
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 ec8964b5042d4..5c265313fb493 100644
--- a/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx
+++ b/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx
@@ -33,19 +33,19 @@ export class Popup extends BaseComponent<IPopupProps, IPopupState> {
     this.state = { needsVerticalScrollBar: false };
   }
 
-  public componentWillMount() {
+  public componentWillMount(): void {
     this._originalFocusedElement = getDocument()!.activeElement as HTMLElement;
   }
 
   public componentDidMount(): void {
-    if (!this._root.value) {
+    if (!this._root.current) {
       return;
     }
 
-    this._events.on(this._root.value, 'focus', this._onFocus, true);
-    this._events.on(this._root.value, 'blur', this._onBlur, true);
+    this._events.on(this._root.current, 'focus', this._onFocus, true);
+    this._events.on(this._root.current, 'blur', this._onBlur, true);
 
-    if (doesElementContainFocus(this._root.value)) {
+    if (doesElementContainFocus(this._root.current)) {
       this._containsFocus = true;
     }
 
@@ -71,7 +71,7 @@ export class Popup extends BaseComponent<IPopupProps, IPopupState> {
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { role, className, ariaLabel, ariaLabelledBy, ariaDescribedBy, style } = this.props;
 
     return (
@@ -106,17 +106,29 @@ export class Popup extends BaseComponent<IPopupProps, IPopupState> {
     }
   }
 
-  private _updateScrollBarAsync() {
+  private _updateScrollBarAsync(): void {
     this._async.requestAnimationFrame(() => {
       this._getScrollBar();
     });
   }
 
-  private _getScrollBar() {
+  private _getScrollBar(): void {
     let needsVerticalScrollBar = false;
-    if (this._root && this._root.value && this._root.value.firstElementChild) {
-      needsVerticalScrollBar = this._root.value.clientHeight > 0
-          && this._root.value.firstElementChild.clientHeight > this._root.value.clientHeight;
+    if (this._root && this._root.current && this._root.current.firstElementChild) {
+      // ClientHeight returns the client height of an element rounded to an
+      // integer. On some browsers at different zoom levels this rounding
+      // can generate different results for the root container and child even
+      // though they are the same height. This causes us to show a scroll bar
+      // when not needed. Ideally we would use BoundingClientRect().height
+      // instead however seems that the API is 90% slower than using ClientHeight.
+      // Therefore instead we will calculate the difference between heights and
+      // allow for a 1px difference to still be considered ok and not show the
+      // scroll bar.
+      const rootHeight = this._root.current.clientHeight;
+      const firstChildHeight = this._root.current.firstElementChild.clientHeight;
+      if (rootHeight > 0 && firstChildHeight > rootHeight) {
+        needsVerticalScrollBar = (firstChildHeight - rootHeight) > 1;
+      }
     }
     if (this.state.needsVerticalScrollBar !== needsVerticalScrollBar) {
       this.setState({
@@ -125,11 +137,11 @@ export class Popup extends BaseComponent<IPopupProps, IPopupState> {
     }
   }
 
-  private _onFocus() {
+  private _onFocus(): void {
     this._containsFocus = true;
   }
 
-  private _onBlur() {
+  private _onBlur(): void {
     this._containsFocus = false;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Popup/Popup.types.ts b/packages/office-ui-fabric-react/src/components/Popup/Popup.types.ts
index d49339eb57e6a..b00993fa7f612 100644
--- a/packages/office-ui-fabric-react/src/components/Popup/Popup.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Popup/Popup.types.ts
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { Popup } from './Popup';
 
 export interface IPopup {
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx
new file mode 100644
index 0000000000000..586b762d11152
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  css
+} from '../../Utilities';
+import { IProgressIndicatorProps } from './ProgressIndicator.types';
+import * as stylesImport from './ProgressIndicator.scss';
+const styles: any = stylesImport;
+
+// if the percentComplete is near 0, don't animate it.
+// This prevents animations on reset to 0 scenarios
+const ZERO_THRESHOLD = 0.01;
+
+export class ProgressIndicatorBase extends BaseComponent<IProgressIndicatorProps, {}> {
+  public static defaultProps = {
+    label: '',
+    description: '',
+    width: 180
+  };
+
+  constructor(props: IProgressIndicatorProps) {
+    super(props);
+
+    this._warnDeprecations({
+      title: 'label'
+    });
+
+  }
+
+  public render() {
+    const { title, description, className, ariaValueText } = this.props;
+    let { label, percentComplete } = this.props;
+
+    // Handle deprecated value.
+    if (title) {
+      label = title;
+    }
+
+    if (this.props.percentComplete !== undefined) {
+      percentComplete = Math.min(100, Math.max(0, percentComplete! * 100));
+    }
+
+    return (
+      <div className={ css('ms-ProgressIndicator', styles.root, className) }>
+        <div className={ css('ms-ProgressIndicator-itemName', styles.itemName) }>{ label }</div>
+        <div className={ css('ms-ProgressIndicator-itemProgress', styles.itemProgress) }>
+          <div className={ css('ms-ProgressIndicator-progressTrack', styles.progressTrack) } />
+          <div
+            className={ css(
+              'ms-ProgressIndicator-progressBar',
+              styles.progressBar,
+              percentComplete && percentComplete > ZERO_THRESHOLD && 'smoothTransition',
+              percentComplete === undefined && styles.indeterminate
+            ) }
+            style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined }
+            role='progressbar'
+            aria-valuemin={ 0 }
+            aria-valuemax={ 100 }
+            aria-valuenow={ percentComplete }
+            aria-valuetext={ ariaValueText }
+          />
+        </div>
+        <div className={ css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }>{ description }</div>
+      </div>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts
new file mode 100644
index 0000000000000..5a326f92ce5a6
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts
@@ -0,0 +1,41 @@
+import { IStyle, keyframes } from '../../Styling';
+import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types';
+
+export const getStyles = (
+  props: IProgressIndicatorStyleProps
+): IProgressIndicatorStyles => {
+  const { className } = props;
+
+  return ({
+    root: [
+      'ms-ProgressIndicator',
+      {},
+      className
+    ],
+
+    itemName: [
+      'ms-ProgressIndicator-itemName',
+      {}
+    ],
+
+    itemDescription: [
+      'ms-ProgressIndicator-itemDescription',
+      {}
+    ],
+
+    itemProgress: [
+      'ms-ProgressIndicator-itemProgress',
+      {}
+    ],
+
+    progressTrack: [
+      'ms-ProgressIndicator-progressTrack',
+      {}
+    ],
+
+    progressBar: [
+      'ms-ProgressIndicator-progressBar',
+      {},
+    ],
+  });
+};
\ No newline at end of file
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 1d141ee60b873..5f9dd23cadfbb 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
@@ -1,70 +1,16 @@
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
-/* tslint:enable:no-unused-variable */
-
+import { styled } from '../../Utilities';
 import {
-  BaseComponent,
-  css
-} from '../../Utilities';
-import { IProgressIndicatorProps } from './ProgressIndicator.types';
-import * as stylesImport from './ProgressIndicator.scss';
-const styles: any = stylesImport;
-
-// if the percentComplete is near 0, don't animate it.
-// This prevents animations on reset to 0 scenarios
-const ZERO_THRESHOLD = 0.01;
-
-export class ProgressIndicator extends BaseComponent<IProgressIndicatorProps, {}> {
-  public static defaultProps = {
-    label: '',
-    description: '',
-    width: 180
-  };
-
-  constructor(props: IProgressIndicatorProps) {
-    super(props);
-
-    this._warnDeprecations({
-      title: 'label'
-    });
-
-  }
-
-  public render() {
-    const { title, description, className, ariaValueText } = this.props;
-    let { label, percentComplete } = this.props;
-
-    // Handle deprecated value.
-    if (title) {
-      label = title;
-    }
-
-    if (this.props.percentComplete !== undefined) {
-      percentComplete = Math.min(100, Math.max(0, percentComplete! * 100));
-    }
-
-    return (
-      <div className={ css('ms-ProgressIndicator', styles.root, className) }>
-        <div className={ css('ms-ProgressIndicator-itemName', styles.itemName) }>{ label }</div>
-        <div className={ css('ms-ProgressIndicator-itemProgress', styles.itemProgress) }>
-          <div className={ css('ms-ProgressIndicator-progressTrack', styles.progressTrack) } />
-          <div
-            className={ css(
-              'ms-ProgressIndicator-progressBar',
-              styles.progressBar,
-              percentComplete && percentComplete > ZERO_THRESHOLD && 'smoothTransition',
-              percentComplete === undefined && styles.indeterminate
-            ) }
-            style={ percentComplete !== undefined ? { width: percentComplete + '%' } : undefined }
-            role='progressbar'
-            aria-valuemin='0'
-            aria-valuemax='100'
-            aria-valuenow={ percentComplete && percentComplete.toFixed().toString() }
-            aria-valuetext={ ariaValueText }
-          />
-        </div>
-        <div className={ css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }>{ description }</div>
-      </div>
-    );
-  }
-}
+  IProgressIndicatorProps,
+  IProgressIndicatorStyleProps,
+  IProgressIndicatorStyles
+} from './ProgressIndicator.types';
+import { ProgressIndicatorBase } from './ProgressIndicator.base';
+import { getStyles } from './ProgressIndicator.styles';
+
+/**
+* ProgressIndicator description
+*/
+export const ProgressIndicator = styled<IProgressIndicatorProps, IProgressIndicatorStyleProps, IProgressIndicatorStyles>(
+  ProgressIndicatorBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
index b1bb692efdecd..547667bb8f3e6 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts
@@ -1,16 +1,31 @@
-export interface IProgressIndicator {
+import * as React from 'react';
+import { ProgressIndicatorBase } from './ProgressIndicator.base';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
+export interface IProgressIndicator {
+  focus: () => void;
 }
 
-export interface IProgressIndicatorProps {
+export interface IProgressIndicatorProps extends React.Props<ProgressIndicatorBase> {
+  /**
+   * Gets the component ref.
+   */
+  componentRef?: (component: IProgressIndicatorProps | null) => void;
+
   /**
-   * Optional callback to access the IProgressIndicator interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
+   * Call to provide customized styling that will layer on top of the variant rules.
    */
-  componentRef?: (component: IProgressIndicator | null) => void;
+  getStyles?: IStyleFunction<IProgressIndicatorStyleProps, IProgressIndicatorStyles>;
 
   /**
-   * Class name to apply to the root in addition to ms-ProgressIndicator.
+   * Theme provided by High-Order Component.
+   */
+  theme?: ITheme;
+
+  /**
+   * Additional css class to apply to the ProgressIndicator
+   * @defaultvalue undefined
    */
   className?: string;
 
@@ -40,3 +55,29 @@ export interface IProgressIndicatorProps {
    */
   title?: string;
 }
+
+export interface IProgressIndicatorStyleProps {
+  /**
+   * Theme provided by High-Order Component.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+  indeterminate?: boolean;
+  smoothTransition?: boolean;
+}
+
+export interface IProgressIndicatorStyles {
+  /**
+   * Style for the root element.
+   */
+  root: IStyle;
+  itemName: IStyle;
+  itemDescription: IStyle;
+  itemProgress: IStyle;
+  progressTrack: IStyle;
+  progressBar: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicatorPage.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicatorPage.tsx
index 85746ac5d3bd4..a79e4a563bebd 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicatorPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicatorPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { ProgressIndicatorBasicExample } from './examples/ProgressIndicator.Basic.Example';
@@ -14,11 +15,12 @@ const ProgressIndicatorBasicExampleCode = require('!raw-loader!office-ui-fabric-
 const ProgressIndicatorIndeterminateExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Indeterminate.Example.tsx') as string;
 
 export class ProgressIndicatorPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='ProgressIndicator'
         componentName='ProgressIndicatorExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/ProgressIndicator'
         exampleCards={
           <div>
             <ExampleCard title='Default ProgressIndicator' code={ ProgressIndicatorBasicExampleCode }>
@@ -37,60 +39,27 @@ export class ProgressIndicatorPage extends React.Component<IComponentDemoPagePro
           />
         }
         overview={
-          <div>
-            <p>
-              ProgressIndicators are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, use a Spinner instead. ProgressIndicators can appear in a new panel, a flyout, under the UI initiating the operation, or even replacing the initiating UI, as long as the UI can return if the operation is canceled or is stopped.
-            </p>
-            <p>
-              ProgressIndicators feature a bar showing total units to completion, and total units finished. The description of the operation appears above the bar, and the status in text appears below. The description should tell someone exactly what the operation is doing. Examples of formatting include:
-            </p>
-            <ul>
-              <li>
-                <strong>[Object]</strong> is being <strong>[operation name]</strong>, or
-              </li>
-              <li>
-                <strong>[Object]</strong> is being <strong>[operation name]</strong> to <strong>[destination name]</strong> or
-              </li>
-              <li>
-                <strong>[Object]</strong> is being <strong>[operation name]</strong> from <strong>[source name]</strong> to <strong>[destination name]</strong>
-              </li>
-            </ul>
-            <p>
-              Status text is generally in units elapsed and total units. If the operation can be canceled, an “X” icon is used and should be placed in the upper right, aligned with the baseline of the operation name. When an error occurs, replace the status text with the error description using ms-fontColor-redDark.
-            </p>
-            <p>
-              Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the operation description to reflect the change if necessary. Bars moving backwards reduce confidence in the service.
-            </p>
-
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use a ProgressIndicator when the total units to completion is known</li>
-              <li>Display operation description</li>
-              <li>Show text above and/or below the bar</li>
-              <li>Combine steps of a single operation into one bar</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Use a ProgressIndicator when the total units to completion is indeterminate</li>
-              <li>Use only a single word description</li>
-              <li>Show text to the right or left of the bar</li>
-              <li>Cause progress to “rewind” to show new steps</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ProgressIndicatorStatus}
+            { ...ProgressIndicatorStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap
index 1e5a1e6566ea0..575c15cc1ce37 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap
@@ -16,9 +16,9 @@ exports[`ProgressIndicator renders ProgressIndicator correctly 1`] = `
       className="ms-ProgressIndicator-progressTrack"
     />
     <div
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="75"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={75}
       aria-valuetext={undefined}
       className="ms-ProgressIndicator-progressBar smoothTransition"
       role="progressbar"
@@ -53,8 +53,8 @@ exports[`ProgressIndicator renders indeterminate ProgressIndicator correctly 1`]
       className="ms-ProgressIndicator-progressTrack"
     />
     <div
-      aria-valuemax="100"
-      aria-valuemin="0"
+      aria-valuemax={100}
+      aria-valuemin={0}
       aria-valuenow={undefined}
       aria-valuetext={undefined}
       className="ms-ProgressIndicator-progressBar"
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDonts.md b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDonts.md
new file mode 100644
index 0000000000000..5138b92a4f299
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDonts.md
@@ -0,0 +1,4 @@
+- Use a ProgressIndicator when the total units to completion is indeterminate
+- Use only a single word description
+- Show text to the right or left of the bar
+- Cause progress to “rewind” to show new steps
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDos.md b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDos.md
new file mode 100644
index 0000000000000..4c12cb8ba1d0d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorDos.md
@@ -0,0 +1,4 @@
+- Use a ProgressIndicator when the total units to completion is known
+- Display operation description
+- Show text above and/or below the bar
+- Combine steps of a single operation into one bar
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorOverview.md b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorOverview.md
new file mode 100644
index 0000000000000..6a7148ba3d5b3
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/docs/ProgressIndicatorOverview.md
@@ -0,0 +1,11 @@
+ProgressIndicators are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, use a Spinner instead. ProgressIndicators can appear in a new panel, a flyout, under the UI initiating the operation, or even replacing the initiating UI, as long as the UI can return if the operation is canceled or is stopped.
+
+ProgressIndicators feature a bar showing total units to completion, and total units finished. The description of the operation appears above the bar, and the status in text appears below. The description should tell someone exactly what the operation is doing. Examples of formatting include:
+
+- **[Object]** is being **[operation name]**, or
+- **[Object]** is being **[operation name]** to **[destination name]** or
+- **[Object]** is being **[operation name]** from **[source name]** to **[destination name]**
+
+Status text is generally in units elapsed and total units. If the operation can be canceled, an “X” icon is used and should be placed in the upper right, aligned with the baseline of the operation name. When an error occurs, replace the status text with the error description using ms-fontColor-redDark.
+
+Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the operation description to reflect the change if necessary. Bars moving backwards reduce confidence in the service.
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 d5c7a03d2487e..7c02614624289 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
@@ -28,15 +28,15 @@ export class ProgressIndicatorBasicExample extends React.Component<{}, IProgress
     this._startProgressDemo = this._startProgressDemo.bind(this);
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._startProgressDemo();
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     this._async.dispose();
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { percentComplete } = this.state;
 
     return (
@@ -48,7 +48,7 @@ export class ProgressIndicatorBasicExample extends React.Component<{}, IProgress
     );
   }
 
-  private _startProgressDemo() {
+  private _startProgressDemo(): void {
     // reset the demo
     this.setState({
       percentComplete: 0
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 77538f2d15eaf..e35bb873166fa 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
@@ -6,7 +6,7 @@ export class ProgressIndicatorIndeterminateExample extends React.Component<{}, {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <ProgressIndicator
         label='Example title'
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts
index c03c55d7411bb..56e3192e1179b 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/index.ts
@@ -1,2 +1,3 @@
 export * from './ProgressIndicator';
+export * from './ProgressIndicator.base';
 export * from './ProgressIndicator.types';
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
index 8344da7140f43..41ef89df36f79 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
@@ -54,7 +54,7 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
   };
   private _id: string;
   private _labelId: string;
-  private _classNames: {[key in keyof IRatingStyles]: string };
+  private _classNames: { [key in keyof IRatingStyles]: string };
 
   constructor(props: IRatingProps) {
     super(props);
@@ -67,7 +67,7 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
     this._labelId = getId('RatingLabel');
   }
 
-  public componentWillReceiveProps(nextProps: IRatingProps) {
+  public componentWillReceiveProps(nextProps: IRatingProps): void {
     if (typeof nextProps.rating !== 'undefined' && nextProps.rating !== this.state.rating) {
       this.setState({
         rating: this._getClampedRating(nextProps.rating)
@@ -75,7 +75,7 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const id = this._id;
     const stars = [];
     const starIds = [];
@@ -108,8 +108,8 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
       stars.push(
         <button
           className={ css(this._classNames.ratingButton, {
-            [this._classNames.rootIsLarge]: size === RatingSize.Large,
-            [this._classNames.rootIsSmall]: size !== RatingSize.Large
+            [this._classNames.rootIsLarge!]: size === RatingSize.Large,
+            [this._classNames.rootIsSmall!]: size !== RatingSize.Large
           }) }
           id={ starIds[i - 1] }
           key={ i }
@@ -120,7 +120,7 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
           type='button'
         >
           { this._getLabel(i) }
-          <RatingStar key={ i + 'rating' }  {...ratingStarProps} />
+          <RatingStar key={ i + 'rating' }  { ...ratingStarProps } />
         </button>
       );
     }
@@ -172,13 +172,13 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
     );
   }
 
-  private _getInitialValue(props: IRatingProps) {
+  private _getInitialValue(props: IRatingProps): number | undefined {
     if (typeof props.rating === 'undefined') {
       return props.min;
     }
 
     if (props.rating === null) {
-      return null;
+      return undefined;
     }
 
     return this._getClampedRating(props.rating);
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 e4256622a2983..4739320115def 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
@@ -1,6 +1,4 @@
-/* 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';
@@ -31,7 +29,7 @@ describe('Rating', () => {
       threwException = true;
     }
     expect(threwException).toEqual(false);
-    const renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance) as Element;
 
     const ratingButtons = renderedDOM.querySelectorAll('.ms-Rating-button');
     const ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
@@ -72,7 +70,7 @@ describe('Rating', () => {
     }
     expect(threwException).toEqual(false);
 
-    const renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance) as Element;
 
     const ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
 
@@ -106,7 +104,7 @@ describe('Rating', () => {
     }
     expect(threwException).toEqual(false);
 
-    const renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance) as Element;
     const ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
 
     const checkState = (ratingToCheck: number, state: string) => {
@@ -138,7 +136,7 @@ describe('Rating', () => {
     }
     expect(threwException).toEqual(false);
 
-    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance) as Element;
     const ratingButtons = renderedDOM.querySelectorAll('.ms-Rating-button');
     expect((ratingButtons[0] as HTMLButtonElement).disabled).toEqual(true);
     expect((ratingButtons[1] as HTMLButtonElement).disabled).toEqual(true);
@@ -165,7 +163,7 @@ describe('Rating', () => {
     }
     expect(threwException).toEqual(false);
 
-    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance) as Element;
     const ratingButtons = renderedDOM.querySelectorAll('.ms-Rating-button');
     expect((ratingButtons[0] as HTMLButtonElement).disabled).toEqual(true);
     expect((ratingButtons[1] as HTMLButtonElement).disabled).toEqual(true);
diff --git a/packages/office-ui-fabric-react/src/components/Rating/RatingPage.tsx b/packages/office-ui-fabric-react/src/components/Rating/RatingPage.tsx
index 476537b62615c..292d764e5cf4f 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/RatingPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/RatingPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { RatingBasicExample } from './examples/Rating.Basic.Example';
@@ -12,11 +13,12 @@ import { RatingStatus } from './Rating.checklist';
 const RatingBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx') as string;
 
 export class RatingPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Rating'
         componentName='RatingExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Rating'
         exampleCards={
           <ExampleCard title='Rating' code={ RatingBasicExampleCode }>
             <RatingBasicExample />
@@ -30,33 +32,27 @@ export class RatingPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              Ratings provide insight regarding others’ opinions and experiences with a product, helping users make more-informed purchasing decisions. Users can also rate products they’ve purchased.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Rating/docs/RatingOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Make it clear which product the rating pertains to by making sure the layout and grouping are clear when several products are on the page.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Rating/docs/RatingDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don’t use the rating component for data that has a continuous range, such as the brightness of a photo. Instead, use a slider.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Rating/docs/RatingDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...RatingStatus}
+            { ...RatingStatus }
           />
         }
       />
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 a93e9308308de..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
@@ -18,7 +18,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         }
     data-focuszone-id="FocusZone2"
     data-is-focusable={false}
-    onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDonts.md b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDonts.md
new file mode 100644
index 0000000000000..1e7800f804a20
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDonts.md
@@ -0,0 +1 @@
+- Don’t use the rating component for data that has a continuous range, such as the brightness of a photo. Instead, use a slider.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDos.md b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDos.md
new file mode 100644
index 0000000000000..a56a299d1738c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingDos.md
@@ -0,0 +1 @@
+- Make it clear which product the rating pertains to by making sure the layout and grouping are clear when several products are on the page.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Rating/docs/RatingOverview.md b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingOverview.md
new file mode 100644
index 0000000000000..89e7faca684f1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Rating/docs/RatingOverview.md
@@ -0,0 +1 @@
+Ratings provide insight regarding others’ opinions and experiences with a product, helping users make more-informed purchasing decisions. Users can also rate products they’ve purchased.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx
index 495322f8fe22c..11c5ac3a3461e 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx
@@ -36,7 +36,7 @@ export class RatingBasicExample extends React.Component<{}, {
   }
 
   // tslint:disable:jsx-no-lambda
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-RatingBasicExample'>
         Large Stars:
@@ -142,9 +142,7 @@ export class RatingBasicExample extends React.Component<{}, {
     });
   }
 
-  private _getRatingComponentAriaLabel(rating: number, maxRating: number) {
-
-    return 'Rating value is ' + rating + ' of ' + maxRating;
-
+  private _getRatingComponentAriaLabel(rating: number, maxRating: number): string {
+    return `Rating value is ${rating} of ${maxRating}`;
   }
 }
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
index f0790dc988d2e..5746f5a38256c 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx
@@ -306,7 +306,7 @@ export class ResizeGroupBase extends BaseComponent<IResizeGroupProps, IResizeGro
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { onRenderData, className, getStyles, theme } = this.props;
     const { dataToMeasure, renderedData } = this.state;
     const divProps = getNativeProps(this.props, divProperties, ['data']);
@@ -328,12 +328,12 @@ export class ResizeGroupBase extends BaseComponent<IResizeGroupProps, IResizeGro
     );
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._afterComponentRendered();
     this._events.on(window, 'resize', this._async.debounce(this._onResize, RESIZE_DELAY, { leading: true }));
   }
 
-  public componentWillReceiveProps(nextProps: IResizeGroupProps) {
+  public componentWillReceiveProps(nextProps: IResizeGroupProps): void {
     this.setState({
       dataToMeasure: { ...nextProps.data },
       resizeDirection: 'grow',
@@ -351,20 +351,20 @@ export class ResizeGroupBase extends BaseComponent<IResizeGroupProps, IResizeGro
   }
 
   public remeasure(): void {
-    if (this._root.value) {
+    if (this._root.current) {
       this.setState({ measureContainer: true });
     }
   }
 
-  private _afterComponentRendered() {
+  private _afterComponentRendered(): void {
     this._async.requestAnimationFrame(() => {
       let containerWidth = undefined;
-      if (this.state.measureContainer && this._root.value) {
-        containerWidth = this._root.value.getBoundingClientRect().width;
+      if (this.state.measureContainer && this._root.current) {
+        containerWidth = this._root.current.getBoundingClientRect().width;
       }
       const nextState = this._nextResizeGroupStateProvider.getNextState(this.props,
         this.state,
-        () => this._measured.value ? this._measured.value.scrollWidth : 0,
+        () => this._measured.current ? this._measured.current.scrollWidth : 0,
         containerWidth);
 
       if (nextState) {
@@ -373,8 +373,8 @@ export class ResizeGroupBase extends BaseComponent<IResizeGroupProps, IResizeGro
     });
   }
 
-  private _onResize() {
-    if (this._root.value) {
+  private _onResize(): void {
+    if (this._root.current) {
       this.setState({ measureContainer: true });
     }
   }
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 8e04e842d4889..ddb1259f0593d 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
@@ -17,7 +17,7 @@ function onReduceScalingData(data: ITestScalingData): ITestScalingData {
   };
 }
 
-function getRequiredResizeGroupProps() {
+function getRequiredResizeGroupProps(): { data: {}, onReduceData: sinon.SinonStub, onRenderData: sinon.SinonStub } {
   return {
     data: {},
     onReduceData: sinon.stub(),
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 b7fa1d5d97d6d..bc6a3ecc547b9 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx
@@ -4,6 +4,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { ResizeGroupOverflowSetExample } from './examples/ResizeGroup.OverflowSet.Example';
@@ -16,11 +17,12 @@ const ResizeGroupBasicExampleCode = require('!raw-loader!office-ui-fabric-react/
 const ResizeGroupFlexBoxExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.FlexBox.Example.tsx') as string;
 
 export class ResizeGroupPage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='ResizeGroup'
         componentName='ResizeGroupExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/ResizeGroup'
         exampleCards={
           <LayerHost>
             <ExampleCard title='Use ResizeGroup to move commands into an overflow menu' code={ ResizeGroupBasicExampleCode }>
@@ -40,66 +42,22 @@ export class ResizeGroupPage extends React.Component<IComponentDemoPageProps, an
           />
         }
         overview={
-          <div>
-            <span>
-              <p>
-                ResizeGroup is a React component that can be used to help fit the right amount of content within a container. The consumer
-                of the ResizeGroup provides some initial data, a reduce function, and a render function. The render function is responsible
-                for populating the contents of a the container when given some data. The initial data should represent the data that should
-                be rendered when the ResizeGroup has infinite width. If the contents returned by the render function do not fit within the
-                ResizeGroup, the reduce function is called to get a version of the data whose rendered width should be smaller than the data
-                that was just rendered.
-              </p>
-              <p>
-                An example scenario is shown below, where controls that do not fit on screen are rendered in an overflow menu. The data in
-                this situation is a list of 'primary' controls that are rendered on the top level and a set of overflow controls rendered in
-                the overflow menu. The initial data in this case has all the controls in the primary set. The implementation of onReduceData
-                moves a control from the overflow well into the primary control set.
-              </p>
-              <p>
-                This component queries the DOM for the dimensions of elements. Too many of these dimension queries will negatively affect
-                the performance of the component and could cause poor interactive performance on websites. One way to reduce the number of
-                measurements performed by the component is to provide a cacheKey in the initial data and in the return value of
-                onReduceData. Two data objects with the same cacheKey are assumed to have the same width, resulting in measurements being
-                skipped for that data object. In the controls with an overflow example, the cacheKey is simply the concatenation of the
-                keys of the controls that appear in the top level.
-              </p>
-              <p>
-                There is a boolean context property (isMeasured) added to let child components know if they are only being used for measurement purposes. When isMeasured is true, it will signify that the component is not the instance visible to the user. This will not be needed for most scenarios. It is intended to be used to to skip unwanted side effects of mounting a child component more than once. This includes cases where the the component makes API requests, requests focus to one of its elements, expensive computations, and/or renders markup unrelated to its size. Be careful not to use this property to change the components rendered output in a way that effects it size in any way.
-              </p>
-            </span>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>
-                Ensure the width of the parent of this component has a fixed width that does not depend on the dimensions of it's children.
-                Failure to do so may result in ResizeGroup attempting to fill a width of 0px.
-              </li>
-              <li>
-                Ensure that result of rendering the data returned by onReduceData is actually smaller than the previous data.
-              </li>
-              <li>
-                Include a cacheKey in your data to improve performance. Two objects with the same cacheKey are assumed to have the same
-                width, so the ResizeGroup will only store one measurement per resize group.
-               </li>
-              <li>
-                Implement onGrowData for improved performance when the container for the resize group increases in size.
-               </li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Do any DOM measurements inside your onReduce function as this will degrade performance</li>
-              <li>Provide too many different return values for onReduce, it will degrade performance</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDonts.md b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDonts.md
new file mode 100644
index 0000000000000..4e5e957772a25
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDonts.md
@@ -0,0 +1,2 @@
+- Do any DOM measurements inside your onReduce function as this will degrade performance
+- Provide too many different return values for onReduce, it will degrade performance
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDos.md b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDos.md
new file mode 100644
index 0000000000000..12de3cc5919f1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupDos.md
@@ -0,0 +1,4 @@
+- Ensure the width of the parent of this component has a fixed width that does not depend on the dimensions of it's children. Failure to do so may result in ResizeGroup attempting to fill a width of 0px.
+- Ensure that result of rendering the data returned by onReduceData is actually smaller than the previous data.
+- Include a cacheKey in your data to improve performance. Two objects with the same cacheKey are assumed to have the same width, so the ResizeGroup will only store one measurement per resize group.
+- Implement onGrowData for improved performance when the container for the resize group increases in size.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupOverview.md b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupOverview.md
new file mode 100644
index 0000000000000..d2295068c8ae4
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/docs/ResizeGroupOverview.md
@@ -0,0 +1,7 @@
+ResizeGroup is a React component that can be used to help fit the right amount of content within a container. The consumer of the ResizeGroup provides some initial data, a reduce function, and a render function. The render function is responsible for populating the contents of a the container when given some data. The initial data should represent the data that should be rendered when the ResizeGroup has infinite width. If the contents returned by the render function do not fit within the ResizeGroup, the reduce function is called to get a version of the data whose rendered width should be smaller than the data that was just rendered.
+
+An example scenario is shown below, where controls that do not fit on screen are rendered in an overflow menu. The data in this situation is a list of 'primary' controls that are rendered on the top level and a set of overflow controls rendered in the overflow menu. The initial data in this case has all the controls in the primary set. The implementation of onReduceData moves a control from the overflow well into the primary control set.
+
+This component queries the DOM for the dimensions of elements. Too many of these dimension queries will negatively affect the performance of the component and could cause poor interactive performance on websites. One way to reduce the number of measurements performed by the component is to provide a cacheKey in the initial data and in the return value of onReduceData. Two data objects with the same cacheKey are assumed to have the same width, resulting in measurements being skipped for that data object. In the controls with an overflow example, the cacheKey is simply the concatenation of the keys of the controls that appear in the top level.
+
+There is a boolean context property (isMeasured) added to let child components know if they are only being used for measurement purposes. When isMeasured is true, it will signify that the component is not the instance visible to the user. This will not be needed for most scenarios. It is intended to be used to to skip unwanted side effects of mounting a child component more than once. This includes cases where the the component makes API requests, requests focus to one of its elements, expensive computations, and/or renders markup unrelated to its size. Be careful not to use this property to change the components rendered output in a way that effects it size in any way.
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 f92c0febb1428..5975a4df7263a 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
@@ -81,7 +81,7 @@ function onReduceData(props: ILeftRightBoxSetProps): ILeftRightBoxSetProps | und
 }
 
 export class FlexBoxResizeGroupExample extends BaseComponent<{}, {}> {
-  public render() {
+  public render(): JSX.Element {
     const data: ILeftRightBoxSetProps = { leftCount: 5, rightCount: 5, cacheKey: '10' };
     return (
       <ResizeGroup
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 4fff978345fb7..0b40b58cb2b6f 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
@@ -69,7 +69,7 @@ export class ResizeGroupOverflowSetExample extends BaseComponent<{}, IResizeGrou
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { numberOfItems, cachingEnabled, buttonsChecked, short, onGrowDataEnabled } = this.state;
     const dataToRender = generateData(numberOfItems, cachingEnabled, buttonsChecked);
     return (
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
index 8ac7bcd7eb578..6dcab8131c800 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -46,15 +46,15 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
   }
 
   public get root(): HTMLDivElement | null {
-    return this._root.value;
+    return this._root.current;
   }
 
   public get stickyAbove(): HTMLDivElement | null {
-    return this._stickyAboveRef.value;
+    return this._stickyAboveRef.current;
   }
 
   public get stickyBelow(): HTMLDivElement | null {
-    return this._stickyBelowRef.value;
+    return this._stickyBelowRef.current;
   }
 
   public getChildContext() {
@@ -71,24 +71,24 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
     };
   }
 
-  public componentDidMount() {
-    this._events.on(this._root.value, 'scroll', this.notifySubscribers);
+  public componentDidMount(): void {
+    this._events.on(this._root.current, 'scroll', this.notifySubscribers);
     this._events.on(window, 'resize', this._onWindowResize);
   }
 
   public componentWillUnmount() {
-    this._events.off(this._root.value);
+    this._events.off(this._root.current);
     this._events.off(window);
   }
 
   public componentDidUpdate(prevProps: IScrollablePaneProps) {
     const initialScrollPosition = this.props.initialScrollPosition;
-    if (this._root.value && initialScrollPosition && prevProps.initialScrollPosition !== initialScrollPosition) {
-      this._root.value.scrollTop = initialScrollPosition;
+    if (this._root.current && initialScrollPosition && prevProps.initialScrollPosition !== initialScrollPosition) {
+      this._root.current.scrollTop = initialScrollPosition;
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { className, theme, getStyles } = this.props;
     const classNames = getClassNames(getStyles!,
       {
@@ -126,51 +126,51 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
 
   public addStickyHeader = (sticky: Sticky): void => {
     this._addSticky(sticky, this._stickyAbove, () => {
-      if (this._stickyAboveRef.value) {
-        this._stickyAboveRef.value.appendChild(sticky.content);
+      if (this._stickyAboveRef.current) {
+        this._stickyAboveRef.current.appendChild(sticky.content);
       }
     });
   }
 
   public addStickyFooter = (sticky: Sticky): void => {
     this._addSticky(sticky, this._stickyBelow, () => {
-      if (this._stickyBelowRef.value) {
-        this._stickyBelowRef.value.insertBefore(sticky.content, this._stickyBelowRef.value.firstChild);
+      if (this._stickyBelowRef.current) {
+        this._stickyBelowRef.current.insertBefore(sticky.content, this._stickyBelowRef.current.firstChild);
       }
     });
   }
 
   public removeStickyHeader = (sticky: Sticky): void => {
-    this._removeSticky(sticky, this._stickyAbove, this._stickyAboveRef.value);
+    this._removeSticky(sticky, this._stickyAbove, this._stickyAboveRef.current);
   }
 
   public removeStickyFooter = (sticky: Sticky): void => {
-    this._removeSticky(sticky, this._stickyBelow, this._stickyBelowRef.value);
+    this._removeSticky(sticky, this._stickyBelow, this._stickyBelowRef.current);
   }
 
   public notifySubscribers = (sort?: boolean): void => {
     this._subscribers.forEach((handle) => {
-      if (this._stickyAboveRef.value && this._stickyBelowRef.value) {
-        handle(this._stickyAboveRef.value.getBoundingClientRect(), this._stickyBelowRef.value.getBoundingClientRect());
+      if (this._stickyAboveRef.current && this._stickyBelowRef.current) {
+        handle(this._stickyAboveRef.current.getBoundingClientRect(), this._stickyBelowRef.current.getBoundingClientRect());
       }
     });
     if (this._stickyAbove.size > 1) {
-      this._sortStickies(this._stickyAbove, this._stickyAboveRef.value);
+      this._sortStickies(this._stickyAbove, this._stickyAboveRef.current);
     }
     if (this._stickyBelow.size > 1) {
-      this._sortStickies(this._stickyBelow, this._stickyBelowRef.value);
+      this._sortStickies(this._stickyBelow, this._stickyBelowRef.current);
     }
   }
 
   public getScrollPosition = (): number => {
-    if (this._root.value) {
-      return this._root.value.scrollTop;
+    if (this._root.current) {
+      return this._root.current.scrollTop;
     }
 
     return 0;
   }
 
-  private _addSticky(sticky: Sticky, stickyList: Set<Sticky>, addStickyToContainer: () => void) {
+  private _addSticky(sticky: Sticky, stickyList: Set<Sticky>, addStickyToContainer: () => void): void {
     if (!stickyList.has(sticky)) {
       stickyList.add(sticky);
       addStickyToContainer();
@@ -188,7 +188,7 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
     }
   }
 
-  private _removeSticky(sticky: Sticky, stickyList: Set<Sticky>, container: HTMLElement | null) {
+  private _removeSticky(sticky: Sticky, stickyList: Set<Sticky>, container: HTMLElement | null): void {
     if (container && stickyList.has(sticky)) {
       sticky.content.removeEventListener('transitionend',
         this._setPlaceholderHeights.bind(null, stickyList, container));
@@ -196,7 +196,7 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
     }
   }
 
-  private _onWindowResize() {
+  private _onWindowResize(): void {
     this._async.setTimeout(() => {
       this.notifySubscribers();
       this._setPlaceholderHeights(this._stickyAbove);
@@ -218,8 +218,8 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
 
     let stickyArr = Array.from(stickyList);
     stickyArr = stickyArr.sort((a, b) => {
-      const aOffset = this._calculateOffsetParent(a.root.value);
-      const bOffset = this._calculateOffsetParent(b.root.value);
+      const aOffset = this._calculateOffsetParent(a.root.current);
+      const bOffset = this._calculateOffsetParent(b.root.current);
       return aOffset - bOffset;
     });
     // Get number of elements that is already in order.
@@ -243,7 +243,7 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
 
   private _calculateOffsetParent(ele: HTMLElement | null): number {
     let offset = 0;
-    while (ele && this._root.value && ele.offsetParent !== this._root.value.offsetParent) {
+    while (ele && this._root.current && ele.offsetParent !== this._root.current.offsetParent) {
       offset += ele.offsetTop;
       if (ele.parentElement) {
         ele = ele.parentElement;
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 86abb63498a32..4e8f92d663265 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { ScrollablePaneDefaultExample } from './examples/ScrollablePane.Default.Example';
@@ -15,11 +16,12 @@ const ScrollablePaneDefaultExampleCode = require('!raw-loader!office-ui-fabric-r
 const ScrollablePaneDetailsListExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.DetailsList.Example.tsx') as string;
 
 export class ScrollablePanePage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='ScrollablePane'
         componentName='ScrollablePaneExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/ScrollablePane'
         exampleCards={
           <div>
             <ExampleCard title='Default' code={ ScrollablePaneDefaultExampleCode }>
@@ -43,30 +45,22 @@ export class ScrollablePanePage extends React.Component<IComponentDemoPageProps,
           </div>
         }
         overview={
-          <div>
-            <p>
-              ScrollablePane is a helper component designed to use in conjunction with a Sticky component.  Sticky components will "stick" to the top or bottom of a ScrollablePane's scrollable region and remain visible.  ScrollablePane requires a height or max-height set either on the component itself, or on the immediate parent element.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Ensure that a parent component has a CSS height, or max-height attribute set (and any intermediary containers have an inherit, or explicit height/max-height set).</li>
-              <li>Use Sticky component on block level elements</li>
-              <li>Sticky component are ideally section headers and/or footers</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don't use Sticky on elements with margin top or bottom</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDonts.md b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDonts.md
new file mode 100644
index 0000000000000..84f8a79e0cc17
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDonts.md
@@ -0,0 +1 @@
+- Don't use Sticky on elements with margin top or bottom
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDos.md b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDos.md
new file mode 100644
index 0000000000000..4c729aeea7cca
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneDos.md
@@ -0,0 +1,3 @@
+- Ensure that a parent component has a CSS height, or max-height attribute set (and any intermediary containers have an inherit, or explicit height/max-height set).
+- Use Sticky component on block level elements
+- Sticky component are ideally section headers and/or footers
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneOverview.md b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneOverview.md
new file mode 100644
index 0000000000000..0bcd8f171c5bb
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/docs/ScrollablePaneOverview.md
@@ -0,0 +1 @@
+ScrollablePane is a helper component designed to use in conjunction with a Sticky component.  Sticky components will "stick" to the top or bottom of a ScrollablePane's scrollable region and remain visible.  ScrollablePane requires a height or max-height set either on the component itself, or on the immediate parent element.
\ No newline at end of file
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 f2ca794437da9..0705d5ebb4990 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
@@ -6,7 +6,7 @@ import './ScrollablePane.Example.scss';
 
 export class ScrollablePaneDefaultExample extends React.Component {
 
-  public render() {
+  public render(): JSX.Element {
     const contentAreas: JSX.Element[] = [];
     for (let i = 0; i < 4; i++) {
       contentAreas.push(this._createContentArea(i));
@@ -21,7 +21,7 @@ export class ScrollablePaneDefaultExample extends React.Component {
     );
   }
 
-  private _getRandomColor() {
+  private _getRandomColor(): string {
     const letters = 'BCDEF'.split('');
     let color = '#';
     for (let i = 0; i < 6; i++) {
@@ -30,7 +30,7 @@ export class ScrollablePaneDefaultExample extends React.Component {
     return color;
   }
 
-  private _createContentArea(index: number) {
+  private _createContentArea(index: number): JSX.Element {
     const style = this._getRandomColor();
 
     return (
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 d03049bf316b0..e2bf1c61a542f 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import {
   DetailsList,
@@ -81,7 +79,7 @@ export class ScrollablePaneDetailsListExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { items, selectionDetails } = this.state;
 
     return (
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 24597119e0b0f..c25b89b947aa8 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
@@ -43,7 +43,7 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
     };
   }
 
-  public componentWillReceiveProps(newProps: ISearchBoxProps) {
+  public componentWillReceiveProps(newProps: ISearchBoxProps): void {
     if (newProps.value !== undefined) {
       this._latestValue = newProps.value;
       this.setState({
@@ -82,8 +82,14 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
         className={ classNames.root }
         onFocusCapture={ this._onFocusCapture }
       >
-        <div className={ classNames.iconContainer }>
-          <Icon className={ classNames.icon } iconName='Search' />
+        <div
+          className={ classNames.iconContainer }
+          onClick={ this._onClickFocus }
+        >
+          <Icon
+            className={ classNames.icon }
+            iconName='Search'
+          />
         </div>
         <input
           id={ id }
@@ -115,8 +121,8 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
    * Sets focus to the search box input field
    */
   public focus() {
-    if (this._inputElement.value) {
-      this._inputElement.value.focus();
+    if (this._inputElement.current) {
+      this._inputElement.current.focus();
     }
   }
 
@@ -142,12 +148,20 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
     }
   }
 
+  private _onClickFocus = () => {
+    const inputElement = this._inputElement.value;
+    if (inputElement) {
+      this.focus();
+      inputElement.selectionStart = inputElement.selectionEnd = 0;
+    }
+  }
+
   private _onFocusCapture = (ev: React.FocusEvent<HTMLElement>) => {
     this.setState({
       hasFocus: true
     });
 
-    this._events.on(this._rootElement.value, 'blur', this._onBlur, true);
+    this._events.on(this._rootElement.current, 'blur', this._onBlur, true);
 
     if (this.props.onFocus) {
       this.props.onFocus(ev as React.FocusEvent<HTMLInputElement>);
@@ -197,7 +211,7 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
   }
 
   private _onBlur = (ev: React.FocusEvent<HTMLInputElement>): void => {
-    this._events.off(this._rootElement.value, 'blur');
+    this._events.off(this._rootElement.current, 'blur');
     this.setState({
       hasFocus: false
     });
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 17028bade5a3e..280b9d65b7eb2 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
@@ -84,7 +84,8 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
         width: 32,
         textAlign: 'center',
         transition: `width ${AnimationVariables.durationValue1}`,
-        color: palette.themePrimary
+        color: palette.themePrimary,
+        cursor: 'text'
       },
       hasFocus && {
         width: 4,
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx
index d8e4ff0d94ddc..18b918e363cda 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBoxPage.tsx
@@ -3,13 +3,13 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { SearchBoxFullSizeExample } from './examples/SearchBox.FullSize.Example';
 import { SearchBoxUnderlinedExample } from './examples/SearchBox.Underlined.Example';
 import { SearchBoxDisabledExample } from './examples/SearchBox.Disabled.Example';
 import { SearchBoxSmallExample } from './examples/SearchBox.Small.Example';
-import { FontClassNames } from '../../Styling';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { SearchBoxStatus } from './SearchBox.checklist';
 
@@ -19,11 +19,12 @@ const SearchBoxDisabledExampleCode = require('!raw-loader!office-ui-fabric-react
 const SearchBoxSmallExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx') as string;
 
 export class SearchBoxPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='SearchBox'
         componentName='SearchBoxExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/SearchBox'
         exampleCards={
           <div>
             <ExampleCard
@@ -60,92 +61,27 @@ export class SearchBoxPage extends React.Component<IComponentDemoPageProps, {}>
           />
         }
         overview={
-          <div>
-            <p>
-              SearchBoxes provide an input field for searching through content, allowing users to locate specific items within the website or app.
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>Zero input state </h2>
-
-            <p>
-              When the user has clicked into the SearchBox, but has not entered any text, there is an opportunity to display "hint text" within the input field, explaining what a user can do next. This could prompt a user to search for specific type content, or explain the scope of the search. Examples include "type to search", "try searching for &lt;x&gt;", "search for a place" or "type to search in &lt;x location&gt;".
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>Autocomplete suggestions</h2>
-
-            <p>
-              As the user enters a query string, they are provided with a dropdown of autocomplete suggestions or disambiguation options. This will help them expedite the input process and formulate an effective query. Recent search history, trending searches, contextual search suggestions, hints and tips are all good candidates for autocomplete content. In general, autocomplete suggestions have the user's input highlighted in some way (generally bolded) to indicate why it's being displayed. As the user enters more keystrokes, the suggestions update continuously/in real time. To see autocomplete suggestions, the user does not need to hit enter (execute a full search), as it is a lightweight way to get quick suggestions or results. If there are mixed result types within the autocomplete suggestions, provide visual indicators or grouping to help organize the information, making it easier to parse.
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>Full search</h2>
-
-            <p>
-              If a user hits "enter" after entering input, a full search is executed. Full searches often go to another "results" page, or change/filter the content of the current page to show only applicable content. The results can appear in any form that best communicates the content.
-            </p>
-
-            <p>
-              As a general guideline, results should be displayed in context with the query that was typed, with immediate access to edit the query or enter a new one. One method to enable efficient access to both edit the previous query and enter a new query is to highlight the previous query when the field is reactivated. This way, any keystroke will replace the previous string, but the string is maintained so that the user can position a cursor to edit or append the previous string.
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>Search scopes</h2>
-
-            <p>
-              Although search entry points tend to be similarly visualized, they can provide access to results that range from broad to narrow. By effectively communicating the scope of a search, you can help to ensure that the user expectation will be met by the capabilities of the search you are performing, which will reduce the possibility of frustration. The search entry point should be juxtaposed with the content being searched.
-            </p>
-
-            <p>
-              Some common search scopes include:
-            </p>
-
-            <ul>
-              <li><strong>Global:</strong> Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more.</li>
-              <li><strong>Web:</strong> Search a web index. Results include pages, entities, and answers.</li>
-              <li><strong>My stuff:</strong> Search across device(s), cloud, social graphs, and more. Results are varied, but are constrained by the connection to user account(s).</li>
-            </ul>
-
-            <h2 className={ FontClassNames.xLarge }>SearchBox with no parent container</h2>
-
-            <p>
-              Use a SearchBox without a parent container when it is not restricted to a certain width to accommodate other content. This search box will span the entire width of the space it's in.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use placeholder text in the SearchBox to describe what users can search for.</li>
-              <li>Example: "Search"; "Search files"; "Search site"</li>
-              <li>Once the user has clicked into the SearchBox but hasn’t entered input yet, use "hint text" to communicate search scope.</li>
-              <li>Examples: "Try searching for a PDFs"; "Search contacts list"; "Type to find &lt;content type&gt;"</li>
-              <li>Provide autocomplete suggestions to help the user search quickly. These suggestions can be from past searches or auto-completions of the user's query text.</li>
-              <li>Provide autocomplete suggestions where there are strong matches to the user's query that the user may want to view immediately.</li>
-              <li>Use a visual separator to define a group of a similar or conceptually aligned autocomplete suggestions.</li>
-              <li>If possible, provide a preview (e.g. image, title, etc.) for autocomplete suggestions to help the user quickly determine if the suggested result is what they were searching for.</li>
-              <li>Use the Underlined SearchBox for CommandBars.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don't leave the SearchBox blank because it's too ambiguous.</li>
-              <li>Don't have lengthy and unclear hint text. It should be used to clarify and set expectations.</li>
-              <li>Don't provide too many autocomplete suggestions, as that will overwhelm the user.</li>
-              <li>Don't provide inaccurate matches or bad predictions, as it will make search seem unreliable and will result in user frustration.</li>
-              <li>Don’t provide too much information or metadata in the suggestions list; it’s intended to be lightweight.</li>
-              <li>Don’t use an autocomplete dropdown for something that has one choice; there must be more than one item.</li>
-              <li>Don't build a custom search control based on the default text box or any other control.</li>
-              <li>Don't use SearchBox if you cannot reliably provide accurate results.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...SearchBoxStatus}
+            { ...SearchBoxStatus }
           />
         }
       />
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 ea8c6904b138f..dc8155cc4fdea 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
@@ -44,6 +44,7 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
         ms-SearchBox-iconContainer
         {
           color: #0078d4;
+          cursor: text;
           display: flex;
           flex-direction: column;
           flex-shrink: 0;
@@ -53,6 +54,7 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
           transition: width 0.167s;
           width: 32px;
         }
+    onClick={[Function]}
   >
     <i
       aria-hidden={true}
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDonts.md b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDonts.md
new file mode 100644
index 0000000000000..bb977a155edf5
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDonts.md
@@ -0,0 +1,8 @@
+- Don't leave the SearchBox blank because it's too ambiguous.
+- Don't have lengthy and unclear hint text. It should be used to clarify and set expectations.
+- Don't provide too many autocomplete suggestions, as that will overwhelm the user.
+- Don't provide inaccurate matches or bad predictions, as it will make search seem unreliable and will result in user frustration.
+- Don’t provide too much information or metadata in the suggestions list; it’s intended to be lightweight.
+- Don’t use an autocomplete dropdown for something that has one choice; there must be more than one item.
+- Don't build a custom search control based on the default text box or any other control.
+- Don't use SearchBox if you cannot reliably provide accurate results.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDos.md b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDos.md
new file mode 100644
index 0000000000000..9de49cc7727a2
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxDos.md
@@ -0,0 +1,9 @@
+- Use placeholder text in the SearchBox to describe what users can search for.
+- Example: "Search"; "Search files"; "Search site"
+- Once the user has clicked into the SearchBox but hasn’t entered input yet, use "hint text" to communicate search scope.
+- Examples: "Try searching for a PDFs"; "Search contacts list"; "Type to find \<content type\>"
+- Provide autocomplete suggestions to help the user search quickly. These suggestions can be from past searches or auto-completions of the user's query text.
+- Provide autocomplete suggestions where there are strong matches to the user's query that the user may want to view immediately.
+- Use a visual separator to define a group of a similar or conceptually aligned autocomplete suggestions.
+- If possible, provide a preview (e.g. image, title, etc.) for autocomplete suggestions to help the user quickly determine if the suggested result is what they were searching for.
+- Use the Underlined SearchBox for CommandBars.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxOverview.md b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxOverview.md
new file mode 100644
index 0000000000000..a0b55e39b7aa9
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/docs/SearchBoxOverview.md
@@ -0,0 +1,29 @@
+SearchBoxes provide an input field for searching through content, allowing users to locate specific items within the website or app.
+
+## Zero input state
+
+When the user has clicked into the SearchBox, but has not entered any text, there is an opportunity to display "hint text" within the input field, explaining what a user can do next. This could prompt a user to search for specific type content, or explain the scope of the search. Examples include "type to search", "try searching for \<x\>", "search for a place" or "type to search in \<x location\>".
+
+## Autocomplete suggestions
+
+As the user enters a query string, they are provided with a dropdown of autocomplete suggestions or disambiguation options. This will help them expedite the input process and formulate an effective query. Recent search history, trending searches, contextual search suggestions, hints and tips are all good candidates for autocomplete content. In general, autocomplete suggestions have the user's input highlighted in some way (generally bolded) to indicate why it's being displayed. As the user enters more keystrokes, the suggestions update continuously/in real time. To see autocomplete suggestions, the user does not need to hit enter (execute a full search), as it is a lightweight way to get quick suggestions or results. If there are mixed result types within the autocomplete suggestions, provide visual indicators or grouping to help organize the information, making it easier to parse.
+
+## Full search
+
+If a user hits "enter" after entering input, a full search is executed. Full searches often go to another "results" page, or change/filter the content of the current page to show only applicable content. The results can appear in any form that best communicates the content.
+
+As a general guideline, results should be displayed in context with the query that was typed, with immediate access to edit the query or enter a new one. One method to enable efficient access to both edit the previous query and enter a new query is to highlight the previous query when the field is reactivated. This way, any keystroke will replace the previous string, but the string is maintained so that the user can position a cursor to edit or append the previous string.
+
+## Search scopes
+
+Although search entry points tend to be similarly visualized, they can provide access to results that range from broad to narrow. By effectively communicating the scope of a search, you can help to ensure that the user expectation will be met by the capabilities of the search you are performing, which will reduce the possibility of frustration. The search entry point should be juxtaposed with the content being searched.
+
+Some common search scopes include:
+
+- **Global:** Search across multiple sources of cloud and local content. Varied results include URLs, documents, media, actions, apps, and more.
+- **Web:** Search a web index. Results include pages, entities, and answers.
+- **My stuff:** Search across device(s), cloud, social graphs, and more. Results are varied, but are constrained by the connection to user account(s).
+
+## SearchBox with no parent container
+
+Use a SearchBox without a parent container when it is not restricted to a certain width to accommodate other content. This search box will span the entire width of the space it's in.
\ No newline at end of file
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 0bc20e5cd2df6..de5b948f2029b 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
@@ -5,7 +5,7 @@ import './SearchBox.Examples.scss';
 // tslint:disable:jsx-no-lambda
 export class SearchBoxDisabledExample extends React.Component<any, any> {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-SearchBoxExample'>
         <SearchBox
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 1d4683d080eba..c429e96a492bf 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
@@ -4,7 +4,7 @@ import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 // tslint:disable:jsx-no-lambda
 
 export class SearchBoxFullSizeExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <SearchBox
         placeholder='Search'
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 c979689353ff0..9a86ef0b661d2 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
@@ -6,7 +6,7 @@ import './SearchBox.Small.Example.scss';
 
 // tslint:disable:jsx-no-lambda
 export class SearchBoxSmallExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-SearchBoxSmallExample'>
         <SearchBox
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 45a9a321d4f04..a42f73fd46818 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
@@ -4,7 +4,7 @@ import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 // tslint:disable:jsx-no-lambda
 export class SearchBoxUnderlinedExample extends React.Component<any, any> {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <SearchBox
         placeholder='Search'
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 917e50e507dd3..a0a09e9dc38d5 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
@@ -1,6 +1,4 @@
-/* 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';
@@ -21,7 +19,7 @@ describe('Slider', () => {
     const component = ReactTestUtils.renderIntoDocument(
       <Slider label='slider' />
     );
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const labelElement = renderedDOM.querySelector('.ms-Label') as HTMLElement;
 
     expect(labelElement.textContent).toEqual('slider');
@@ -38,7 +36,7 @@ describe('Slider', () => {
       />
     );
 
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const sliderLine = renderedDOM.querySelector('.ms-Slider-line') as HTMLElement;
     const sliderThumb = renderedDOM.querySelector('.ms-Slider-slideBox') as HTMLElement;
 
@@ -75,7 +73,7 @@ describe('Slider', () => {
       <Slider />
     );
 
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const allButtons = renderedDOM.querySelectorAll('button');
 
     for (let i = 0; i < allButtons.length; i++) {
@@ -99,7 +97,7 @@ describe('Slider', () => {
     let component = ReactTestUtils.renderIntoDocument(
       <Slider />
     );
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     let button = renderedDOM.querySelector('.ms-Slider-slideBox') as HTMLElement;
     let ariaValueText = button.getAttribute('aria-valuetext');
 
@@ -115,7 +113,7 @@ describe('Slider', () => {
         ariaValueText={ getTextValue }
       />
     );
-    renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     button = renderedDOM.querySelector('.ms-Slider-slideBox') as HTMLElement;
     ariaValueText = button.getAttribute('aria-valuetext');
 
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 9343ac04da28a..5664501ff8717 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
+++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
@@ -151,8 +151,8 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     ) as React.ReactElement<{}>;
   }
   public focus(): void {
-    if (this._thumb.value) {
-      this._thumb.value.focus();
+    if (this._thumb.current) {
+      this._thumb.current.focus();
     }
   }
 
@@ -160,7 +160,7 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     return this.state.value;
   }
 
-  private _getAriaValueText = (value: number | undefined): string | void => {
+  private _getAriaValueText = (value: number | undefined): string | undefined => {
     if (this.props.ariaValueText && value !== undefined) {
       return this.props.ariaValueText(value);
     }
@@ -185,13 +185,13 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
   }
 
   private _onMouseMoveOrTouchMove = (event: MouseEvent | TouchEvent, suppressEventCancelation?: boolean): void => {
-    if (!this._sliderLine.value) {
+    if (!this._sliderLine.current) {
       return;
     }
 
     const { max, min, step } = this.props;
     const steps: number = (max! - min!) / step!;
-    const sliderPositionRect: ClientRect = this._sliderLine.value.getBoundingClientRect();
+    const sliderPositionRect: ClientRect = this._sliderLine.current.getBoundingClientRect();
     const sliderLength: number = !this.props.vertical ? sliderPositionRect.width : sliderPositionRect.height;
     const stepLength: number = sliderLength / steps;
     let currentSteps: number | undefined;
@@ -242,7 +242,7 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     }
     return currentPosition;
   }
-  private _updateValue(value: number, renderedValue: number) {
+  private _updateValue(value: number, renderedValue: number): void {
     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
     const roundedValue: number = Math.round(value * interval) / interval;
diff --git a/packages/office-ui-fabric-react/src/components/Slider/SliderPage.tsx b/packages/office-ui-fabric-react/src/components/Slider/SliderPage.tsx
index b14469fdf530f..8e920707534cd 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/SliderPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Slider/SliderPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { SliderBasicExample } from './examples/Slider.Basic.Example';
@@ -12,11 +13,12 @@ import { SliderStatus } from './Slider.checklist';
 const SliderBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx') as string;
 
 export class SliderPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title={ 'Slider' }
         componentName='SliderExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Slider'
         exampleCards={
           <ExampleCard title={ 'Slider' } code={ SliderBasicExampleCode }>
             <SliderBasicExample />
@@ -30,43 +32,27 @@ export class SliderPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              A Slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the Slider bar can show values and users can choose where they want to drag the knob or lever to set the value.
-            </p>
-            <p>
-              A Slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium—not about setting the value to two or five.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Slider/docs/SliderOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Consider a Slider when changing a value.</li>
-              <li>Use a slider when you want your users to be able to set defined values (such as volume or brightness).</li>
-              <li>Include a label indicating what value the Slider changes.</li>
-              <li>Use step points (or tick marks) if you don’t want the Slider to allow arbitrary values between min and max. </li>
-              <li>Use a Slider when the user would benefit from instant feedback on the effect of setting changes. </li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Slider/docs/SliderDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don't use a Slider when the options are not values.</li>
-              <li>Don’t use a Slider for binary settings.</li>
-              <li>Don’t create a continuous Slider if the range of values is large.</li>
-              <li>Don’t use for a range of three values or less.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Slider/docs/SliderDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...SliderStatus}
+            { ...SliderStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDonts.md b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDonts.md
new file mode 100644
index 0000000000000..3d5cbad81fc63
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDonts.md
@@ -0,0 +1,4 @@
+- Don't use a Slider when the options are not values.
+- Don’t use a Slider for binary settings.
+- Don’t create a continuous Slider if the range of values is large.
+- Don’t use for a range of three values or less.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDos.md b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDos.md
new file mode 100644
index 0000000000000..336a1ec3087a0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderDos.md
@@ -0,0 +1,5 @@
+- Consider a Slider when changing a value.
+- Use a slider when you want your users to be able to set defined values (such as volume or brightness).
+- Include a label indicating what value the Slider changes.
+- Use step points (or tick marks) if you don’t want the Slider to allow arbitrary values between min and max.
+- Use a Slider when the user would benefit from instant feedback on the effect of setting changes.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Slider/docs/SliderOverview.md b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderOverview.md
new file mode 100644
index 0000000000000..0b7c0e00e7c2e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Slider/docs/SliderOverview.md
@@ -0,0 +1,3 @@
+A Slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the Slider bar can show values and users can choose where they want to drag the knob or lever to set the value.
+
+A Slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium—not about setting the value to two or five.
diff --git a/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx
index 06768a87f98a7..3dc8d58031bcc 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx
@@ -13,7 +13,7 @@ export class SliderBasicExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-basicSlider'>
         <div className='ms-SliderBasicExample'>
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 c7b3ee3d1763f..408286ba750e9 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
@@ -9,7 +9,7 @@ import { KeyCodes } from '../../Utilities';
 describe('SpinButton', () => {
   function renderIntoDocument(element: React.ReactElement<any>): HTMLElement {
     const component = ReactTestUtils.renderIntoDocument(element);
-    const renderedDOM: Element = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM: Element = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     return renderedDOM as HTMLElement;
   }
 
@@ -452,7 +452,8 @@ describe('SpinButton', () => {
     expect(inputDOM.value).toEqual(String(errorMessage));
     expect(inputDOM.getAttribute('aria-valuemin')).toEqual(String(exampleMinValue));
     expect(inputDOM.getAttribute('aria-valuemax')).toEqual(String(exampleMaxValue));
-    expect(inputDOM.getAttribute('aria-valuenow')).toEqual(String(errorMessage));
+    expect(inputDOM.getAttribute('aria-valuenow')).toBeFalsy();
+    expect(inputDOM.getAttribute('aria-valuetext')).toEqual(errorMessage);
   });
 
   it('should have correct value after increment and using defaultValue', () => {
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 433bc0b8e3316..819257f2ee0fb 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
@@ -129,7 +129,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
     });
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       disabled,
       label,
@@ -202,9 +202,10 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
             type='text'
             role='spinbutton'
             aria-labelledby={ label && this._labelId }
-            aria-valuenow={ value }
-            aria-valuemin={ min && String(min) }
-            aria-valuemax={ max && String(max) }
+            aria-valuenow={ !isNaN(Number(value)) ? Number(value) : undefined }
+            aria-valuetext={ isNaN(Number(value)) ? value : undefined }
+            aria-valuemin={ min }
+            aria-valuemax={ max }
             onBlur={ this._onBlur }
             ref={ this._input }
             onFocus={ this._onFocus }
@@ -262,14 +263,14 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
   }
 
   public focus(): void {
-    if (this._input.value) {
-      this._input.value.focus();
+    if (this._input.current) {
+      this._input.current.focus();
     }
   }
 
   private _onFocus = (ev: React.FocusEvent<HTMLInputElement>): void => {
     // We can't set focus on a non-existing element
-    if (!this._input.value) {
+    if (!this._input.current) {
       return;
     }
 
@@ -277,7 +278,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
       this._stop();
     }
 
-    this._input.value.select();
+    this._input.current.select();
 
     this.setState({ isFocused: true });
 
@@ -330,7 +331,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
     return String(newValue);
   }
 
-  private _onChange() {
+  private _onChange(): void {
     /**
      * A noop input change handler.
      * https://github.com/facebook/react/issues/7027.
@@ -414,15 +415,16 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
    * @param event - the keyboardEvent that was fired
    */
   private _handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {
-    if (this.props.disabled) {
-      this._stop();
 
-      // eat the up and down arrow keys to keep the page from scrolling
-      if (event.which === KeyCodes.up || event.which === KeyCodes.down) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
+    // eat the up and down arrow keys to keep focus in the spinButton
+    // (especially when a spinButton is inside of a FocusZone)
+    if (event.which === KeyCodes.up || event.which === KeyCodes.down) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
 
+    if (this.props.disabled) {
+      this._stop();
       return;
     }
 
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButtonPage.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButtonPage.tsx
index faa27929fd1e6..792468a7df36b 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButtonPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButtonPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { SpinButtonBasicExample } from './examples/SpinButton.Basic.Example';
@@ -25,11 +26,12 @@ const SpinButtonBasicWithEndPositionExampleCode = require('!raw-loader!office-ui
 const SpinButtonCustomStyledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.CustomStyled.Example.tsx') as string;
 
 export class SpinButtonPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='SpinButton'
         componentName='SpinButtonExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/SpinButton'
         exampleCards={
           <div>
             <ExampleCard
@@ -85,37 +87,27 @@ export class SpinButtonPage extends React.Component<IComponentDemoPageProps, {}>
           />
         }
         overview={
-          <div>
-            <p>
-              A SpinButton allows the user to incrementaly adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use a SpinButton when changing a value with precise control.</li>
-              <li>Use a SpinButton when values are tied to a unit.</li>
-              <li>Include a label indicating what value the SpinButton changes.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don’t use a SpinButton if the range of values is large.</li>
-              <li>Don’t use a SpinButton for binary settings.</li>
-              <li>Don't use a SpinButton for a range of three values or less.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...SpinButtonStatus}
+            { ...SpinButtonStatus }
           />
         }
       />
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 2e4db82ba4d66..425bbedc03f31 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
@@ -73,9 +73,10 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
     <input
       aria-disabled={false}
       aria-labelledby="Label0"
-      aria-valuemax="100"
+      aria-valuemax={100}
       aria-valuemin={0}
-      aria-valuenow="0"
+      aria-valuenow={0}
+      aria-valuetext={undefined}
       className=
           ms-spinButton-input
           {
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDonts.md b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDonts.md
new file mode 100644
index 0000000000000..6c04426cee37a
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDonts.md
@@ -0,0 +1,3 @@
+- Don’t use a SpinButton if the range of values is large.
+- Don’t use a SpinButton for binary settings.
+- Don't use a SpinButton for a range of three values or less.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDos.md b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDos.md
new file mode 100644
index 0000000000000..9b76bf0893ed0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonDos.md
@@ -0,0 +1,3 @@
+- Use a SpinButton when changing a value with precise control.
+- Use a SpinButton when values are tied to a unit.
+- Include a label indicating what value the SpinButton changes.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonOverview.md b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonOverview.md
new file mode 100644
index 0000000000000..8c27fca6c4652
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/docs/SpinButtonOverview.md
@@ -0,0 +1 @@
+A SpinButton allows the user to incrementaly adjust a value in small steps. It is mainly used for numeric values, but other values are supported too.
\ No newline at end of file
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 0b5eaf10976f7..12aebe89e02d5 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
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
 
 export class SpinButtonBasicExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div style={ { width: '400px' } }>
         <SpinButton
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicDisabled.Example.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicDisabled.Example.tsx
index 643a1eb419364..7a9ece0aebe6b 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicDisabled.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicDisabled.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
 
 export class SpinButtonBasicDisabledExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div style={ { width: '400px' } }>
         <SpinButton
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithEndPosition.Example.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithEndPosition.Example.tsx
index 2320f732fcacb..4a5bddc4dbc88 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithEndPosition.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithEndPosition.Example.tsx
@@ -3,7 +3,7 @@ import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
 import { Position } from 'office-ui-fabric-react/lib/utilities/positioning';
 
 export class SpinButtonBasicWithEndPositionExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div style={ { width: '400px' } }>
         <SpinButton
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithIcon.Example.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithIcon.Example.tsx
index 42fd1e94b7a82..28003b08bf94f 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithIcon.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithIcon.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
 
 export class SpinButtonBasicWithIconExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div style={ { width: '400px' } }>
         <SpinButton
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithIconDisabled.Example.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithIconDisabled.Example.tsx
index cdefb7c4640e3..91a93c6dfd952 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithIconDisabled.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.BasicWithIconDisabled.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
 
 export class SpinButtonBasicWithIconDisabledExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div style={ { width: '400px' } }>
         <SpinButton
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.CustomStyled.Example.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.CustomStyled.Example.tsx
index 50b8480d4cffc..8eb4c3826fde3 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.CustomStyled.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.CustomStyled.Example.tsx
@@ -27,7 +27,7 @@ const downArrowButtonStyles: Partial<IButtonStyles> = {
 };
 
 export class SpinButtonCustomStyledExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <SpinButton
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 85bc98d29a718..c2c3b9e3cfe31 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
@@ -3,7 +3,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() {
+  public render(): JSX.Element {
     const suffix = ' cm';
 
     return (
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx
index 7a3474e498d41..67338c38eec27 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx
+++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx
@@ -1,5 +1,5 @@
-import { ISpinnerStyleProps, ISpinnerStyles, SpinnerSize, SpinnerType } from './Spinner.types';
-import { IRawStyle, hiddenContentStyle, keyframes, HighContrastSelector } from '../../Styling';
+import { ISpinnerStyleProps, ISpinnerStyles, SpinnerSize } from './Spinner.types';
+import { hiddenContentStyle, keyframes, HighContrastSelector } from '../../Styling';
 
 const spinAnimation: string = keyframes({
   '0%': {
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 8061900cebccc..80d4941bb9860 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
+++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
@@ -1,9 +1,10 @@
 import { styled } from '../../Utilities';
 import { SpinnerBase } from './Spinner.base';
-import { ISpinnerProps } from './Spinner.types';
 import { getStyles } from './Spinner.styles';
+// tslint:disable-next-line:no-unused-variable
+import { ISpinnerProps } from './Spinner.types';
 
 export const Spinner = styled(
   SpinnerBase,
   getStyles
-);
\ No newline at end of file
+);
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.types.ts b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.types.ts
index 109022603e717..09b662b913ec1 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.types.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Spinner } from './Spinner';
-import { ITheme, IStyle, IRawStyle } from '../../Styling';
+import { ITheme, IStyle } from '../../Styling';
 import { IStyleFunction } from '../../Utilities';
 
 export interface ISpinner {
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/SpinnerPage.tsx b/packages/office-ui-fabric-react/src/components/Spinner/SpinnerPage.tsx
index 4f5a537acafa7..b829e244ced78 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/SpinnerPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Spinner/SpinnerPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { SpinnerBasicExample } from './examples/Spinner.Basic.Example';
@@ -12,11 +13,12 @@ import { SpinnerStatus } from './Spinner.checklist';
 const SpinnerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx') as string;
 
 export class SpinnerPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Spinner'
         componentName='SpinnerExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Spinner'
         exampleCards={
           <ExampleCard
             title='Various Spinner Types'
@@ -33,38 +35,27 @@ export class SpinnerPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. A Spinner is shown when it's unsure how long a task will take making it the indeterminate version of a ProgressIndicator. They can be various sizes, located inline with content or centered. They generally appear after an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use a Spinner when a task is not immediate.</li>
-              <li>Use one Spinner at a time.</li>
-              <li>Descriptive verbs are appropriate under a Spinner to help the user understand what's happening. Ie: Saving, processing, updating.</li>
-              <li>Use a Spinner when confirming a change has been made or a task is being processed.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don’t use a Spinner when performing immediate tasks.</li>
-              <li>Don't show multiple Spinners at the same time.</li>
-              <li>Don't include more than a few words when paired with a Spinner.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...SpinnerStatus}
+            { ...SpinnerStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md
new file mode 100644
index 0000000000000..d265a7d6eb922
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md
@@ -0,0 +1,3 @@
+- Don’t use a Spinner when performing immediate tasks.
+- Don't show multiple Spinners at the same time.
+- Don't include more than a few words when paired with a Spinner.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md
new file mode 100644
index 0000000000000..39e616d86e244
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md
@@ -0,0 +1,4 @@
+- Use a Spinner when a task is not immediate.
+- Use one Spinner at a time.
+- Descriptive verbs are appropriate under a Spinner to help the user understand what's happening. Ie: Saving, processing, updating.
+- Use a Spinner when confirming a change has been made or a task is being processed.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md
new file mode 100644
index 0000000000000..5e7970a9b658e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md
@@ -0,0 +1 @@
+A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. A Spinner is shown when it's unsure how long a task will take making it the indeterminate version of a ProgressIndicator. They can be various sizes, located inline with content or centered. They generally appear after an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx
index 48c586c10194f..6b2705577c2c9 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx
@@ -7,7 +7,7 @@ import { Label } from 'office-ui-fabric-react/lib/Label';
 import './Spinner.Basic.Example.scss';
 
 export class SpinnerBasicExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-BasicSpinnersExample'>
         <Label>Extra Small Spinner</Label>
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 6b08abea6d4ea..325fb0904e4c9 100644
--- a/packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx
+++ b/packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx
@@ -58,8 +58,8 @@ 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);
-    if (this.root.value) {
-      this.root.value.appendChild(this.content);
+    if (this.root.current) {
+      this.root.current.appendChild(this.content);
     }
     this.context.scrollablePane.notifySubscribers(true);
   }
@@ -135,11 +135,11 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
   }
 
   private _onScrollEvent = (headerBound: ClientRect, footerBound: ClientRect): void => {
-    if (!this.root.value) {
+    if (!this.root.current) {
       return;
     }
 
-    const { top, bottom } = this.root.value.getBoundingClientRect();
+    const { top, bottom } = this.root.current.getBoundingClientRect();
     const { isStickyTop, isStickyBottom } = this.state;
     const { stickyPosition } = this.props;
     const canStickyHeader = stickyPosition === StickyPositionType.Both || stickyPosition === StickyPositionType.Header;
@@ -159,11 +159,11 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
   }
 
   private _resetSticky(callback: () => void): void {
-    if (this.root.value) {
-      this.root.value.appendChild(this.content);
+    if (this.root.current) {
+      this.root.current.appendChild(this.content);
     }
 
-    setTimeout(() => {
+    setTimeout((): void => {
       if (this.props.stickyClassName) {
         this.content.children[0].classList.remove(this.props.stickyClassName);
       }
@@ -173,11 +173,11 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
 
   // Gets background of nearest parent element that has a declared background-color attribute
   private _getBackground(): string | null {
-    if (!this.root.value) {
+    if (!this.root.current) {
       return null;
     }
 
-    let curr: HTMLElement = this.root.value;
+    let curr: HTMLElement = this.root.current;
 
     while (window.getComputedStyle(curr).getPropertyValue('background-color') === 'rgba(0, 0, 0, 0)' ||
       window.getComputedStyle(curr).getPropertyValue('background-color') === 'transparent') {
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 6bd4af289bac7..5e28fc819c92a 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
@@ -30,7 +30,7 @@ export class ColorPickerGridCellBase extends React.Component<IColorPickerGridCel
 
   private _classNames: {[key in keyof IColorPickerGridCellStyles]: string };
 
-  public render() {
+  public render(): JSX.Element {
     const {
       item,
       id,
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 c4f7b0d55e540..f2402c41a2e0f 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
@@ -69,7 +69,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
     };
   }
 
-  public componentWillReceiveProps(newProps: ISwatchColorPickerProps) {
+  public componentWillReceiveProps(newProps: ISwatchColorPickerProps): void {
     let newSelectedIndex;
 
     if (newProps.selectedId) {
@@ -90,7 +90,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
     }
   }
 
-  public render() {
+  public render(): JSX.Element | null {
     const {
       colorCells,
       columnCount,
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPickerPage.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPickerPage.tsx
index 0fae1ac85b1c2..6d6d522263397 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPickerPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPickerPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { SwatchColorPickerBasicExample } from './examples/SwatchColorPicker.Basic.Example';
@@ -12,11 +13,12 @@ import { SwatchColorPickerStatus } from './SwatchColorPicker.checklist';
 const SwatchColorPickerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/SwatchColorPicker/examples/SwatchColorPicker.Basic.Example.tsx') as string;
 
 export class SwatchColorPickerPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='SwatchColorPicker'
         componentName='SwatchColorPickerExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/SwatchColorPicker'
         exampleCards={
           <ExampleCard title='SwatchColorPicker' code={ SwatchColorPickerBasicExampleCode }>
             <SwatchColorPickerBasicExample />
@@ -30,31 +32,27 @@ export class SwatchColorPickerPage extends React.Component<IComponentDemoPagePro
           />
         }
         overview={
-          <div>
-            <p>
-              A SwatchColorPicker is a list of colors displayed as a grid as options for the user. It can be displayed by itself, with header and/or dividers, or as a button which expands to show the swatch color picker
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerOverview.md') }
+          </PageMarkdown>
+        }
+        bestPractices={
+          <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use a SwatchColorPicker when there are multiple finite choices that can be grouped and/or collapsed under one title.</li>
-              <li>SwatchColorPickers contain a grid of colors.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Do not use a SwatchColorPicker when there are a a very large number of color choices. The best component for to that is a ColorPicker.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Spinner/docs/SpinnerDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...SwatchColorPickerStatus}
+            { ...SwatchColorPickerStatus }
           />
         }
       />
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 8177cbed6ad15..0a55445b0bccb 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
@@ -14,7 +14,6 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
       }
   data-focuszone-id="FocusZone3"
   onBlur={[Function]}
-  onClick={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDonts.md b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDonts.md
new file mode 100644
index 0000000000000..6520df00b232b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDonts.md
@@ -0,0 +1 @@
+- Do not use a SwatchColorPicker when there are a a very large number of color choices. The best component for to that is a ColorPicker.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDos.md b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDos.md
new file mode 100644
index 0000000000000..7c7632931d36f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerDos.md
@@ -0,0 +1,2 @@
+- Use a SwatchColorPicker when there are multiple finite choices that can be grouped and/or collapsed under one title.
+- SwatchColorPickers contain a grid of colors.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerOverview.md b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerOverview.md
new file mode 100644
index 0000000000000..bf7c8218c478e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/docs/SwatchColorPickerOverview.md
@@ -0,0 +1 @@
+A SwatchColorPicker is a list of colors displayed as a grid as options for the user. It can be displayed by itself, with header and/or dividers, or as a button which expands to show the swatch color picker.
\ No newline at end of file
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 c02edf71a529b..4afbda646dded 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
@@ -19,7 +19,7 @@ export class SwatchColorPickerBasicExample extends React.Component<any, IBasicSw
       previewColor2: undefined
     };
   }
-  public render() {
+  public render(): JSX.Element {
 
     return (
       <div>
@@ -52,7 +52,14 @@ export class SwatchColorPickerBasicExample extends React.Component<any, IBasicSw
           }
         />
         <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.previewColor ? this.state.previewColor : this.state.color ? this.state.color : null, fontSize: '24px' } } >Sample Text</div>
+        <div
+          style={ {
+            color: this.state.previewColor ? this.state.previewColor : this.state.color ? this.state.color : undefined,
+            fontSize: '24px'
+          } }
+        >
+          Sample Text
+        </div>
         <SwatchColorPicker
           // tslint:disable:jsx-no-lambda
           onCellHovered={ (id, color) => this.setState({ previewColor: color! }) }
@@ -96,7 +103,14 @@ 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>
+          <div
+            style={ {
+              color: this.state.previewColor2 ? this.state.previewColor2 : this.state.color2 ? this.state.color2 : undefined,
+              fontSize: '24px'
+            } }
+          >
+            Sample Text
+          </div>
           <SwatchColorPicker
             focusOnHover={ true }
             mouseLeaveParentSelector={ '#foo' }
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 44e7c76f8f332..a2974da0e16e4 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
@@ -1,6 +1,4 @@
-/* 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';
@@ -27,7 +25,7 @@ describe('TeachingBubble', () => {
         headline='Title'
       />
     );
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const titleElement = renderedDOM.querySelector('.ms-TeachingBubble-headline');
 
     expect(titleElement!.textContent).toEqual('Title');
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 ceb246fb4f421..73d7599b7d9de 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { BaseComponent, css } from '../../Utilities';
 import { TeachingBubbleContent } from './TeachingBubbleContent';
 import { ITeachingBubbleProps } from './TeachingBubble.types';
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 79fb4ae674373..ae41dc78b8bde 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { BaseComponent, css } from '../../Utilities';
 import { ITeachingBubbleProps } from './TeachingBubble.types';
 import { ITeachingBubbleState } from './TeachingBubble';
@@ -28,7 +26,7 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { illustrationImage, primaryButtonProps, secondaryButtonProps, headline, hasCondensedHeadline, hasCloseIcon, onDismiss, closeButtonAriaLabel, hasSmallHeadline } = this.props;
 
     let imageContent;
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx
index 10b1490033ca6..955cf23b67394 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx
@@ -4,6 +4,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { TeachingBubbleBasicExample } from './examples/TeachingBubble.Basic.Example';
@@ -21,11 +22,12 @@ const TeachingBubbleWideIllustrationExampleCode = require('!raw-loader!office-ui
 const TeachingBubbleSmallHeadlineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx') as string;
 
 export class TeachingBubblePage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='TeachingBubble'
         componentName='TeachingBubbleExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/TeachingBubble'
         exampleCards={
           <LayerHost>
             <ExampleCard title='TeachingBubble' code={ TeachingBubbleBasicExampleCode }>
@@ -53,14 +55,14 @@ export class TeachingBubblePage extends React.Component<IComponentDemoPageProps,
           />
         }
         overview={
-          <div>
-            <p>TeachingBubbles allow the user to display important hints on their web pages with a callout box.</p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/docs/TeachingBubbleOverview.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...TeachingBubbleStatus}
+            { ...TeachingBubbleStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/docs/TeachingBubbleOverview.md b/packages/office-ui-fabric-react/src/components/TeachingBubble/docs/TeachingBubbleOverview.md
new file mode 100644
index 0000000000000..3f69fd9d5b86b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/docs/TeachingBubbleOverview.md
@@ -0,0 +1 @@
+TeachingBubbles allow the user to display important hints on their web pages with a callout box.
\ No newline at end of file
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 91bd4ec369aca..70d0269e7a408 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
@@ -22,7 +20,7 @@ export class TeachingBubbleBasicExample extends React.Component<{}, ITeachingBub
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isTeachingBubbleVisible } = this.state;
     const examplePrimaryButton: IButtonProps = {
       children: 'Try it out'
@@ -57,7 +55,7 @@ export class TeachingBubbleBasicExample extends React.Component<{}, ITeachingBub
     );
   }
 
-  private _onDismiss(ev: any) {
+  private _onDismiss(ev: any): void {
     this.setState({
       isTeachingBubbleVisible: !this.state.isTeachingBubbleVisible
     });
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 bdfc2d2a27c65..d24cc8e48886d 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
@@ -1,6 +1,4 @@
-/* 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 { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
 
@@ -21,7 +19,7 @@ export class TeachingBubbleCondensedExample extends React.Component<{}, ITeachin
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isTeachingBubbleVisible } = this.state;
 
     return (
@@ -49,7 +47,7 @@ export class TeachingBubbleCondensedExample extends React.Component<{}, ITeachin
     );
   }
 
-  private _onDismiss(ev: any) {
+  private _onDismiss(ev: any): void {
     this.setState({
       isTeachingBubbleVisible: !this.state.isTeachingBubbleVisible
     });
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 7293397f80aaf..16b9e505ad00b 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import { IImageProps } from 'office-ui-fabric-react/lib/Image';
 import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
@@ -23,7 +21,7 @@ export class TeachingBubbleIllustrationExample extends React.Component<{}, ITeac
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isTeachingBubbleVisible } = this.state;
     const exampleImageProps: IImageProps = { src: 'http://placehold.it/364x140' };
     const examplePrimaryButton: IButtonProps = {
@@ -60,7 +58,7 @@ export class TeachingBubbleIllustrationExample extends React.Component<{}, ITeac
     );
   }
 
-  private _onDismiss(ev: any) {
+  private _onDismiss(ev: any): void {
     this.setState({
       isTeachingBubbleVisible: !this.state.isTeachingBubbleVisible
     });
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 aed369491e492..9ead533efbb4b 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
 
@@ -21,7 +19,7 @@ export class TeachingBubbleSmallHeadlineExample extends React.Component<{}, ITea
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isTeachingBubbleVisible } = this.state;
     const examplePrimaryButton: IButtonProps = {
       children: 'Try it out',
@@ -53,7 +51,7 @@ export class TeachingBubbleSmallHeadlineExample extends React.Component<{}, ITea
     );
   }
 
-  private _onDismiss(ev: any) {
+  private _onDismiss(ev: any): void {
     this.setState({
       isTeachingBubbleVisible: !this.state.isTeachingBubbleVisible
     });
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 7448ab573a9b3..d9379c6cf6d25 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 
 import { IImageProps } from 'office-ui-fabric-react/lib/Image';
 import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
@@ -24,7 +22,7 @@ export class TeachingBubbleWideIllustrationExample extends React.Component<{}, I
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isTeachingBubbleVisible } = this.state;
     const exampleImageProps: IImageProps = { src: 'http://placehold.it/364x140' };
     const examplePrimaryButton: IButtonProps = {
@@ -65,7 +63,7 @@ export class TeachingBubbleWideIllustrationExample extends React.Component<{}, I
     );
   }
 
-  private _onDismiss(ev: any) {
+  private _onDismiss(ev: any): void {
     this.setState({
       isTeachingBubbleVisible: !this.state.isTeachingBubbleVisible
     });
diff --git a/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.test.tsx b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.test.tsx
new file mode 100644
index 0000000000000..57569386ee6cd
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.test.tsx
@@ -0,0 +1,333 @@
+import * as React from 'react';
+import * as ReactTestUtils from 'react-dom/test-utils';
+import * as renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import {
+  KeyCodes
+} from '../../../Utilities';
+
+import { MaskedTextField } from './MaskedTextField';
+
+describe('MaskedTextField', () => {
+  function mockEvent(targetValue: string = ''): ReactTestUtils.SyntheticEventData {
+    const target: EventTarget = { value: targetValue } as HTMLInputElement;
+    const event: ReactTestUtils.SyntheticEventData = { target };
+
+    return event;
+  }
+
+  it('renders TextField correctly', () => {
+    const component = renderer.create(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+      />
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Moves caret on focus', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+      />
+    );
+
+    const input = component.find('input');
+    input.simulate('focus');
+    expect((input.getDOMNode() as HTMLInputElement).selectionStart).toEqual(7);
+  });
+
+  it('can change single character', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Simulate pressing the '1' key
+    input.simulate('keyDown', { keyCode: KeyCodes.one });
+    inputDOM.setSelectionRange(8, 8);
+    input.simulate('change', mockEvent('mask: (1___) ___ - ____'));
+    expect(inputDOM.value).toEqual('mask: (1__) ___ - ____');
+
+    // Simulate pressing the '2' key
+    input.simulate('keyDown', { keyCode: KeyCodes.two });
+    inputDOM.setSelectionRange(9, 9);
+    input.simulate('change', mockEvent('mask: (12__) ___ - ____'));
+    expect(inputDOM.value).toEqual('mask: (12_) ___ - ____');
+  });
+
+  it('can replace single character', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Simulate pressing the '1' key
+    input.simulate('keyDown', { keyCode: KeyCodes.one });
+    inputDOM.setSelectionRange(8, 8);
+    input.simulate('change', mockEvent('mask: (1___) ___ - ____'));
+    expect(inputDOM.value).toEqual('mask: (1__) ___ - ____');
+
+    // Replacing a character
+    input.simulate('keyDown', { keyCode: KeyCodes.two });
+    inputDOM.setSelectionRange(8, 8);
+    input.simulate('change', mockEvent('mask: (21__) ___ - ____'));
+    expect(inputDOM.value).toEqual('mask: (2__) ___ - ____');
+  });
+
+  it('should ignore incorrect format characters', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Simulate pressing the '1' key
+    input.simulate('keyDown', { keyCode: KeyCodes.one });
+    inputDOM.setSelectionRange(8, 8);
+    input.simulate('change', mockEvent('mask: (1___) ___ - ____'));
+    expect(inputDOM.value).toEqual('mask: (1__) ___ - ____');
+
+    // Simulate pressing the 'a' key
+    input.simulate('keyDown', { keyCode: KeyCodes.a });
+    inputDOM.setSelectionRange(9, 9);
+    input.simulate('change', mockEvent('mask: (1a__) ___ - ____'));
+    expect(inputDOM.value).toEqual('mask: (1__) ___ - ____');
+  });
+
+  it('should backspace', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+        value='123-456-7890'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Simulate backspacing the '2'
+    inputDOM.setSelectionRange(9, 9);
+    input.simulate('keyDown', { keyCode: KeyCodes.backspace });
+    input.simulate('change', mockEvent('mask: (13) 456 - 7890'));
+    expect(inputDOM.value).toEqual('mask: (1_3) 456 - 7890');
+  });
+
+  it('should delete', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+        value='123-456-7890'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Simulate deleting the '3'
+    inputDOM.setSelectionRange(9, 9);
+    input.simulate('keyDown', { keyCode: KeyCodes.del });
+    input.simulate('change', mockEvent('mask: (12) 456 - 7890'));
+    expect(inputDOM.value).toEqual('mask: (12_) 456 - 7890');
+  });
+
+  it('should ctrl backspace', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+        value='123-456-7890'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Simulate backspacing the '123'
+    inputDOM.setSelectionRange(10, 10);
+    input.simulate('keyDown', { keyCode: KeyCodes.backspace, ctrlKey: true });
+    inputDOM.setSelectionRange(7, 7);
+    input.simulate('change', mockEvent('mask: () 456 - 7890'));
+    expect(inputDOM.value).toEqual('mask: (___) 456 - 7890');
+  });
+
+  it('should ctrl delete', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+        value='123-456-7890'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Simulate deleting the '123'
+    inputDOM.setSelectionRange(7, 7);
+    input.simulate('keyDown', { keyCode: KeyCodes.del, ctrlKey: true });
+    input.simulate('change', mockEvent('mask: () 456 - 7890'));
+    expect(inputDOM.value).toEqual('mask: (___) 456 - 7890');
+  });
+
+  it('should backspace and delete selections', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+        value='123-456-7890'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Simulate selecting and backspacing the '123'
+    // Also select the preceding '('
+    inputDOM.setSelectionRange(6, 10);
+    input.simulate('keyDown', { keyCode: KeyCodes.backspace });
+    input.simulate('change', mockEvent('mask:  456 - 7890'));
+    expect(inputDOM.value).toEqual('mask: (___) 456 - 7890');
+
+    // Simulate selecting and deleting the '456'
+    // also select the proceding ' '
+    inputDOM.setSelectionRange(12, 16);
+    input.simulate('keyDown', { keyCode: KeyCodes.del });
+    input.simulate('change', mockEvent('mask: (___) - 7890'));
+    expect(inputDOM.value).toEqual('mask: (___) ___ - 7890');
+  });
+
+  it('should paste characters', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+        value='123-456-7890'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Paste a 7777 into the start of the input
+    inputDOM.setSelectionRange(0, 0);
+    input.simulate('paste');
+    input.simulate('change', mockEvent('7777mask: (123) 456 - 7890'));
+    expect(inputDOM.value).toEqual('mask: (777) 756 - 7890');
+
+    // Paste a 9999 into the end
+    inputDOM.setSelectionRange(22, 22);
+    input.simulate('paste');
+    input.simulate('change', mockEvent('mask: (777) 756 - 78909999'));
+    expect(inputDOM.value).toEqual('mask: (777) 756 - 7890');
+
+    // Paste invalid characters mixed with valid characters
+    inputDOM.setSelectionRange(0, 0);
+    input.simulate('paste');
+    input.simulate('change', mockEvent('1a2b3cmask: (777) 756 - 7890'));
+    expect(inputDOM.value).toEqual('mask: (123) 756 - 7890');
+  });
+
+  it('should paste over selected characters', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+        value='123-456-7890'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Paste a 000 over the '123'
+    inputDOM.setSelectionRange(7, 10);
+    input.simulate('paste');
+    input.simulate('change', mockEvent('mask: (000) 456 - 7890'));
+    expect(inputDOM.value).toEqual('mask: (000) 456 - 7890');
+
+    // Replace all characters with a paste
+    inputDOM.setSelectionRange(0, 22);
+    input.simulate('paste');
+    input.simulate('change', mockEvent('98765'));
+    expect(inputDOM.value).toEqual('mask: (987) 65_ - ____');
+  });
+
+  it('should replace selected text a char added', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+        value='123-456-7890'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Replace '23) 45' text with '6'
+    inputDOM.setSelectionRange(8, 14);
+    input.simulate('keyDown', { keyCode: KeyCodes.six });
+    inputDOM.setSelectionRange(9, 9);
+    input.simulate('change', mockEvent('mask: (166 - 7890'));
+    expect(inputDOM.value).toEqual('mask: (16_) __6 - 7890');
+
+    // Replace all text with '9'
+    inputDOM.setSelectionRange(0, 22);
+    input.simulate('keyDown', { keyCode: KeyCodes.nine });
+    inputDOM.setSelectionRange(1, 1);
+    input.simulate('change', mockEvent('9'));
+    expect(inputDOM.value).toEqual('mask: (9__) ___ - ____');
+  });
+
+  it('should ignore overflowed characters', () => {
+    const component = mount(
+      <MaskedTextField
+        label='With input mask'
+        mask='m\ask: (999) 999 - 9999'
+        value='123-456-7890'
+      />
+    );
+
+    const input = component.find('input'),
+      inputDOM = input.getDOMNode() as HTMLInputElement;
+    input.simulate('focus');
+
+    // Add '1' to the end
+    inputDOM.setSelectionRange(22, 22);
+    input.simulate('keyDown', { keyCode: KeyCodes.one });
+    inputDOM.setSelectionRange(23, 23);
+    input.simulate('change', mockEvent('mask: (123) 456 - 78901'));
+    expect(inputDOM.value).toEqual('mask: (123) 456 - 7890');
+  });
+});
diff --git a/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.tsx
new file mode 100644
index 0000000000000..82f9161ea475d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/MaskedTextField.tsx
@@ -0,0 +1,406 @@
+import * as React from 'react';
+import { TextField } from '../TextField';
+import {
+  ITextField,
+  ITextFieldProps
+} from '../TextField.types';
+import {
+  autobind,
+  BaseComponent,
+  KeyCodes,
+} from '../../../Utilities';
+
+import {
+  clearNext,
+  clearPrev,
+  clearRange,
+  DEFAULT_MASK_FORMAT_CHARS,
+  getLeftFormatIndex,
+  getMaskDisplay,
+  getRightFormatIndex,
+  IMaskValue,
+  insertString,
+  parseMask
+} from '@uifabric/utilities/lib/inputMask';
+
+/**
+ * props.mask:
+ *  The string containing the prompt and format characters.
+ * Example:
+ *  'Phone Number: (999) 9999'
+ *
+ * _maskCharData
+ *  An array of data containing information regarding the format characters,
+ *  their indices inside the display text, and their corresponding values.
+ * Example:
+ *  [
+ *    { value: '1', displayIndex: 16, format: /[0-9]/ },
+ *    { value: '2', displayIndex: 17, format: /[0-9]/ },
+ *    { displayIndex: 18, format: /[0-9]/ },
+ *    { value: '4', displayIndex: 22, format: /[0-9]/ },
+ *    ...
+ *  ]
+ */
+export interface IMaskedTextFieldState {
+  /**
+   * The mask string formatted with the input value.
+   * This is what is displayed inside the TextField
+   * Example:
+   *  'Phone Number: 12_ - 4___'
+   */
+  displayValue: string;
+  /** The index into the rendered value of the first unfilled format character */
+  maskCursorPosition?: number;
+}
+
+export const DEFAULT_MASK_CHAR = '_';
+
+enum inputChangeType {
+  default,
+  backspace,
+  delete,
+  textPasted
+}
+
+export class MaskedTextField extends BaseComponent<ITextFieldProps, IMaskedTextFieldState> implements ITextField {
+  public static defaultProps: ITextFieldProps = {
+    maskChar: DEFAULT_MASK_CHAR,
+    maskFormat: DEFAULT_MASK_FORMAT_CHARS,
+  };
+  /**
+   * Tell BaseComponent to bypass resolution of componentRef.
+   */
+  protected _shouldUpdateComponentRef = false;
+
+  private _textField: ITextField;
+  private _maskCharData: IMaskValue[];
+  // True if the TextField is focused
+  private _isFocused: boolean;
+  // True if the TextField was not focused and it was clicked into
+  private _moveCursorOnMouseUp: boolean;
+
+  // The stored selection data prior to input change events.
+  private _changeSelectionData: {
+    changeType: inputChangeType
+    selectionStart: number,
+    selectionEnd: number
+  } | null;
+
+  constructor(props: ITextFieldProps) {
+    super(props);
+
+    // Translate mask into charData
+    this._maskCharData = parseMask(props.mask, props.maskFormat);
+    // If an initial value is provided, use it to populate the format chars
+    props.value && this.setValue(props.value);
+
+    this._isFocused = false;
+    this._moveCursorOnMouseUp = false;
+
+    this.state = {
+      displayValue: getMaskDisplay(
+        props.mask,
+        this._maskCharData,
+        props.maskChar),
+    };
+  }
+
+  public componentWillReceiveProps(newProps: ITextFieldProps) {
+    if (newProps.mask !== this.props.mask) {
+      this._maskCharData = parseMask(newProps.mask, newProps.maskFormat);
+      this.state = {
+        displayValue: getMaskDisplay(
+          newProps.mask,
+          this._maskCharData,
+          newProps.maskChar),
+      };
+    }
+  }
+
+  public componentDidUpdate() {
+    // Move the cursor to the start of the mask format on update
+    if (this.state.maskCursorPosition) {
+      this._textField.setSelectionRange(this.state.maskCursorPosition, this.state.maskCursorPosition);
+    }
+  }
+
+  public render() {
+    return (
+      <TextField
+        { ...this.props }
+        onFocus={ this._onFocus }
+        onBlur={ this._onBlur }
+        onMouseDown={ this._onMouseDown }
+        onMouseUp={ this._onMouseUp }
+        onChanged={ this._onInputChange }
+        onBeforeChange={ this._onBeforeChange }
+        onKeyDown={ this._onKeyDown }
+        onPaste={ this._onPaste }
+        value={ this.state.displayValue }
+        ref={ this._resolveRef('_textField') }
+      />
+    );
+  }
+
+  /**
+   * @return The value of all filled format characters or undefined if not all format characters are filled
+   */
+  public get value(): string | undefined {
+    let value = '';
+
+    for (let i = 0; i < this._maskCharData.length; i++) {
+      if (!this._maskCharData[i].value) {
+        return undefined;
+      }
+      value += this._maskCharData[i].value;
+    }
+    return value;
+  }
+
+  /**
+   *
+   */
+  public setValue(newValue: string): void {
+    let valueIndex = 0,
+      charDataIndex = 0;
+
+    while (valueIndex < newValue.length &&
+      charDataIndex < this._maskCharData.length) {
+      // Test if the next character in the new value fits the next format character
+      const testVal = newValue[valueIndex];
+      if (this._maskCharData[charDataIndex].format.test(testVal)) {
+        this._maskCharData[charDataIndex].value = testVal;
+        charDataIndex++;
+      }
+      valueIndex++;
+    }
+  }
+
+  public focus(): void {
+    this._textField && this._textField.focus();
+  }
+
+  public select(): void {
+    this._textField && this._textField.select();
+  }
+
+  public setSelectionStart(value: number): void {
+    this._textField && this._textField.setSelectionStart(value);
+  }
+
+  public setSelectionEnd(value: number): void {
+    this._textField && this._textField.setSelectionEnd(value);
+  }
+
+  public setSelectionRange(start: number, end: number): void {
+    this._textField && this._textField.setSelectionRange(start, end);
+  }
+
+  public get selectionStart(): number | null {
+    return this._textField && this._textField.selectionStart !== null ? this._textField.selectionStart : -1;
+  }
+
+  public get selectionEnd(): number | null {
+    return this._textField && this._textField.selectionEnd ? this._textField.selectionEnd : -1;
+  }
+
+  @autobind
+  private _onFocus(event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) {
+    const {
+      onFocus
+    } = this.props;
+
+    if (onFocus) {
+      onFocus(event);
+    }
+
+    this._isFocused = true;
+
+    // Move the cursor position to the rightmost unfilled position
+    for (let i = 0; i < this._maskCharData.length; i++) {
+      if (!this._maskCharData[i].value) {
+        this.setState({
+          maskCursorPosition: this._maskCharData[i].displayIndex
+        });
+        break;
+      }
+    }
+  }
+
+  @autobind
+  private _onBlur(event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) {
+    const {
+      onBlur
+    } = this.props;
+
+    if (onBlur) {
+      onBlur(event);
+    }
+
+    this._isFocused = false;
+    this._moveCursorOnMouseUp = true;
+  }
+
+  @autobind
+  private _onMouseDown(event: React.MouseEvent<HTMLInputElement>) {
+    if (!this._isFocused) {
+      this._moveCursorOnMouseUp = true;
+    }
+  }
+
+  @autobind
+  private _onMouseUp(event: React.MouseEvent<HTMLInputElement>) {
+    // Move the cursor on mouseUp after focusing the textField
+    if (this._moveCursorOnMouseUp) {
+      this._moveCursorOnMouseUp = false;
+      // Move the cursor position to the rightmost unfilled position
+      for (let i = 0; i < this._maskCharData.length; i++) {
+        if (!this._maskCharData[i].value) {
+          this.setState({
+            maskCursorPosition: this._maskCharData[i].displayIndex
+          });
+          break;
+        }
+      }
+    }
+  }
+
+  @autobind
+  private _onBeforeChange(value: String) {
+    if (this._changeSelectionData === null) {
+      this._changeSelectionData = {
+        changeType: inputChangeType.default,
+        selectionStart: this._textField.selectionStart !== null ? this._textField.selectionStart : -1,
+        selectionEnd: this._textField.selectionEnd !== null ? this._textField.selectionEnd : -1
+      };
+    }
+  }
+
+  @autobind
+  private _onInputChange(value: string) {
+    if (!this._changeSelectionData) {
+      return;
+    }
+
+    const { displayValue } = this.state;
+
+    // The initial value of cursorPos does not matter
+    let cursorPos = 0;
+    const {
+      changeType,
+      selectionStart,
+      selectionEnd
+    } = this._changeSelectionData;
+
+    if (changeType === inputChangeType.textPasted) {
+      const charsSelected = selectionEnd - selectionStart,
+        charCount = value.length + charsSelected - displayValue.length,
+        startPos = selectionStart,
+        pastedString = value.substr(startPos, charCount);
+
+      // Clear any selected characters
+      if (charsSelected) {
+        this._maskCharData = clearRange(this._maskCharData, selectionStart, charsSelected);
+      }
+      cursorPos = insertString(this._maskCharData, startPos, pastedString);
+    } else if (changeType === inputChangeType.delete ||
+      changeType === inputChangeType.backspace) {
+      // isDel is true If the characters are removed LTR, otherwise RTL
+      const isDel = changeType === inputChangeType.delete,
+        charCount = selectionEnd - selectionStart;
+
+      if (charCount) { // charCount is > 0 if range was deleted
+        this._maskCharData = clearRange(this._maskCharData, selectionStart, charCount);
+        cursorPos = getRightFormatIndex(this._maskCharData, selectionStart);
+      } else { // If charCount === 0, there was no selection and a single character was deleted
+        if (isDel) {
+          this._maskCharData = clearNext(this._maskCharData, selectionStart);
+          cursorPos = getRightFormatIndex(this._maskCharData, selectionStart);
+        } else {
+          this._maskCharData = clearPrev(this._maskCharData, selectionStart);
+          cursorPos = getLeftFormatIndex(this._maskCharData, selectionStart);
+        }
+      }
+    } else if (value.length > displayValue.length) {
+      // This case is if the user added characters
+      const charCount = value.length - displayValue.length,
+        startPos = selectionEnd - charCount,
+        enteredString = value.substr(startPos, charCount);
+
+      cursorPos = insertString(this._maskCharData, startPos, enteredString);
+    } else if (value.length <= displayValue.length) {
+      /**
+       * This case is reached only if the user has selected a block of 1 or more
+       * characters and input a character replacing the characters they've selected.
+       */
+      const charCount = 1,
+        selectCount = displayValue.length + charCount - value.length,
+        startPos = selectionEnd - charCount,
+        enteredString = value.substr(startPos, charCount);
+
+      // Clear the selected range
+      this._maskCharData = clearRange(this._maskCharData, startPos, selectCount);
+      // Insert the printed character
+      cursorPos = insertString(this._maskCharData, startPos, enteredString);
+    }
+
+    this._changeSelectionData = null;
+
+    this.setState({
+      displayValue: getMaskDisplay(
+        this.props.mask,
+        this._maskCharData,
+        this.props.maskChar),
+      maskCursorPosition: cursorPos
+    });
+  }
+
+  @autobind
+  private _onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    this._changeSelectionData = null;
+    if (this._textField.value) {
+      const {
+        keyCode,
+        ctrlKey,
+        metaKey
+      } = event;
+
+      // Ignore ctrl and meta keydown
+      if (ctrlKey || metaKey) {
+        return;
+      }
+
+      // On backspace or delete, store the selection and the keyCode
+      if (keyCode === KeyCodes.backspace || keyCode === KeyCodes.del) {
+        const selectionStart = (event.target as HTMLInputElement).selectionStart,
+          selectionEnd = (event.target as HTMLInputElement).selectionEnd;
+
+        // Check if backspace or delete press is valid.
+        if (!(keyCode === KeyCodes.backspace && selectionEnd && selectionEnd > 0)
+          && !(keyCode === KeyCodes.del && selectionStart !== null && selectionStart < this._textField.value.length)) {
+          return;
+        }
+
+        this._changeSelectionData = {
+          changeType: keyCode === KeyCodes.backspace ?
+            inputChangeType.backspace :
+            inputChangeType.delete,
+          selectionStart: selectionStart !== null ? selectionStart : -1,
+          selectionEnd: selectionEnd !== null ? selectionEnd : -1
+        };
+      }
+    }
+  }
+
+  @autobind
+  private _onPaste(event: React.ClipboardEvent<HTMLInputElement>) {
+    const selectionStart = (event.target as HTMLInputElement).selectionStart,
+      selectionEnd = (event.target as HTMLInputElement).selectionEnd;
+    // Store the paste selection range
+    this._changeSelectionData = {
+      changeType: inputChangeType.textPasted,
+      selectionStart: selectionStart !== null ? selectionStart : -1,
+      selectionEnd: selectionEnd !== null ? selectionEnd : -1
+    };
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap
new file mode 100644
index 0000000000000..7eb59c1220752
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/TextField/MaskedTextField/__snapshots__/MaskedTextField.test.tsx.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MaskedTextField renders TextField correctly 1`] = `
+<div
+  className="ms-TextField"
+>
+  <div
+    className="ms-TextField-wrapper"
+  >
+    <label
+      className=
+          ms-Label
+          {
+            box-shadow: none;
+            box-sizing: border-box;
+            color: #333333;
+            display: block;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            overflow-wrap: break-word;
+            padding-bottom: 5px;
+            padding-left: 0;
+            padding-right: 0;
+            padding-top: 5px;
+            word-wrap: break-word;
+          }
+      htmlFor="TextField0"
+    >
+      With input mask
+    </label>
+    <div
+      className="ms-TextField-fieldGroup"
+    >
+      <input
+        aria-describedby={undefined}
+        aria-invalid={false}
+        aria-label={undefined}
+        className="ms-TextField-field"
+        id="TextField0"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onInput={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        onPaste={[Function]}
+        type="text"
+        value="mask: (___) ___ - ____"
+      />
+    </div>
+  </div>
+</div>
+`;
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 02710758b5a48..4971550987533 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
@@ -9,7 +9,7 @@ import { TextField } from './TextField';
 describe('TextField', () => {
   function renderIntoDocument(element: React.ReactElement<any>): HTMLElement {
     const component = ReactTestUtils.renderIntoDocument(element);
-    const renderedDOM: Element = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
     return renderedDOM as HTMLElement;
   }
 
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 38cc67f0049f1..b3f0576d2fb88 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
@@ -3,7 +3,6 @@ import { ITextField, ITextFieldProps } from './TextField.types';
 import { Label } from '../../Label';
 import { Icon } from '../../Icon';
 import {
-  autobind,
   DelayedRender,
   BaseComponent,
   getId,
@@ -99,7 +98,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     return this.state.value;
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._isMounted = true;
     this._adjustInputHeight();
 
@@ -108,7 +107,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     }
   }
 
-  public componentWillReceiveProps(newProps: ITextFieldProps) {
+  public componentWillReceiveProps(newProps: ITextFieldProps): void {
     const { onBeforeChange } = this.props;
 
     if (newProps.value !== undefined && newProps.value !== this.state.value) {
@@ -129,11 +128,11 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     }
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     this._isMounted = false;
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       className,
       description,
@@ -150,7 +149,8 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
       onRenderAddon = this._onRenderAddon, // @deprecated
       onRenderPrefix = this._onRenderPrefix,
       onRenderSuffix = this._onRenderSuffix,
-      onRenderLabel = this._onRenderLabel
+      onRenderLabel = this._onRenderLabel,
+      onRenderDescription = this._onRenderDescription
     } = this.props;
     const { isFocused } = this.state;
     const errorMessage = this._errorMessage;
@@ -192,7 +192,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
         </div>
         { this._isDescriptionAvailable &&
           <span id={ this._descriptionId }>
-            { description && <span className={ css('ms-TextField-description', styles.description) }>{ description }</span> }
+            { onRenderDescription(this.props, this._onRenderDescription) }
             { errorMessage &&
               <div aria-live='assertive'>
                 <DelayedRender>
@@ -214,8 +214,8 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
    * Sets focus on the text field
    */
   public focus() {
-    if (this._textElement.value) {
-      this._textElement.value.focus();
+    if (this._textElement.current) {
+      this._textElement.current.focus();
     }
   }
 
@@ -223,41 +223,41 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
    * Selects the text field
    */
   public select() {
-    if (this._textElement.value) {
-      this._textElement.value.select();
+    if (this._textElement.current) {
+      this._textElement.current.select();
     }
   }
 
   /**
    * Sets the selection start of the text field to a specified value
    */
-  public setSelectionStart(value: number) {
-    if (this._textElement.value) {
-      this._textElement.value.selectionStart = value;
+  public setSelectionStart(value: number): void {
+    if (this._textElement.current) {
+      this._textElement.current.selectionStart = value;
     }
   }
 
   /**
    * Sets the selection end of the text field to a specified value
    */
-  public setSelectionEnd(value: number) {
-    if (this._textElement.value) {
-      this._textElement.value.selectionEnd = value;
+  public setSelectionEnd(value: number): void {
+    if (this._textElement.current) {
+      this._textElement.current.selectionEnd = value;
     }
   }
 
   /**
    * Gets the selection start of the text field
    */
-  public get selectionStart(): number {
-    return this._textElement.value ? this._textElement.value.selectionStart : -1;
+  public get selectionStart(): number | null {
+    return this._textElement.current ? this._textElement.current.selectionStart : -1;
   }
 
   /**
    * Gets the selection end of the text field
    */
-  public get selectionEnd(): number {
-    return this._textElement.value ? this._textElement.value.selectionEnd : -1;
+  public get selectionEnd(): number | null {
+    return this._textElement.current ? this._textElement.current.selectionEnd : -1;
   }
 
   /**
@@ -265,13 +265,13 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
    * @param start Index of the start of the selection.
    * @param end Index of the end of the selection.
    */
-  public setSelectionRange(start: number, end: number) {
-    if (this._textElement.value) {
-      this._textElement.value.setSelectionRange(start, end);
+  public setSelectionRange(start: number, end: number): void {
+    if (this._textElement.current) {
+      (this._textElement.current as HTMLInputElement).setSelectionRange(start, end);
     }
   }
 
-  private _onFocus(ev: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) {
+  private _onFocus(ev: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>): void {
     if (this.props.onFocus) {
       this.props.onFocus(ev);
     }
@@ -282,7 +282,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     }
   }
 
-  private _onBlur(ev: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) {
+  private _onBlur(ev: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>): void {
     if (this.props.onBlur) {
       this.props.onBlur(ev);
     }
@@ -293,13 +293,16 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     }
   }
 
-  @autobind
-  private _onRenderLabel(props: ITextFieldProps): JSX.Element | null {
-    const {
-      label
-    } = props;
-    if (label) {
-      return (<Label htmlFor={ this._id }>{ label }</Label>);
+  private _onRenderLabel = (props: ITextFieldProps): JSX.Element | null => {
+    if (props.label) {
+      return (<Label htmlFor={ this._id }>{ props.label }</Label>);
+    }
+    return null;
+  }
+
+  private _onRenderDescription = (props: ITextFieldProps): JSX.Element | null => {
+    if (props.description) {
+      return (<span className={ css('ms-TextField-description', styles.description) }>{ props.description }</span>);
     }
     return null;
   }
@@ -361,7 +364,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
         onInput={ this._onInputChange }
         onChange={ this._onInputChange }
         className={ this._getTextElementClassName() }
-        aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : null }
+        aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : undefined }
         aria-invalid={ !!this.state.errorMessage }
         aria-label={ this.props.ariaLabel }
         onFocus={ this._onFocus }
@@ -384,7 +387,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
         onChange={ this._onInputChange }
         className={ this._getTextElementClassName() }
         aria-label={ this.props.ariaLabel }
-        aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : null }
+        aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : undefined }
         aria-invalid={ !!this.state.errorMessage }
         onFocus={ this._onFocus }
         onBlur={ this._onBlur }
@@ -465,8 +468,8 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
   }
 
   private _adjustInputHeight(): void {
-    if (this._textElement.value && this.props.autoAdjustHeight && this.props.multiline) {
-      const textField = this._textElement.value;
+    if (this._textElement.current && this.props.autoAdjustHeight && this.props.multiline) {
+      const textField = this._textElement.current;
       textField.style.height = '';
       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 d1659ba4c307e..f7483ab9b7cc8 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
@@ -26,10 +26,10 @@ export interface ITextField {
   setSelectionRange: (start: number, end: number) => void;
 
   /** Gets the selection start of the text field. Returns -1 if there is no selection. */
-  selectionStart: number;
+  selectionStart: number | null;
 
   /** Gets the selection end of the text field. Returns -1 if there is no selection. */
-  selectionEnd: number;
+  selectionEnd: number | null;
 }
 
 /**
@@ -78,7 +78,7 @@ export interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElemen
   label?: string;
 
   /**
-   * Optional custom renderer for the label
+   * Optional custom renderer for the label.
    */
   onRenderLabel?: IRenderFunction<ITextFieldProps>;
 
@@ -87,6 +87,11 @@ export interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElemen
    */
   description?: string;
 
+  /**
+   * Optional custom renderer for the description.
+   */
+  onRenderDescription?: IRenderFunction<ITextFieldProps>;
+
   /**
    * @deprecated
    * Deprecated; use prefix instead.
@@ -110,12 +115,12 @@ export interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElemen
   onRenderAddon?: IRenderFunction<ITextFieldProps>;
 
   /**
-  * Custom render function for prefix
+  * Custom render function for prefix.
   */
   onRenderPrefix?: IRenderFunction<ITextFieldProps>;
 
   /**
-  * Custom render function for suffix
+  * Custom render function for suffix.
   */
   onRenderSuffix?: IRenderFunction<ITextFieldProps>;
 
@@ -228,6 +233,32 @@ export interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElemen
    */
   autoComplete?: 'on' | 'off';
 
+  /**
+   * The masking string that defines the mask's behavior.
+   * A backslash will escape any character.
+   * Special format characters are:
+   * '9': [0-9]
+   * 'a': [a-zA-Z]
+   * '*': [a-zA-Z0-9]
+   */
+  mask?: string;
+
+  /**
+   * The character to show in place of unfilled characters of the mask.
+   * @default '_'
+   */
+  maskChar?: string;
+
+  /**
+   * An object defining the format characters and corresponding regexp values.
+   * Default format characters: {
+   *  '9': /[0-9]/,
+   *  'a': /[a-zA-Z]/,
+   *  '*': /[a-zA-Z0-9]/
+   * }
+   */
+  maskFormat?: { [key: string]: RegExp };
+
   /**
    * Deprecated property. Serves no function.
    * @deprecated
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 15ebbbd00d519..6ed644c32ffc7 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx
@@ -3,6 +3,7 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
@@ -19,6 +20,7 @@ import { TextFieldStatus } from './TextField.checklist';
 import { TextFieldSuffixExample } from './examples/TextField.Suffix.Example';
 import { TextFieldUnderlinedExample } from './examples/TextField.Underlined.Example';
 import { TextFieldAutoCompleteExample } from './examples/TextField.AutoComplete.Example';
+import { TextFieldOnRenderDescriptionExample } from './examples/TextField.OnRenderDescription.Example';
 
 const TextFieldBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx') as string;
 const TextFieldBorderlessExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx') as string;
@@ -32,13 +34,15 @@ const TextFieldPrefixAndSuffixExampleCode = require('!raw-loader!office-ui-fabri
 const TextFieldSuffixExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Suffix.Example.tsx') as string;
 const TextFieldUnderlinedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx') as string;
 const TextFieldAutoCompleteExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.AutoComplete.Example.tsx') as string;
+const TextFieldOnRenderDescriptionExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx') as string;
 
 export class TextFieldPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='TextField'
         componentName='TextFieldExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/TextField'
         exampleCards={
           <div>
             <ExampleCard
@@ -111,6 +115,12 @@ export class TextFieldPage extends React.Component<IComponentDemoPageProps, {}>
             >
               <TextFieldCustomRenderExample />
             </ExampleCard>
+            <ExampleCard
+              title='TextField with custom description'
+              code={ TextFieldOnRenderDescriptionExampleCode }
+            >
+              <TextFieldOnRenderDescriptionExample />
+            </ExampleCard>
             <ExampleCard
               title='TextField error message variations'
               code={ TextFieldErrorMessageExampleCode }
@@ -129,43 +139,22 @@ export class TextFieldPage extends React.Component<IComponentDemoPageProps, {}>
           />
         }
         overview={
-          <div>
-            <p>
-              The TextField component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.
-            </p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/TextField/docs/TextFieldOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>Use the TextField to accept data input on a form or page.</li>
-              <li>Label the TextField with a helpful name. </li>
-              <li>Provide concise helper text that specifies what content is expected to be entered.</li>
-              <li>Provide all appropriate states for the control (static, hover, focus, engaged, unavailable, error).</li>
-              <li>When part of a form, provide clear designations for which fields are required vs. optional.</li>
-              <li>Provide all appropriate methods for submitting provided data (onEnter or a dedicated ‘Submit’ button).</li>
-              <li>Provide all appropriate methods of clearing provided data (‘X’ or something similar).</li>
-              <li>Allow for selection, copy and paste of field data.</li>
-              <li>Whenever possible, format TextField relative to the expected entry (4-digit PIN, 10-digit phone number (3 separate fields), etc).</li>
-              <li>When long entries are expected, provide a mechanism for overflow or expansion of the control itself.</li>
-              <li>Ensure that the TextField is functional through use of mouse/keyboard or touch when available.</li>
-              <li>Ensure that the TextField is accessible through screen reader and/or other accessibility tools.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/TextField/docs/TextFieldDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Don’t use a TextField to render basic copy as part of a body element of a page.</li>
-              <li>Don’t provide an unlabeled TextField and expect that users will know what to do with it.</li>
-              <li>Don’t place a TextField inline with body copy.  </li>
-              <li>Don’t be overly verbose with helper text.</li>
-              <li>Don’t occlude the entry or allow entry when the active content is not visible.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
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 5fb70d8366cdf..7df3ddcee4acd 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
@@ -34,7 +34,7 @@ exports[`TextField renders TextField correctly 1`] = `
       className="ms-TextField-fieldGroup"
     >
       <input
-        aria-describedby={null}
+        aria-describedby={undefined}
         aria-invalid={false}
         aria-label={undefined}
         className="ms-TextField-field"
diff --git a/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md
new file mode 100644
index 0000000000000..0e922b792ca5d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md
@@ -0,0 +1,5 @@
+- Don’t use a TextField to render basic copy as part of a body element of a page.
+- Don’t provide an unlabeled TextField and expect that users will know what to do with it.
+- Don’t place a TextField inline with body copy.
+- Don’t be overly verbose with helper text.
+- Don’t occlude the entry or allow entry when the active content is not visible.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDos.md b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDos.md
new file mode 100644
index 0000000000000..3d14cce44df2c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDos.md
@@ -0,0 +1,12 @@
+- Use the TextField to accept data input on a form or page.
+- Label the TextField with a helpful name.
+- Provide concise helper text that specifies what content is expected to be entered.
+- Provide all appropriate states for the control (static, hover, focus, engaged, unavailable, error).
+- When part of a form, provide clear designations for which fields are required vs. optional.
+- Provide all appropriate methods for submitting provided data (onEnter or a dedicated ‘Submit’ button).
+- Provide all appropriate methods of clearing provided data (‘X’ or something similar).
+- Allow for selection, copy and paste of field data.
+- Whenever possible, format TextField relative to the expected entry (4-digit PIN, 10-digit phone number (3 separate fields), etc).
+- When long entries are expected, provide a mechanism for overflow or expansion of the control itself.
+- Ensure that the TextField is functional through use of mouse/keyboard or touch when available.
+- Ensure that the TextField is accessible through screen reader and/or other accessibility tools.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldOverview.md b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldOverview.md
new file mode 100644
index 0000000000000..2c19bb3bb700d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldOverview.md
@@ -0,0 +1 @@
+The TextField component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.AllErrorMessage.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.AllErrorMessage.Example.tsx
index f64d386df7aae..fc5e1faac5507 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.AllErrorMessage.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.AllErrorMessage.Example.tsx
@@ -3,7 +3,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
 
 export class TextFieldAllErrorMessageExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.AutoComplete.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.AutoComplete.Example.tsx
index a2e9029cae05b..db31a9f3837db 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.AutoComplete.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.AutoComplete.Example.tsx
@@ -4,7 +4,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
 
 export class TextFieldAutoCompleteExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <form action='' className='docs-TextFieldExample'>
         <TextField
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 0413006a10d4f..b4f4e4650903c 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
@@ -1,9 +1,12 @@
 import * as React from 'react';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import {
+  TextField,
+  MaskedTextField
+} from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
 
 export class TextFieldBasicExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField
@@ -21,7 +24,11 @@ export class TextFieldBasicExample extends React.Component<any, any> {
           label='With error message'
           errorMessage='Error message'
         />
+        <MaskedTextField
+          label='With input mask'
+          mask='m\ask: (999) 999 - 9999'
+        />
       </div>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx
index a75f9aa6d4484..bdabb2a79d6dd 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx
@@ -3,7 +3,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
 
 export class TextFieldBorderlessExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField
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 8337417c498d0..ce2e628509bf6 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
@@ -18,7 +18,7 @@ export class TextFieldCustomRenderExample extends React.Component<{}, {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField onRenderLabel={ this._onRenderLabel } />
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 a9b365f259e13..3a18f8f2af7ad 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
@@ -12,7 +12,7 @@ export class TextFieldErrorMessageExample extends React.Component<{}, {}> {
     this._getErrorMessagePromise = this._getErrorMessagePromise.bind(this);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldErrorExample'>
         <TextField
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Icon.Example.tsx
index e886d1d56aa40..2e10e49823cad 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Icon.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Icon.Example.tsx
@@ -3,7 +3,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
 
 export class TextFieldIconExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField
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 480dabd284aa0..3ad5c5efaca9b 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
@@ -4,7 +4,7 @@ import './TextField.Examples.scss';
 import { lorem } from '@uifabric/example-app-base';
 
 export class TextFieldMultilineExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx
new file mode 100644
index 0000000000000..fd5b5cf49f824
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.OnRenderDescription.Example.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { TextField, ITextFieldProps } from 'office-ui-fabric-react/lib/TextField';
+import './TextField.Examples.scss';
+
+export class TextFieldOnRenderDescriptionExample extends React.Component<{}, {}> {
+  public render() {
+    return (
+      <div className='docs-TextFieldExample'>
+        <TextField
+          description={ 'A custom description that appends a link.' }
+          onRenderDescription={ this._onRenderDescription }
+        />
+      </div>
+    );
+  }
+
+  private _onRenderDescription = (props: ITextFieldProps): JSX.Element => {
+    return (
+      <div>
+        { props.description }{ ' ' }
+        <a href='#' onClick={ this._onLinkClick } >Link</a>
+      </div>);
+  }
+
+  private _onLinkClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx
index e9f43a8cf58a8..5f64d4adead6d 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx
@@ -3,7 +3,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
 
 export class TextFieldPlaceholderExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Prefix.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Prefix.Example.tsx
index eb2ce1a293cb2..fb3cdc4da3deb 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Prefix.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Prefix.Example.tsx
@@ -3,7 +3,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
 
 export class TextFieldPrefixExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.PrefixAndSuffix.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.PrefixAndSuffix.Example.tsx
index d2a5b9a69f8e6..f893f9260e4a2 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.PrefixAndSuffix.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.PrefixAndSuffix.Example.tsx
@@ -3,7 +3,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
 
 export class TextFieldPrefixAndSuffixExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Suffix.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Suffix.Example.tsx
index 498026d679824..7b2195fdcd352 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Suffix.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Suffix.Example.tsx
@@ -3,7 +3,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
 
 export class TextFieldSuffixExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx
index 9c47a9996c00c..4b50b91b822df 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx
@@ -3,7 +3,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
 
 export class TextFieldUnderlinedExample extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='docs-TextFieldExample'>
         <TextField
diff --git a/packages/office-ui-fabric-react/src/components/TextField/index.ts b/packages/office-ui-fabric-react/src/components/TextField/index.ts
index 4ec96447ffa23..20b2d0efda0b0 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/index.ts
+++ b/packages/office-ui-fabric-react/src/components/TextField/index.ts
@@ -1,2 +1,3 @@
 export * from './TextField';
 export * from './TextField.types';
+export * from './MaskedTextField/MaskedTextField';
diff --git a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.scss b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.scss
deleted file mode 100644
index 423e239624586..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@import '../../common/common';
-
-:global {
-
-  .Themes {
-    padding: 40px;
-  }
-
-  .ThemePage-colorSwatch {
-    @include focus-border();
-    margin: -10px 0;
-    line-height: 36px;
-    white-space: nowrap;
-    cursor: pointer;
-
-    &:hover {
-      background: rgba(0,0,0,.05);
-    }
-  }
-
-  .ThemePage-swatch {
-    display: inline-block;
-    width: 36px;
-    height: 36px;
-    vertical-align: middle;
-    @include ms-margin-right(5px);
-    border: 1px solid rgba(127, 127, 127, .5);
-  }
-
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.styles.ts b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.styles.ts
new file mode 100644
index 0000000000000..216e30099d13f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.styles.ts
@@ -0,0 +1,43 @@
+import { IThemePageStyleProps, IThemePageStyles } from './ThemePage.types';
+import {
+  getFocusStyle,
+  getTheme,
+} from '../../Styling';
+
+export const getStyles = (
+  props: IThemePageStyleProps
+): IThemePageStyles => {
+  const theme = getTheme();
+  return ({
+    colorSwatch: [
+      'ThemePage-colorSwatch',
+      getFocusStyle(theme),
+      {
+        margin: '-10px 0',
+        lineHeight: '36px',
+        whiteSpace: 'nowrap',
+        cursor: 'pointer',
+
+        selectors: {
+          ':hover': {
+            background: 'rgba(0,0,0,.05)',
+          }
+        }
+      }
+    ],
+
+    swatch: [
+      'ThemePage-swatch',
+      {
+        display: 'inline-block',
+        width: '36px',
+        height: '36px',
+        verticalAlign: 'middle',
+        marginRight: '5px',
+        border: '1px solid rgba(127, 127, 127, .5)',
+      }
+    ],
+
+    colorValue: 'ThemePage-colorValue',
+  });
+};
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 fea63772c11c8..031342e12c092 100644
--- a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx
@@ -1,153 +1,184 @@
 import * as React from 'react';
-import { loadTheme, FontClassNames, IPalette } from 'office-ui-fabric-react/lib/Styling';
-import { IComponentDemoPageProps, Highlight } from '@uifabric/example-app-base';
-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 } from 'office-ui-fabric-react/lib/ColorPicker';
-import './ThemePage.scss';
-const ThemeCodeExample = require('!raw-loader!office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx');
-
-export class ThemePage extends React.Component<IComponentDemoPageProps, {
-  colors: {
-    key: string;
-    name: string;
-    value: string;
-    description: string;
-  }[];
-  colorPickerProps?: {
-    targetElement: HTMLElement;
-    value: any;
-    index: number;
-  };
-}> {
-  private _list: DetailsList;
-
-  constructor(props: {}) {
+import { classNamesFunction } from '../../Utilities';
+import {
+  IPalette,
+  ISemanticColors,
+  loadTheme,
+} from '../../Styling';
+import {
+  ComponentPage,
+  IComponentDemoPageProps,
+  PageMarkdown,
+} from '@uifabric/example-app-base';
+import {
+  IThemePageStyleProps,
+  IThemePageStyles,
+  IThemePageState,
+} from './ThemePage.types';
+import {
+  defaultPalette,
+  defaultSemanticColors,
+} from './defaultTheme';
+import { getStyles } from './ThemePage.styles';
+import { Callout } from '../Callout';
+import { DetailsList, DetailsListLayoutMode } from '../../DetailsList';
+import { SelectionMode } from '../../Selection';
+import { ColorPicker } from '../ColorPicker';
+
+const getClassNames = classNamesFunction<IThemePageStyleProps, IThemePageStyles>();
+
+export class ThemePage extends React.Component<IComponentDemoPageProps, IThemePageState> {
+  constructor(props: IComponentDemoPageProps) {
     super(props);
 
     this._onPickerDismiss = this._onPickerDismiss.bind(this);
 
     this.state = {
-      colors: Object.keys(defaultTheme).map(variableName => ({
-        key: variableName,
-        name: variableName,
-        value: (defaultTheme as any)[variableName],
-        description: '',
-        colorPickerProps: undefined
-      }))
+      palette: defaultPalette,
+      semanticColors: defaultSemanticColors,
     };
   }
 
-  public render() {
-    const { colors, colorPickerProps } = this.state;
+  public render(): JSX.Element {
+    // Don't mutate state to display lists
+    const palette = [...this.state.palette];
+    const semanticColors = [...this.state.semanticColors];
+    return (
+      <ComponentPage
+        title='Themes'
+        componentName='ThemeExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Theme'
+        overview={
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md') }
+          </PageMarkdown>
+        }
+        otherSections={ [
+          {
+            title: 'Default Palette',
+            section: this._colorList(palette, 'palette')
+          },
+          {
+            title: 'Default Semantic Colors',
+            section: this._colorList(semanticColors, 'semanticColors')
+          },
+        ] }
+        isHeaderVisible={ this.props.isHeaderVisible }
+      />
+    );
+  }
 
+  private _colorList = (colors: any, list: 'palette' | 'semanticColors') => {
+    const classNames = getClassNames(getStyles);
+    const { colorPickerProps } = this.state;
     return (
-      <div className='Themes'>
-        <h1 className={ FontClassNames.xxLarge }>Themes</h1>
-        <p>The entire color palette of the controls are themeable. We provide a set of sensible defaults, but you can override all colors individually.</p>
-        <p>To override the themes, you need to call <span className='code'>loadTheme()</span> with the appropriate set of overrides:</p>
-
-        <Highlight className='typescript'>
-          { ThemeCodeExample }
-        </Highlight>
-
-        <h1 className={ FontClassNames.xLarge }>Define a theme</h1>
-        <div>
-          <DetailsList
-            ref={ this._createDetailsListRef }
-            items={ colors }
-            selectionMode={ SelectionMode.none }
-            layoutMode={ LayoutMode.fixedColumns }
-            columns={ [
-              {
-                key: 'name',
-                name: 'Name',
-                fieldName: 'name',
-                minWidth: 150,
-                maxWidth: 150
-              },
-              {
-                key: 'color',
-                name: 'Color',
-                fieldName: 'value',
-                minWidth: 200,
-                onRender: (item, index) => (
-                  <div className='ThemePage-colorSwatch' data-is-focusable='true' onClick={ this._onSwatchClicked.bind(this, item, index) }>
-                    <span className='ThemePage-swatch' style={ { backgroundColor: item.value } } />
-                    <span className='ThemePage-colorValue'>{ item.value }</span>
-                  </div>
-                )
-              },
-              {
-                key: 'desc',
-                name: 'Description',
-                fieldName: 'description',
-                minWidth: 90
-              }
-            ] }
-          />
-
-          { colorPickerProps && (
-            <Callout
-              isBeakVisible={ false }
-              gapSpace={ 10 }
-              target={ colorPickerProps.targetElement }
-              onDismiss={ this._onPickerDismiss }
-            >
-
-              <ColorPicker
-                color={ colorPickerProps.value }
-                onColorChanged={ this._onColorChanged.bind(this, colorPickerProps.index) }
-              />
-
-            </Callout>
-          ) }
-
-        </div>
+      <div>
+        <DetailsList
+          items={ colors }
+          selectionMode={ SelectionMode.none }
+          layoutMode={ DetailsListLayoutMode.fixedColumns }
+          columns={ [
+            {
+              key: 'name',
+              name: 'Name',
+              fieldName: 'name',
+              minWidth: 150,
+              maxWidth: 150
+            },
+            {
+              key: 'color',
+              name: 'Color',
+              fieldName: 'value',
+              minWidth: 200,
+              onRender: (item, index) => (
+                <div
+                  className={ classNames.colorSwatch }
+                  data-is-focusable='true'
+                  onClick={ this._onSwatchClicked.bind(this, item, index, list) }
+                >
+                  <span
+                    className={ classNames.swatch }
+                    style={ { backgroundColor: item.value } }
+                  />
+                  <span className={ classNames.colorValue }>{ item.value }</span>
+                </div>
+              )
+            },
+            {
+              key: 'desc',
+              name: 'Description',
+              fieldName: 'description',
+              minWidth: 90
+            }
+          ] }
+        />
+
+        { colorPickerProps && (
+          <Callout
+            isBeakVisible={ false }
+            gapSpace={ 10 }
+            target={ colorPickerProps.targetElement }
+            onDismiss={ this._onPickerDismiss }
+          >
+
+            <ColorPicker
+              color={ colorPickerProps.value }
+              onColorChanged={ this._onColorChanged.bind(this, colorPickerProps.index) }
+            />
+
+          </Callout>
+        ) }
 
       </div>
     );
   }
 
-  private _createDetailsListRef = (component: DetailsList) => {
-    this._list = component;
-  }
-
-  private _onSwatchClicked(item: any, index: number, ev: React.MouseEvent<HTMLElement>) {
+  private _onSwatchClicked(item: any, index: number, list: string, ev: React.MouseEvent<HTMLElement>): void {
     this.setState({
       colorPickerProps: {
         targetElement: (ev.currentTarget as HTMLElement).children[0] as HTMLElement,
         value: item.value,
-        index: index
-      }
+        index: index,
+      },
+      activeList: list
     });
   }
 
-  private _onColorChanged(index: number, newColor: string) {
-    const { colors } = this.state;
-    const color = colors[index];
-    const palette: Partial<IPalette> = {};
-
-    color.value = newColor;
-
-    for (let i = 0; i < colors.length; i++) {
-      const themeColor = colors[i];
-
-      (palette as any)[themeColor.key] = themeColor.value;
+  private _onColorChanged(index: number, newColor: string): void {
+    const { activeList } = this.state;
+    const partialPalette: Partial<IPalette> = {};
+    const partialSemanticColors: Partial<ISemanticColors> = {};
+
+    if (activeList === 'palette') {
+      const palette = [...this.state.palette];
+      const paletteColor = palette[index];
+      paletteColor.value = newColor;
+      palette[index] = paletteColor;
+      for (let i = 0; i < palette.length; i++) {
+        (palette as any)[palette[i].key] = palette[i].value;
+      }
+    } else if (activeList === 'semanticColors') {
+      const semanticColors = [...this.state.semanticColors];
+      const semanticColor = semanticColors[index];
+      semanticColor.value = newColor;
+      semanticColors[index] = semanticColor;
+      for (let i = 0; i < semanticColors.length; i++) {
+        (semanticColors as any)[semanticColors[i].key] = semanticColors[i].value;
+      }
+    } else {
+      this.setState({ activeList: undefined });
+      return undefined;
     }
 
-    loadTheme({ palette });
+    this.setState({ activeList: undefined });
+    const partialTheme = { ...partialPalette, ...partialSemanticColors };
 
-    // The theme has changed values, but color state is the same. Force an update on the list.
-    this._list.forceUpdate();
+    loadTheme({ palette: partialTheme });
   }
 
-  private _onPickerDismiss() {
+  private _onPickerDismiss(): void {
     this.setState({
       colorPickerProps: undefined
     });
   }
-
 }
diff --git a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.types.ts b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.types.ts
new file mode 100644
index 0000000000000..bae1bf0d85c9f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.types.ts
@@ -0,0 +1,31 @@
+
+import { IStyle } from '../../Styling';
+
+export type IThemePagePalette = {
+  key: string;
+  name: string;
+  value: string;
+  description: string;
+};
+
+export interface IThemePageState {
+  palette: IThemePagePalette[];
+
+  semanticColors: IThemePagePalette[];
+
+  colorPickerProps?: {
+    targetElement: HTMLElement;
+    value: any;
+    index: number;
+  };
+
+  activeList?: string;
+}
+
+export interface IThemePageStyleProps { }
+
+export interface IThemePageStyles {
+  colorSwatch: IStyle;
+  swatch: IStyle;
+  colorValue: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Theme/defaultTheme.ts b/packages/office-ui-fabric-react/src/components/Theme/defaultTheme.ts
index 4e696df67c9c9..d89b52cde3e50 100644
--- a/packages/office-ui-fabric-react/src/components/Theme/defaultTheme.ts
+++ b/packages/office-ui-fabric-react/src/components/Theme/defaultTheme.ts
@@ -1,59 +1,17 @@
-export const defaultTheme = {
-  themeDarker: '#004578',
-  themeDark: '#005a9e',
-  themeDarkAlt: '#106ebe',
-  themePrimary: '#0078d4',
-  themeSecondary: '#2b88d8',
-  themeTertiary: '#71afe5',
-  themeLight: '#c7e0f4',
-  themeLighter: '#deecf9',
-  themeLighterAlt: '#eff6fc',
+import { getTheme } from '../../Styling';
 
-  neutralDark: '#212121',
-  neutralPrimary: '#333333',
-  neutralSecondary: '#666666',
-  neutralSecondaryAlt: '#767676',
-  neutralTertiary: '#a6a6a6',
-  neutralTertiaryAlt: '#c8c8c8',
-  neutralQuaternary: '#d0d0d0',
-  neutralQuaternaryAlt: '#dadada',
-  neutralLight: '#eaeaea',
-  neutralLighter: '#f4f4f4',
-  neutralLighterAlt: '#f8f8f8',
+const defaultTheme = getTheme(true);
 
-  alert: '#d83b01',
-  alertBackground: '#deecf9',
-  black: '#000000',
-  blackTranslucent40: 'rgba(0,0,0,.4)',
-  blue: '#0078d4',
-  blueDark: '#002050',
-  blueLight: '#00bcf2',
-  blueMid: '#00188f',
-  error: '#a80000',
-  errorBackground: '#fde7e9',
-  green: '#107c10',
-  greenDark: '#004b1c',
-  greenLight: '#bad80a',
-  info: '#107c10',
-  infoBackground: '#f4f4f4',
-  magenta: '#b4009e',
-  magentaDark: '#5c005c',
-  magentaLight: '#e3008c',
-  orange: '#d83b01',
-  orangeLight: '#ff8c00',
-  orangeLighter: '#ea4300',
-  purple: '#5c2d91',
-  purpleDark: '#32145a',
-  purpleLight: '#b4a0ff',
-  red: '#e81123',
-  redDark: '#a80000',
-  success: '#107c10',
-  successBackground: '#dff6dd',
-  teal: '#008272',
-  tealDark: '#004b50',
-  tealLight: '#00b294',
-  white: '#ffffff',
-  whiteTranslucent40: 'rgba(255,255,255,.4)',
-  yellow: '#ffb900',
-  yellowLight: '#fff100'
-};
+export const defaultPalette = Object.keys(defaultTheme.palette).map(variableName => ({
+  key: variableName,
+  name: variableName,
+  value: (defaultTheme.palette as any)[variableName],
+  description: '',
+}));
+
+export const defaultSemanticColors = Object.keys(defaultTheme.semanticColors).map(variableName => ({
+  key: variableName,
+  name: variableName,
+  value: (defaultTheme.semanticColors as any)[variableName],
+  description: (defaultTheme.semanticColors as any)[variableName].indexOf('@deprecated') >= 0 ? 'Deprecated' : '',
+}));
diff --git a/packages/office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md b/packages/office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md
new file mode 100644
index 0000000000000..b117ba5ddd0bb
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md
@@ -0,0 +1,33 @@
+The entire color palette of the controls are themeable. We provide a set of sensible defaults, but you can override all colors individually.
+
+## Loading Themes
+
+To load the theme call `getTheme()`. This returns an object with all the colors and fonts set in the current theme:
+
+```tsx
+let myTheme = getTheme();
+
+// returns:
+myTheme = {
+  palette: {...}, // All the palette colors
+  semanticColors: {...}, // All the semanticColors
+  fonts: {...}, // All the font stacks like small, medium, large, etc
+  isInverted: false // Boolean of whether the theme is currently inverted
+}
+```
+
+Using `getTheme(true)` will add comments to deprecated semanticColors.
+
+## Overriding Themes
+
+To override the themes, you need to call `loadTheme()` with the appropriate set of overrides:
+
+```tsx
+import { loadTheme } from 'office-ui-fabric-react/lib/Styling';
+
+loadTheme({
+  palette: {
+    'themePrimary': 'red'
+  }
+});
+```
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx b/packages/office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx
deleted file mode 100644
index 8889c8b957c5a..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { loadTheme } from 'office-ui-fabric-react/lib/Styling';
-
-loadTheme({
-  palette: {
-    'themePrimary': 'red'
-  }
-});
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 e34aeb73d0600..3bd3d4c041cbc 100644
--- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
@@ -75,7 +75,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     loadTheme({ palette: themeRules });
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { colorPickerVisible, colorPickerSlotRule, colorPickerElement } = this.state;
 
     const fabricThemeSlots =
@@ -382,7 +382,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     return this._slotWidget(this.state.themeRules[FabricSlots[fabricSlot]]);
   }
 
-  private _colorSquareSwatchWidget(slotRule: IThemeSlotRule) {
+  private _colorSquareSwatchWidget(slotRule: IThemeSlotRule): JSX.Element {
     return (
       <div
         key={ slotRule.name }
@@ -483,7 +483,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
   private _baseColorSlotPicker = (baseSlot: BaseSlots, title: string): JSX.Element => {
     let colorChangeTimeout: number;
 
-    function _onColorChanged(newColor: string) {
+    function _onColorChanged(newColor: string): void {
       if (colorChangeTimeout) {
         clearTimeout(colorChangeTimeout);
       }
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 cbe3ffdcaa4d7..4e03cf51d04c8 100644
--- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts
+++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts
@@ -58,7 +58,7 @@ export enum SemanticColorSlots {
   disabledText
 }
 
-export function themeRulesStandardCreator() {
+export function themeRulesStandardCreator(): IThemeRules {
   const slotRules: IThemeRules = {};
 
   /*** BASE COLORS and their SHADES */
@@ -119,7 +119,7 @@ export function themeRulesStandardCreator() {
   slotRules[BaseSlots[BaseSlots.foregroundColor] + Shade[Shade.Shade7]].color = getColorFromString('#212121');
   slotRules[BaseSlots[BaseSlots.foregroundColor] + Shade[Shade.Shade8]].color = getColorFromString('#000000');
 
-  function _makeFabricSlotRule(slotName: string, inheritedBase: BaseSlots, inheritedShade: Shade, isBackgroundShade = false) {
+  function _makeFabricSlotRule(slotName: string, inheritedBase: BaseSlots, inheritedShade: Shade, isBackgroundShade = false): void {
     const inherits = slotRules[BaseSlots[inheritedBase]];
     const thisSlotRule = {
       name: slotName,
@@ -196,7 +196,7 @@ export function themeRulesStandardCreator() {
 
   /*** SEMANTIC SLOTS */
   // create the SlotRule for a semantic slot
-  function _makeSemanticSlotRule(semanticSlot: SemanticColorSlots, inheritedFabricSlot: FabricSlots) {
+  function _makeSemanticSlotRule(semanticSlot: SemanticColorSlots, inheritedFabricSlot: FabricSlots): void {
     const inherits = slotRules[FabricSlots[inheritedFabricSlot]];
     const thisSlotRule = {
       name: SemanticColorSlots[semanticSlot],
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 3349b47242544..411f0d2ba80d0 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
@@ -45,11 +45,12 @@ export const getClassNames = memoizeFunction((
       checked && 'is-checked',
       !disabled && 'is-enabled',
       disabled && 'is-disabled',
-      className,
+      theme.fonts.medium,
       {
         marginBottom: '8px'
       },
-      styles.root
+      className,
+      styles.root,
     ],
 
     label: [
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 007fc3c7b5fb2..8447805343e8e 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { mount } from 'enzyme';
 import * as ReactDOM from 'react-dom';
 import * as ReactTestUtils from 'react-dom/test-utils';
@@ -17,7 +15,7 @@ describe('Toggle', () => {
         label='Label'
       />
     );
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const labelElement = renderedDOM.querySelector('.ms-Toggle-label') as Element;
 
     expect(labelElement.textContent).toEqual('Label');
@@ -40,7 +38,7 @@ describe('Toggle', () => {
         offAriaLabel='offLabel'
       />
     );
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const labelElement = renderedDOM.querySelector('button') as Element;
 
     expect(labelElement.getAttribute('aria-label')).toEqual('offLabel');
@@ -61,7 +59,7 @@ describe('Toggle', () => {
         onChanged={ callback }
       />
     );
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const button = renderedDOM.querySelector('button') as HTMLButtonElement;
 
     ReactTestUtils.Simulate.click(button);
@@ -80,7 +78,7 @@ describe('Toggle', () => {
         checked={ false }
       />
     );
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const button = renderedDOM.querySelector('button') as HTMLButtonElement;
 
     ReactTestUtils.Simulate.click(button);
@@ -94,7 +92,7 @@ describe('Toggle', () => {
         checked={ false }
       />
     );
-    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
     const label = renderedDOM.querySelector('label');
 
     // tslint:disable-next-line:no-unused-expression
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 c1b30f5339098..73af90060565b 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
+++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
@@ -46,7 +46,7 @@ export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements
     return this.state.isChecked;
   }
 
-  public componentWillReceiveProps(newProps: IToggleProps) {
+  public componentWillReceiveProps(newProps: IToggleProps): void {
     if (newProps.checked !== undefined) {
       this.setState({
         isChecked: !!newProps.checked // convert null to false
@@ -54,7 +54,7 @@ export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     // This control is using an input element for more universal accessibility support.
     // Previously a button and the aria-pressed attribute were used. This technique works well with Narrator + Edge and NVDA + FireFox.
     // However, JAWS and VoiceOver did not announce anything when the toggle was checked or unchecked.
@@ -117,8 +117,8 @@ export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements
   }
 
   public focus() {
-    if (this._toggleButton.value) {
-      this._toggleButton.value.focus();
+    if (this._toggleButton.current) {
+      this._toggleButton.current.focus();
     }
   }
 
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 2373ebbf3031b..4f3912945d6c9 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx
@@ -3,11 +3,11 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { ToggleBasicExample } from './examples/Toggle.Basic.Example';
 import { ToggleAriaLabelExample } from './examples/Toggle.AriaLabel.Example';
-import { FontClassNames } from '../../Styling';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { ToggleStatus } from './Toggle.checklist';
 
@@ -15,11 +15,12 @@ const ToggleBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/c
 const ToggleAriaLabelExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx') as string;
 
 export class TogglePage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Toggle'
         componentName='ToggleExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Toggle'
         exampleCards={
           <div>
             <ExampleCard
@@ -46,42 +47,22 @@ export class TogglePage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <p>
-              Toggles represent a physical switch that allows users to turn things on or off. Use Toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action. Use a Toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best control to use.
-            </p>
-
-            <h2 className={ FontClassNames.xLarge }>Choosing between Toggle and Checkbox</h2>
-
-            <p>
-              For some actions, either a Toggle or a Checkbox might work. To decide which control would work better, follow these tips:
-            </p>
-
-            <ul>
-              <li>Use a Toggle for binary settings when changes become effective immediately after the user changes them.</li>
-              <li>In the above example, it's clear with the Toggle that the wireless is set to "On." But with the Checkbox, the user needs to think about whether the wireless is on now or whether they need to check the box to turn wireless on.</li>
-              <li>Use a Checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "Submit", "Next", "Ok" button to apply changes, use a Checkbox.</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Toggle/docs/ToggleOverview.md') }
+          </PageMarkdown>
         }
         bestPractices={
           <div />
         }
         dos={
-          <div>
-            <ul>
-              <li>
-                Only replace the On and Off labels if there are more specific labels for the setting. If there are short (3-4 characters) labels that represent binary opposites that are more appropriate for a particular setting, use them. For example, you might use "Show/Hide" if the setting is "Show images."
-              </li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Toggle/docs/ToggleDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              Don’t use a Toggle if the user will have to do something else or go somewhere else in order to experience its effect. If any extra step is required for changes to be effective, you should use a checkbox and corresponding "Apply" button instead of a Toggle.
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Toggle/docs/ToggleDonts.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap
index 9a28d78b4182e..779d19d615594 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap
@@ -6,6 +6,11 @@ exports[`Toggle renders toggle correctly 1`] = `
       ms-Toggle
       is-enabled
       {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        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;
         margin-bottom: 8px;
       }
 >
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDonts.md b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDonts.md
new file mode 100644
index 0000000000000..c23d592223465
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDonts.md
@@ -0,0 +1 @@
+- Don’t use a Toggle if the user will have to do something else or go somewhere else in order to experience its effect. If any extra step is required for changes to be effective, you should use a checkbox and corresponding "Apply" button instead of a Toggle.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDos.md b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDos.md
new file mode 100644
index 0000000000000..50e927ea935b9
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleDos.md
@@ -0,0 +1 @@
+- Only replace the On and Off labels if there are more specific labels for the setting. If there are short (3-4 characters) labels that represent binary opposites that are more appropriate for a particular setting, use them. For example, you might use "Show/Hide" if the setting is "Show images."
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleOverview.md b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleOverview.md
new file mode 100644
index 0000000000000..ff7eb45edd069
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Toggle/docs/ToggleOverview.md
@@ -0,0 +1,9 @@
+Toggles represent a physical switch that allows users to turn things on or off. Use Toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action. Use a Toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best control to use.
+
+## Choosing between Toggle and Checkbox
+
+For some actions, either a Toggle or a Checkbox might work. To decide which control would work better, follow these tips:
+
+- Use a Toggle for binary settings when changes become effective immediately after the user changes them.
+- In the above example, it's clear with the Toggle that the wireless is set to "On." But with the Checkbox, the user needs to think about whether the wireless is on now or whether they need to check the box to turn wireless on.
+- Use a Checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "Submit", "Next", "Ok" button to apply changes, use a Checkbox.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx b/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx
index 0076984be1c80..056f6446415d6 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 
 // tslint:disable:jsx-no-lambda
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx
index 9df6ebe041da3..1efd3e65416b5 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 
 // tslint:disable:jsx-no-lambda
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
index 3053d4e2bc288..614ce2800e6b7 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import {
   BaseComponent,
   css,
@@ -17,7 +15,7 @@ import { AnimationClassNames, mergeStyles } from '../../Styling';
 export class Tooltip extends BaseComponent<ITooltipProps, any> {
 
   // Specify default props values
-  public static defaultProps = {
+  public static defaultProps: Partial<ITooltipProps> = {
     directionalHint: DirectionalHint.topCenter,
     delay: TooltipDelay.medium,
     maxWidth: '364px',
@@ -30,7 +28,7 @@ export class Tooltip extends BaseComponent<ITooltipProps, any> {
     }
   };
 
-  public render() {
+  public render(): JSX.Element {
     const {
       targetElement,
       calloutProps,
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 0f2d029f8e6f0..9b9151684ec73 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import {
   BaseComponent,
   css,
@@ -44,7 +42,7 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
   }
 
   // Render
-  public render() {
+  public render(): JSX.Element {
     const {
       calloutProps,
       children,
@@ -54,7 +52,6 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
       directionalHintForRTL,
       hostClassName,
       id,
-      overflowMode,
       setAriaDescribedBy = true,
       tooltipProps
     } = this.props;
@@ -100,7 +97,7 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
   }
 
   private _getTargetElement(): HTMLElement | undefined {
-    if (!this._tooltipHost.value) {
+    if (!this._tooltipHost.current) {
       return undefined;
     }
 
@@ -111,14 +108,14 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
     if (overflowMode !== undefined) {
       switch (overflowMode) {
         case TooltipOverflowMode.Parent:
-          return this._tooltipHost.value.parentElement!;
+          return this._tooltipHost.current.parentElement!;
 
         case TooltipOverflowMode.Self:
-          return this._tooltipHost.value;
+          return this._tooltipHost.current;
       }
     }
 
-    return this._tooltipHost.value;
+    return this._tooltipHost.current;
   }
 
   // Show Tooltip
@@ -158,7 +155,7 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
     this._toggleTooltip(false);
   }
 
-  private _toggleTooltip(isTooltipVisible: boolean) {
+  private _toggleTooltip(isTooltipVisible: boolean): void {
     if (this.state.isTooltipVisible !== isTooltipVisible) {
       this.setState(
         { isTooltipVisible },
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 d0dea1e316a5d..da1fd15334a47 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Link } from 'office-ui-fabric-react/lib/Link';
 import { LayerHost } from 'office-ui-fabric-react/lib/Layer';
 import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { TooltipCustomExample } from './examples/Tooltip.Custom.Example';
@@ -22,11 +22,12 @@ const TooltipInteractiveExampleCode = require('!raw-loader!office-ui-fabric-reac
 const TooltipOverflowExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx') as string;
 
 export class TooltipPage extends React.Component<IComponentDemoPageProps, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Tooltip'
         componentName='TooltipExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Tooltip'
         exampleCards={
           <LayerHost>
             <ExampleCard title='Default Tooltip' code={ TooltipBasicExampleCode }>
@@ -56,11 +57,9 @@ export class TooltipPage extends React.Component<IComponentDemoPageProps, any> {
           />
         }
         overview={
-          <div>
-            <p>Tooltips supplement content associated with a specific UI component. You can use two components, and each has different props:</p>
-            <p>Tooltip: A styled tooltip that you can display on a chosen target.</p>
-            <p>TooltipHost: A tooltip wrapped in a stateful parent. Tooltip will be displayed on hover or focus and removed when focus/hover removed.</p>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/Tooltip/docs/TooltipOverview.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/docs/TooltipOverview.md b/packages/office-ui-fabric-react/src/components/Tooltip/docs/TooltipOverview.md
new file mode 100644
index 0000000000000..1b62158e8b11d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/docs/TooltipOverview.md
@@ -0,0 +1,4 @@
+Tooltips supplement content associated with a specific UI component. You can use two components, and each has different props:
+
+- **Tooltip:** A styled tooltip that you can display on a chosen target.
+- **TooltipHost:** A tooltip wrapped in a stateful parent. Tooltip will be displayed on hover or focus and removed when focus/hover removed.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx
index 8e849c64631d4..cea210eb976d1 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Basic.Example.tsx
@@ -1,6 +1,4 @@
-/* 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 { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import {
@@ -9,7 +7,7 @@ import {
 
 export class TooltipBasicExample extends BaseComponent<any, any> {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <TooltipHost content='This is the tooltip' id='myID' calloutProps={ { gapSpace: 0 } }>
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx
index 85d195fc33d61..057bff8ea3f90 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Custom.Example.tsx
@@ -1,6 +1,4 @@
-/* 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 { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import {
@@ -11,7 +9,7 @@ import {
 
 export class TooltipCustomExample extends BaseComponent<any, any> {
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <TooltipHost
         calloutProps={ { gapSpace: 20 } }
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 6bfdbe2e5c776..b7eb204a7a903 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
@@ -1,6 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import { BaseComponent, getId } from 'office-ui-fabric-react/lib/Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import {
@@ -26,7 +24,7 @@ export class TooltipOverflowExample extends BaseComponent<{}, ITooltipOverflowEx
   }
 
   // tslint:disable:jsx-no-lambda
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <DefaultButton onClick={ () => this.setState({ overflow: !this.state.overflow }) }>Toggle showing overflow</DefaultButton>
@@ -40,8 +38,8 @@ export class TooltipOverflowExample extends BaseComponent<{}, ITooltipOverflowEx
             style={ {
               overflow: 'hidden',
               textOverflow: 'ellipsis',
-              whiteSpace: this.state.overflow && 'nowrap',
-              width: this.state.overflow && '200px',
+              whiteSpace: this.state.overflow ? 'nowrap' : 'inherit',
+              width: this.state.overflow ? '200px' : 'auto',
               border: '1px solid black'
             } }
           >
@@ -49,7 +47,7 @@ export class TooltipOverflowExample extends BaseComponent<{}, ITooltipOverflowEx
               content='This is the tooltip'
               id={ this.tooltipId }
               overflowMode={ TooltipOverflowMode.Parent }
-              onTooltipToggle={ isTooltipVisible => this.setState({ isTooltipVisible }) }
+              onTooltipToggle={ (isTooltipVisible: boolean) => this.setState({ isTooltipVisible }) }
             >
               <span aria-describedby={ this.state.isTooltipVisible ? this.tooltipId : undefined }>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat lectus ut magna sodales, sit amet accumsan arcu accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </TooltipHost>
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 271599cfc9c4e..382195d8a0837 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
@@ -67,18 +67,18 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     return this.state.items;
   }
 
-  public componentWillUpdate(newProps: P, newState: IBasePickerState) {
+  public componentWillUpdate(newProps: P, newState: IBasePickerState): void {
     if (newState.items && newState.items !== this.state.items) {
       this.selection.setItems(newState.items);
     }
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this.selection.setItems(this.state.items);
     this._onResolveSuggestions = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay);
   }
 
-  public componentWillReceiveProps(newProps: P) {
+  public componentWillReceiveProps(newProps: P): void {
     const newItems = newProps.selectedItems;
 
     if (newItems) {
@@ -111,14 +111,14 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   }
 
   public focus() {
-    if (this.focusZone.value) {
-      this.focusZone.value.focus();
+    if (this.focusZone.current) {
+      this.focusZone.current.focus();
     }
   }
 
   public focusInput() {
-    if (this.input.value) {
-      this.input.value.focus();
+    if (this.input.current) {
+      this.input.current.focus();
     }
   }
 
@@ -148,10 +148,10 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   }
 
   public completeSuggestion() {
-    if (this.suggestionStore.hasSelectedSuggestion() && this.input.value) {
+    if (this.suggestionStore.hasSelectedSuggestion() && this.input.current) {
       this.addItem(this.suggestionStore.currentSuggestion!.item);
       this.updateValue('');
-      this.input.value.clear();
+      this.input.current.clear();
     }
   }
 
@@ -166,7 +166,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { suggestedDisplayValue } = this.state;
     const {
       className,
@@ -205,7 +205,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
                 onInputValueChange={ this.onInputChange }
                 suggestedDisplayValue={ suggestedDisplayValue }
                 aria-activedescendant={ activeDescendant }
-                aria-owns='suggestion-list'
+                aria-owns={ this.state.suggestionsVisible ? 'suggestion-list' : undefined }
                 aria-expanded={ !!this.state.suggestionsVisible }
                 aria-haspopup='true'
                 autoCapitalize='off'
@@ -235,7 +235,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
       <Callout
         isBeakVisible={ false }
         gapSpace={ 5 }
-        target={ this.input.value ? this.input.value.inputElement : undefined }
+        target={ this.input.current ? this.input.current.inputElement : undefined }
         onDismiss={ this.dismissSuggestions }
         directionalHint={ DirectionalHint.bottomLeftEdge }
         directionalHintForRTL={ DirectionalHint.bottomRightEdge }
@@ -280,23 +280,23 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     const { items } = this.state;
 
     if (items.length && index! >= 0) {
-      const newEl: HTMLElement | null = this.root.value && this.root.value.querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement | null;
-      if (newEl && this.focusZone.value) {
-        this.focusZone.value.focusElement(newEl);
+      const newEl: HTMLElement | null = this.root.current && this.root.current.querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement | null;
+      if (newEl && this.focusZone.current) {
+        this.focusZone.current.focusElement(newEl);
       }
     } else if (!this.canAddItems()) {
       (items[items.length - 1] as IPickerItemProps<T>).selected = true;
       this.resetFocus(items.length - 1);
     } else {
-      if (this.input.value) {
-        this.input.value.focus();
+      if (this.input.current) {
+        this.input.current.focus();
       }
     }
   }
 
   protected onSuggestionSelect() {
     if (this.suggestionStore.currentSuggestion) {
-      const currentValue: string = this.input.value ? this.input.value.value : '';
+      const currentValue: string = this.input.current ? this.input.current.value : '';
       const itemValue: string = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue);
       this.setState({ suggestedDisplayValue: itemValue });
     }
@@ -347,11 +347,11 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
       if (updatedValue !== undefined) {
         this.setState({
-          suggestionsVisible: this.input.value ? (this.input.value.value !== '' && this.input.value.inputElement === document.activeElement) : false
+          suggestionsVisible: this.input.current ? (this.input.current.value !== '' && this.input.current.inputElement === document.activeElement) : false
         });
       } else {
         this.setState({
-          suggestionsVisible: this.input.value ? this.input.value.inputElement === document.activeElement : false
+          suggestionsVisible: this.input.current ? this.input.current.inputElement === document.activeElement : false
         });
       }
 
@@ -387,7 +387,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     this.setState({
       suggestionsLoading: false,
       suggestedDisplayValue: itemValue,
-      suggestionsVisible: this.input.value ? (this.input.value.value !== '' && this.input.value.inputElement === document.activeElement) : false
+      suggestionsVisible: this.input.current ? (this.input.current.value !== '' && this.input.current.inputElement === document.activeElement) : false
     });
   }
 
@@ -424,14 +424,14 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     if (!this.state.isFocused) {
       this.setState({ isFocused: true });
       this.selection.setAllSelected(false);
-      if (this.input.value && this.input.value.value === '' && this.props.onEmptyInputFocus) {
+      if (this.input.current && this.input.current.value === '' && this.props.onEmptyInputFocus) {
         this.onEmptyInputFocus();
         this.setState({
           isMostRecentlyUsedVisible: true,
           moreSuggestionsAvailable: false,
           suggestionsVisible: true
         });
-      } else if (this.input.value && this.input.value.value) {
+      } else if (this.input.current && this.input.current.value) {
         this.setState({
           isMostRecentlyUsedVisible: false,
           suggestionsVisible: true
@@ -445,7 +445,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
   protected onInputBlur = (ev: React.FocusEvent<HTMLInputElement | Autofill>): void => {
     // Only blur if an unrelated element gets focus. Otherwise treat it as though it still has focus.
-    if (!elementContains(this.root.value!, ev.relatedTarget as HTMLElement)) {
+    if (!elementContains(this.root.current!, ev.relatedTarget as HTMLElement)) {
       this.setState({ isFocused: false });
       if (this.props.inputProps && this.props.inputProps.onBlur) {
         this.props.inputProps.onBlur(ev as React.FocusEvent<HTMLInputElement>);
@@ -466,8 +466,8 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
       case KeyCodes.tab:
       case KeyCodes.enter:
-        if (this.suggestionElement.value && this.suggestionElement.value.hasSuggestedActionSelected()) {
-          this.suggestionElement.value.executeSelectedAction();
+        if (this.suggestionElement.current && this.suggestionElement.current.hasSuggestedActionSelected()) {
+          this.suggestionElement.current.executeSelectedAction();
         } else if (!ev.shiftKey && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) {
           this.completeSuggestion();
           ev.preventDefault();
@@ -487,7 +487,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
       case KeyCodes.del:
         if (!this.props.disabled) {
-          if (this.input.value && ev.target === this.input.value.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) {
+          if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) {
             if (this.props.onRemoveSuggestion) {
               (this.props.onRemoveSuggestion as any)(this.suggestionStore.currentSuggestion!.item);
             }
@@ -501,15 +501,15 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
         break;
 
       case KeyCodes.up:
-        if (this.input.value && ev.target === this.input.value.inputElement && this.state.suggestionsVisible) {
-          if (this.suggestionElement.value && this.suggestionElement.value.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) {
+        if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible) {
+          if (this.suggestionElement.current && this.suggestionElement.current.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) {
             ev.preventDefault();
             ev.stopPropagation();
           } else {
-            if (this.suggestionElement.value && this.suggestionElement.value.hasSuggestedAction() && this.suggestionStore.currentIndex === 0) {
+            if (this.suggestionElement.current && this.suggestionElement.current.hasSuggestedAction() && this.suggestionStore.currentIndex === 0) {
               ev.preventDefault();
               ev.stopPropagation();
-              this.suggestionElement.value.focusAboveSuggestions();
+              this.suggestionElement.current.focusAboveSuggestions();
               this.suggestionStore.deselectAllSuggestions();
               this.forceUpdate();
             } else {
@@ -524,15 +524,15 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
         break;
 
       case KeyCodes.down:
-        if (this.input.value && ev.target === this.input.value.inputElement && this.state.suggestionsVisible) {
-          if (this.suggestionElement.value && this.suggestionElement.value.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) {
+        if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible) {
+          if (this.suggestionElement.current && this.suggestionElement.current.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) {
             ev.preventDefault();
             ev.stopPropagation();
           } else {
-            if (this.suggestionElement.value && this.suggestionElement.value.hasSuggestedAction() && (this.suggestionStore.currentIndex + 1) === this.suggestionStore.suggestions.length) {
+            if (this.suggestionElement.current && this.suggestionElement.current.hasSuggestedAction() && (this.suggestionStore.currentIndex + 1) === this.suggestionStore.suggestions.length) {
               ev.preventDefault();
               ev.stopPropagation();
-              this.suggestionElement.value.focusBelowSuggestions();
+              this.suggestionElement.current.focusBelowSuggestions();
               this.suggestionStore.deselectAllSuggestions();
               this.forceUpdate();
             } else {
@@ -563,8 +563,8 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     this.setState({
       isSearching: true
     }, () => {
-      if (this.props.onGetMoreResults && this.input.value) {
-        const suggestions: T[] | PromiseLike<T[]> = (this.props.onGetMoreResults as any)(this.input.value.value, this.state.items);
+      if (this.props.onGetMoreResults && this.input.current) {
+        const suggestions: T[] | PromiseLike<T[]> = (this.props.onGetMoreResults as any)(this.input.current.value, this.state.items);
         const suggestionsArray: T[] = suggestions as T[];
         const suggestionsPromiseLike: PromiseLike<T[]> = suggestions as PromiseLike<T[]>;
 
@@ -581,8 +581,8 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
         this.setState({ isSearching: false });
       }
 
-      if (this.input.value) {
-        this.input.value.focus();
+      if (this.input.current) {
+        this.input.current.focus();
       }
 
       this.setState({
@@ -594,8 +594,8 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
   protected addItemByIndex = (index: number): void => {
     this.addItem(this.suggestionStore.getSuggestionAtIndex(index).item);
-    if (this.input.value) {
-      this.input.value.clear();
+    if (this.input.current) {
+      this.input.current.clear();
     }
     this.updateValue('');
   }
@@ -645,7 +645,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   // This is protected because we may expect the backspace key to work differently in a different kind of picker.
   // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow
   protected onBackspace(ev: React.KeyboardEvent<HTMLElement>) {
-    if (this.state.items.length && !this.input.value || this.input.value && (!this.input.value.isValueSelected && this.input.value.cursorLocation === 0)) {
+    if (this.state.items.length && !this.input.current || this.input.current && (!this.input.current.isValueSelected && this.input.current.cursorLocation === 0)) {
       if (this.selection.getSelectedCount() > 0) {
         this.removeItems(this.selection.getSelection());
       } else {
@@ -675,7 +675,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
    * Controls what happens whenever there is an action that impacts the selected items.
    * If selectedItems is provided as a property then this will act as a controlled component and it will not update it's own state.
    */
-  private _updateSelectedItems(items: T[], focusIndex?: number) {
+  private _updateSelectedItems(items: T[], focusIndex?: number): void {
     if (this.props.selectedItems) {
       // If the component is a controlled component then the controlling component will need
       this.onChange(items);
@@ -686,7 +686,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  private _onSelectedItemsUpdated(items?: T[], focusIndex?: number) {
+  private _onSelectedItemsUpdated(items?: T[], focusIndex?: number): void {
     this.resetFocus(focusIndex);
     this.onChange(items);
   }
@@ -699,9 +699,9 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     }
   }
 
-  private _onValidateInput() {
-    if (this.props.onValidateInput && this.input.value && (this.props.onValidateInput as any)(this.input.value.value) !== ValidationState.invalid && this.props.createGenericItem) {
-      const itemToConvert = this.props.createGenericItem(this.input.value.value, this.props.onValidateInput(this.input.value.value));
+  private _onValidateInput(): void {
+    if (this.props.onValidateInput && this.input.current && (this.props.onValidateInput as any)(this.input.current.value) !== ValidationState.invalid && this.props.createGenericItem) {
+      const itemToConvert = this.props.createGenericItem(this.input.current.value, this.props.onValidateInput(this.input.current.value));
       this.suggestionStore.createGenericSuggestion(itemToConvert);
       this.completeSuggestion();
     }
@@ -717,7 +717,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 }
 
 export class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BasePicker<T, P> {
-  public render() {
+  public render(): JSX.Element {
     const { suggestedDisplayValue } = this.state;
     const {
       className,
@@ -745,8 +745,8 @@ export class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BaseP
                 onBlur={ this.onInputBlur }
                 onInputValueChange={ this.onInputChange }
                 suggestedDisplayValue={ suggestedDisplayValue }
-                aria-activedescendant={ 'sug-' + this.suggestionStore.currentIndex }
-                aria-owns='suggestion-list'
+                aria-activedescendant={ this.state.suggestionsVisible ? 'sug-' + this.suggestionStore.currentIndex : undefined }
+                aria-owns={ this.state.suggestionsVisible ? 'suggestion-list' : undefined }
                 aria-expanded={ !!this.state.suggestionsVisible }
                 aria-haspopup='true'
                 autoCapitalize='off'
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 49a001a4e862a..1db27244d97c0 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
@@ -24,7 +24,7 @@ export class MemberListPeoplePicker extends BasePickerListBelow<IPersonaProps, I
  */
 export class NormalPeoplePicker extends BasePeoplePicker {
   public static defaultProps = {
-    onRenderItem: (props: IPeoplePickerItemProps) => <SelectedItemDefault {...props} />,
+    onRenderItem: (props: IPeoplePickerItemProps) => <SelectedItemDefault { ...props } />,
     onRenderSuggestionsItem: (props: IPersonaProps, itemProps?: IBasePickerSuggestionsProps) => SuggestionItemNormal({ ...props }, { ...itemProps }),
     createGenericItem: createGenericItem
   };
@@ -35,7 +35,7 @@ export class NormalPeoplePicker extends BasePeoplePicker {
 */
 export class CompactPeoplePicker extends BasePeoplePicker {
   public static defaultProps = {
-    onRenderItem: (props: IPeoplePickerItemProps) => <SelectedItemDefault {...props} />,
+    onRenderItem: (props: IPeoplePickerItemProps) => <SelectedItemDefault { ...props } />,
     onRenderSuggestionsItem: (props: IPersonaProps, itemProps?: IBasePickerSuggestionsProps) => SuggestionItemSmall({ ...props }, { ...itemProps }),
     createGenericItem: createGenericItem
   };
@@ -46,13 +46,19 @@ export class CompactPeoplePicker extends BasePeoplePicker {
  */
 export class ListPeoplePicker extends MemberListPeoplePicker {
   public static defaultProps = {
-    onRenderItem: (props: IPeoplePickerItemProps) => <SelectedItemDefault {...props} />,
+    onRenderItem: (props: IPeoplePickerItemProps) => <SelectedItemDefault { ...props } />,
     onRenderSuggestionsItem: (props: IPersonaProps, itemProps?: IBasePickerSuggestionsProps) => SuggestionItemNormal({ ...props }, { ...itemProps }),
     createGenericItem: createGenericItem
   };
 }
 
-export function createGenericItem(name: string, currentValidationState: ValidationState, allowPhoneInitials: boolean) {
+export interface IGenericItem {
+  primaryText: string;
+  imageInitials: string;
+  ValidationState: ValidationState;
+}
+
+export function createGenericItem(name: string, currentValidationState: ValidationState, allowPhoneInitials: boolean): IGenericItem & { key: React.Key } {
   const personaToConvert = {
     key: name,
     primaryText: name,
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 6a928a6039e63..4c36b1929e7f5 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
@@ -26,7 +26,7 @@ export class SelectedItemWithMenu extends BaseComponent<IPeoplePickerItemWithMen
     this.state = { contextualMenuVisible: false };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       item,
       onRemoveItem,
@@ -58,7 +58,7 @@ export class SelectedItemWithMenu extends BaseComponent<IPeoplePickerItemWithMen
             <ContextualMenu
               items={ item.menuItems! }
               shouldFocusOnMount={ true }
-              target={ this._ellipsisRef.value }
+              target={ this._ellipsisRef.current }
               onDismiss={ this._onCloseContextualMenu }
               directionalHint={ DirectionalHint.bottomAutoEdge }
             />)
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerPage.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerPage.tsx
index 1a48eb28b8d41..4b6eda8380d09 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerPage.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Link } from 'office-ui-fabric-react/lib/Link';
 import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { PeoplePickerTypesExample } from './examples/PeoplePicker.Types.Example';
@@ -13,11 +13,12 @@ import { PeoplePickerStatus } from './PeoplePicker.checklist';
 const PeoplePickerTypesExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx') as string;
 
 export class PeoplePickerPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='PeoplePicker'
         componentName='PeoplePickerExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker'
         exampleCards={
           <div>
             <ExampleCard title='People Pickers' code={ PeoplePickerTypesExampleCode }>
@@ -33,37 +34,29 @@ export class PeoplePickerPage extends React.Component<IComponentDemoPageProps, {
           />
         }
         overview={
-          <div>
-            <Link target='_blank' href='http://dev.office.com/fabric/components/PeoplePicker'> PeoplePicker </Link>
-            <span> are used to pick recipients.</span>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerOverview.md') }
+          </PageMarkdown>
         }
-        isHeaderVisible={ this.props.isHeaderVisible }
         bestPractices={
-          <div>The PeoplePicker is used to select one or more entities, such as people or groups. Entry points for PeoplePickers are typically specialized TextField-like input fields known as a "well", which are used to search for recipients from a list. When a recipient is selected from the list, it is added to the well as a specialized Persona that can be interacted with or removed. Clicking on a Persona from the well should invoke a PersonaCard or open a profile pane for that recipient.</div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerBestPractices.md') }
+          </PageMarkdown>
         }
         dos={
-          <div>
-            <ul>
-              <li>Use the PeoplePicker to quickly search for a few people</li>
-              <li>Use the PeoplePicker to manage a group of people</li>
-              <li>Use the MemberList PeoplePicker to display selections below the input box</li>
-              <li>Use defaultSelectedItems when some people have already been selected</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDos.md') }
+          </PageMarkdown>
         }
         donts={
-          <div>
-            <ul>
-              <li>Use the PeoplePicker to select something other than people</li>
-              <li>Use the PeoplePicker to only display people</li>
-              <li>Use the PeoplePicker without sufficient space</li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDonts.md') }
+          </PageMarkdown>
         }
+        isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...PeoplePickerStatus}
+            { ...PeoplePickerStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerBestPractices.md b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerBestPractices.md
new file mode 100644
index 0000000000000..cb03a88771a89
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerBestPractices.md
@@ -0,0 +1 @@
+The PeoplePicker is used to select one or more entities, such as people or groups. Entry points for PeoplePickers are typically specialized TextField-like input fields known as a "well", which are used to search for recipients from a list. When a recipient is selected from the list, it is added to the well as a specialized Persona that can be interacted with or removed. Clicking on a Persona from the well should invoke a PersonaCard or open a profile pane for that recipient.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDonts.md b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDonts.md
new file mode 100644
index 0000000000000..48856a3612fc8
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDonts.md
@@ -0,0 +1,3 @@
+- Use the PeoplePicker to select something other than people
+- Use the PeoplePicker to only display people
+- Use the PeoplePicker without sufficient space
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDos.md b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDos.md
new file mode 100644
index 0000000000000..473ac1a8f39cc
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerDos.md
@@ -0,0 +1,4 @@
+- Use the PeoplePicker to quickly search for a few people
+- Use the PeoplePicker to manage a group of people
+- Use the MemberList PeoplePicker to display selections below the input box
+- Use defaultSelectedItems when some people have already been selected
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerOverview.md b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerOverview.md
new file mode 100644
index 0000000000000..63fc62c42dbf4
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/docs/PeoplePickerOverview.md
@@ -0,0 +1 @@
+<a target='_blank' href='http://dev.office.com/fabric/components/PeoplePicker'> PeoplePickers</a> are used to pick recipients.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PickersPage.tsx b/packages/office-ui-fabric-react/src/components/pickers/PickersPage.tsx
index 218833888421e..29114c2cbe151 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PickersPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PickersPage.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Link } from 'office-ui-fabric-react/lib/Link';
 import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { PickerCustomResultExample } from './examples/Picker.CustomResult.Example';
@@ -15,11 +15,12 @@ const TagPickerExampleCode = require('!raw-loader!office-ui-fabric-react/src/com
 const PickerCustomResultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx') as string;
 
 export class PickersPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Pickers'
         componentName='PickersExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/pickers'
         exampleCards={
           <div>
             <ExampleCard title='Tag Picker' code={ TagPickerExampleCode }>
@@ -38,15 +39,14 @@ export class PickersPage extends React.Component<IComponentDemoPageProps, {}> {
           />
         }
         overview={
-          <div>
-            <Link target='_blank' href='http://dev.office.com/fabric/components/Pickers'> Pickers </Link>
-            <span> are used to pick recipients.</span>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/components/pickers/docs/PickersOverview.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...PickersStatus}
+            { ...PickersStatus }
           />
         }
       />
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 c8a4d6fe6eb52..1b148db35156f 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
@@ -138,9 +138,11 @@
   }
 }
 
-.itemButton {
-  height: 100%;
+.itemButton.itemButton {
   width: 100%;
+
+  /* once this is converted to js css, then specificity won't be an issue. */
+  height: 100%;
   padding: 7px 12px;
 
   @include high-contrast {
@@ -148,7 +150,8 @@
   }
 }
 
-.closeButton {
+.closeButton.closeButton {
+  /* once this is converted to js css, then specificity won't be an issue. */
   padding: 0 4px;
   height: auto;
   width: 32px;
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.test.tsx b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.test.tsx
index bc1f2904fd6e8..057b0f6c0e91a 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.test.tsx
@@ -1,13 +1,8 @@
 
-/* 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 { Suggestions } from './Suggestions';
-import { ISuggestionItemProps } from './Suggestions.types';
 import { ISuggestionModel } from './SuggestionsController';
 
 const suggestions = [
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 a49a977a69848..28725960a4e39 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
@@ -22,7 +22,7 @@ export interface ISuggestionsState {
 }
 
 export class SuggestionsItem<T> extends BaseComponent<ISuggestionItemProps<T>, {}> {
-  public render() {
+  public render(): JSX.Element {
     const {
       suggestionModel,
       RenderSuggestion,
@@ -75,21 +75,21 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
       selectedActionType: SuggestionActionType.none,
     };
   }
-  public componentDidMount() {
+  public componentDidMount(): void {
     this.scrollSelected();
-    this.activeSelectedElement = this._selectedElement ? this._selectedElement.value : null;
+    this.activeSelectedElement = this._selectedElement ? this._selectedElement.current : null;
   }
-  public componentDidUpdate() {
+  public componentDidUpdate(): void {
     // Only scroll to selected element if the selected element has changed. Otherwise do nothing.
     // This prevents some odd behavior where scrolling the active element out of view and clicking on a selected element
     // will trigger a focus event and not give the clicked element the click.
-    if (this.activeSelectedElement && this._selectedElement.value && this.activeSelectedElement !== this._selectedElement.value) {
+    if (this.activeSelectedElement && this._selectedElement.current && this.activeSelectedElement !== this._selectedElement.current) {
       this.scrollSelected();
-      this.activeSelectedElement = this._selectedElement.value;
+      this.activeSelectedElement = this._selectedElement.current;
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       forceResolveText,
       mostRecentlyUsedHeaderText,
@@ -107,6 +107,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
       resultsMaximumNumber,
       resultsFooterFull,
       resultsFooter,
+      isResultsFooterVisible = true,
       suggestionsAvailableAlertText,
       suggestionsHeaderText,
     } = this.props;
@@ -124,7 +125,10 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
     if (isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText) {
       headerText = mostRecentlyUsedHeaderText;
     }
-    const footerTitle = (suggestions.length >= (resultsMaximumNumber as number)) ? resultsFooterFull : resultsFooter;
+    let footerTitle: ((props: ISuggestionsProps<T>) => JSX.Element) | undefined = undefined;
+    if (isResultsFooterVisible) {
+      footerTitle = (suggestions.length >= (resultsMaximumNumber as number)) ? resultsFooterFull : resultsFooter;
+    }
     const hasNoSuggestions = (!suggestions || !suggestions.length) && !isLoading;
     return (
       <div
@@ -183,9 +187,9 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
           />) : (null)
         }
         {
-          !moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ?
+          footerTitle && !moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ?
             (<div className={ css('ms-Suggestions-title', styles.suggestionsTitle) }>
-              { footerTitle && footerTitle(this.props) }
+              { footerTitle(this.props) }
             </div>) : (null)
         }
         { (!isLoading && !isSearching && suggestions && suggestions.length > 0 && suggestionsAvailableAlertText) ?
@@ -214,14 +218,14 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
           if (suggestionLength > 0) {
             this._refocusOnSuggestions(keyCode);
             newSelectedActionType = SuggestionActionType.none;
-          } else if (this._searchForMoreButton.value) {
+          } else if (this._searchForMoreButton.current) {
             newSelectedActionType = SuggestionActionType.searchMore;
           } else {
             newSelectedActionType = SuggestionActionType.forceResolve;
           }
           break;
         case SuggestionActionType.searchMore:
-          if (this._forceResolveButton.value) {
+          if (this._forceResolveButton.current) {
             newSelectedActionType = SuggestionActionType.forceResolve;
           } else if (suggestionLength > 0) {
             this._refocusOnSuggestions(keyCode);
@@ -231,7 +235,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
           }
           break;
         case SuggestionActionType.none:
-          if (currentSuggestionIndex === -1 && this._forceResolveButton.value) {
+          if (currentSuggestionIndex === -1 && this._forceResolveButton.current) {
             newSelectedActionType = SuggestionActionType.forceResolve;
           }
           break;
@@ -239,7 +243,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
     } else if (keyCode === KeyCodes.up) {
       switch (currentSelectedAction) {
         case SuggestionActionType.forceResolve:
-          if (this._searchForMoreButton.value) {
+          if (this._searchForMoreButton.current) {
             newSelectedActionType = SuggestionActionType.searchMore;
           } else if (suggestionLength > 0) {
             this._refocusOnSuggestions(keyCode);
@@ -250,12 +254,12 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
           if (suggestionLength > 0) {
             this._refocusOnSuggestions(keyCode);
             newSelectedActionType = SuggestionActionType.none;
-          } else if (this._forceResolveButton.value) {
+          } else if (this._forceResolveButton.current) {
             newSelectedActionType = SuggestionActionType.forceResolve;
           }
           break;
         case SuggestionActionType.none:
-          if (currentSuggestionIndex === -1 && this._searchForMoreButton.value) {
+          if (currentSuggestionIndex === -1 && this._searchForMoreButton.current) {
             newSelectedActionType = SuggestionActionType.searchMore;
           }
           break;
@@ -271,7 +275,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
   }
 
   public hasSuggestedAction(): boolean {
-    return this._searchForMoreButton.value !== undefined || this._forceResolveButton.value !== undefined;
+    return this._searchForMoreButton.current !== undefined || this._forceResolveButton.current !== undefined;
   }
 
   public hasSuggestedActionSelected(): boolean {
@@ -290,31 +294,31 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
   }
 
   public focusAboveSuggestions(): void {
-    if (this._forceResolveButton.value) {
+    if (this._forceResolveButton.current) {
       this.setState({ selectedActionType: SuggestionActionType.forceResolve });
-    } else if (this._searchForMoreButton.value) {
+    } else if (this._searchForMoreButton.current) {
       this.setState({ selectedActionType: SuggestionActionType.searchMore });
     }
   }
 
   public focusBelowSuggestions(): void {
-    if (this._searchForMoreButton.value) {
+    if (this._searchForMoreButton.current) {
       this.setState({ selectedActionType: SuggestionActionType.searchMore });
-    } else if (this._forceResolveButton.value) {
+    } else if (this._forceResolveButton.current) {
       this.setState({ selectedActionType: SuggestionActionType.forceResolve });
     }
   }
 
-  public focusSearchForMoreButton() {
-    if (this._searchForMoreButton.value) {
-      this._searchForMoreButton.value.focus();
+  public focusSearchForMoreButton(): void {
+    if (this._searchForMoreButton.current) {
+      this._searchForMoreButton.current.focus();
     }
   }
 
   // TODO get the element to scroll into view properly regardless of direction.
-  public scrollSelected() {
-    if (this._selectedElement.value && this._selectedElement.value.scrollIntoView !== undefined) {
-      this._selectedElement.value.scrollIntoView(false);
+  public scrollSelected(): void {
+    if (this._selectedElement.current && this._selectedElement.current.scrollIntoView !== undefined) {
+      this._selectedElement.current.scrollIntoView(false);
     }
   }
 
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 d13a5fc71ddcc..02224fe0f0981 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
@@ -100,6 +100,7 @@ export interface ISuggestionsProps<T> extends React.Props<any> {
   onSuggestionRemove?: (ev?: React.MouseEvent<HTMLElement>, item?: IPersonaProps, index?: number) => void;
   /**
    * Indicates if the text in resultsFooter or resultsFooterFull should be shown at the end of the suggestion list.
+   * @default true.
    */
   isResultsFooterVisible?: boolean;
   /**
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 140543d2b997a..3dfbf16f5e332 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
@@ -14,7 +14,7 @@ export class SuggestionsController<T> {
     this.currentIndex = -1;
   }
 
-  public updateSuggestions(newSuggestions: T[], selectedIndex?: number) {
+  public updateSuggestions(newSuggestions: T[], selectedIndex?: number): void {
     if (newSuggestions && newSuggestions.length > 0) {
       this.suggestions = this.convertSuggestionsToSuggestionItems(newSuggestions);
       this.currentIndex = 0;
@@ -79,11 +79,11 @@ export class SuggestionsController<T> {
     return this.currentSuggestion ? true : false;
   }
 
-  public removeSuggestion(index: number) {
+  public removeSuggestion(index: number): void {
     this.suggestions.splice(index, 1);
   }
 
-  public createGenericSuggestion(itemToConvert: ISuggestionModel<T>) {
+  public createGenericSuggestion(itemToConvert: ISuggestionModel<T>): void {
     const itemToAdd = this.convertSuggestionsToSuggestionItems([itemToConvert])[0];
     this.currentSuggestion = itemToAdd;
   }
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap
index dd6959f0d1788..5a8510f477361 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap
@@ -1541,9 +1541,6 @@ exports[`Suggestions renders a list properly 1`] = `
       </div>
     </div>
   </div>
-  <div
-    className="ms-Suggestions-title"
-  />
 </div>
 `;
 
@@ -3088,8 +3085,5 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
       </div>
     </div>
   </div>
-  <div
-    className="ms-Suggestions-title"
-  />
 </div>
 `;
diff --git a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx
index ae15d1f680d21..ef1173ad814c5 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx
@@ -14,11 +14,12 @@ export const TagItem = (props: IPickerItemProps<ITag>) => (
       styles.root,
       { 'is-selected': props.selected } as IDictionary,
       props.selected && styles.isSelected) }
+    role={ 'listitem' }
     key={ props.index }
     data-selection-index={ props.index }
     data-is-focusable={ !props.disabled && true }
   >
-    <span className={ css('ms-TagItem-text', styles.tagItemText) } aria-label={ props.children }>{ props.children }</span>
+    <span className={ css('ms-TagItem-text', styles.tagItemText) } aria-label={ props.children as string }>{ props.children }</span>
     { !props.disabled &&
       <span className={ css('ms-TagItem-close', styles.tagItemClose) } onClick={ props.onRemoveItem }>
         <Icon iconName='Cancel' />
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 6ba81af3ad968..999cb7667e9d9 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
@@ -10,7 +10,6 @@ exports[`Pickers BasePicker renders BasePicker correctly 1`] = `
     aria-labelledby={undefined}
     className="ms-FocusZone"
     data-focuszone-id="FocusZone0"
-    onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -45,7 +44,7 @@ exports[`Pickers BasePicker renders BasePicker correctly 1`] = `
           aria-controls="selected-suggestion-alert"
           aria-expanded={false}
           aria-haspopup="true"
-          aria-owns="suggestion-list"
+          aria-owns={undefined}
           autoCapitalize="off"
           autoComplete="off"
           className="ms-BasePicker-input"
@@ -78,7 +77,6 @@ exports[`Pickers TagPicker renders TagPicker correctly 1`] = `
     aria-labelledby={undefined}
     className="ms-FocusZone"
     data-focuszone-id="FocusZone17"
-    onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -113,7 +111,7 @@ exports[`Pickers TagPicker renders TagPicker correctly 1`] = `
           aria-controls="selected-suggestion-alert"
           aria-expanded={false}
           aria-haspopup="true"
-          aria-owns="suggestion-list"
+          aria-owns={undefined}
           autoCapitalize="off"
           autoComplete="off"
           className="ms-BasePicker-input"
diff --git a/packages/office-ui-fabric-react/src/components/pickers/docs/PickersOverview.md b/packages/office-ui-fabric-react/src/components/pickers/docs/PickersOverview.md
new file mode 100644
index 0000000000000..6d96036aa25cb
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/pickers/docs/PickersOverview.md
@@ -0,0 +1 @@
+<a target='_blank' href='http://dev.office.com/fabric/components/Pickers'> Pickers</a> are used to pick recipients.
\ No newline at end of file
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 5fc74fd7b6acc..084f4b17201fd 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
@@ -341,7 +341,7 @@ export class PickerCustomResultExample extends React.Component<{}, IPeoplePicker
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div>
         <Checkbox
@@ -382,11 +382,11 @@ export class PickerCustomResultExample extends React.Component<{}, IPeoplePicker
     });
   }
 
-  private _onFilterChanged(filterText: string, items: IFullDocumentCardProps[]) {
+  private _onFilterChanged(filterText: string, items: IFullDocumentCardProps[]): IFullDocumentCardProps[] {
     return filterText ? data.filter(item => item.documentTitleProps && item.documentTitleProps.title.toLowerCase().indexOf(filterText.toLowerCase()) === 0).filter(item => !this._listContainsDocument(item, items)) : [];
   }
 
-  private _listContainsDocument(document: IFullDocumentCardProps, items: IFullDocumentCardProps[]) {
+  private _listContainsDocument(document: IFullDocumentCardProps, items: IFullDocumentCardProps[]): boolean {
     if (!items || !items.length || items.length === 0) {
       return false;
     }
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 f8711dae7a53b..238a23c385520 100644
--- a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusPage.tsx
+++ b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusPage.tsx
@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { ComponentPage, IComponentPageSection } from '@uifabric/example-app-base';
+import {
+  ComponentPage,
+  IComponentPageSection,
+  PageMarkdown,
+} from '@uifabric/example-app-base';
 import { Link } from '../../Link';
 import { AllComponentsStatus } from './AllComponents.checklist';
 import { ComponentStatusInfoState, IComponentStatusInfoState, InformationLink } from './ComponentStatusState';
@@ -7,13 +11,14 @@ import { ComponentStatus } from './ComponentStatus';
 import './ComponentStatusPage.scss';
 
 export class ComponentStatusPage extends React.Component<{}, {}> {
-  public render() {
+  public render(): JSX.Element {
     const sections: IComponentPageSection[] = [{ title: 'Badges', section: this._renderStatusesInfo() }, { title: 'Status', section: this._renderComponents() }];
 
     return (
       <ComponentPage
         title='Components Checklist'
         componentName='Components Checklist'
+        editOverviewUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md'
         overview={ this._renderOverView() }
         otherSections={ sections }
       />
@@ -22,9 +27,9 @@ export class ComponentStatusPage extends React.Component<{}, {}> {
 
   private _renderOverView(): JSX.Element {
     return (
-      <div>
-        Badges are used to track a component's status regarding different criteria. They reflect if a component is localizable, accessible and reliable.
-    </div>
+      <PageMarkdown>
+        { require<string>('!raw-loader!office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md') }
+      </PageMarkdown>
     );
   }
 
@@ -33,7 +38,7 @@ export class ComponentStatusPage extends React.Component<{}, {}> {
       <div>
         <table className='componentTable'>
           <tbody>
-            { Object.keys(AllComponentsStatus).map((componentName, index) => {
+            { Object.keys(AllComponentsStatus).map((componentName: string, index: number) => {
               return this._renderComponent(componentName);
             }) }
           </tbody>
@@ -54,7 +59,7 @@ export class ComponentStatusPage extends React.Component<{}, {}> {
     );
   }
 
-  private _renderStatusesInfo() {
+  private _renderStatusesInfo(): JSX.Element {
     return (
       <div>
         <table className='componentTable'>
@@ -64,7 +69,7 @@ export class ComponentStatusPage extends React.Component<{}, {}> {
               <th className='componentCells'>Description</th>
               <th className='componentCells'>Success</th>
             </tr>
-            { ComponentStatusInfoState.map((name) => {
+            { ComponentStatusInfoState.map((name: IComponentStatusInfoState) => {
               return this._renderStatusInfo(name);
             }) }
           </tbody>
@@ -73,7 +78,7 @@ export class ComponentStatusPage extends React.Component<{}, {}> {
     );
   }
 
-  private _renderStatusInfo(statusInfo: IComponentStatusInfoState) {
+  private _renderStatusInfo(statusInfo: IComponentStatusInfoState): JSX.Element {
     return (
       <tr key={ statusInfo.name + '-key' }>
         <th className='componentCells'> { statusInfo.name } </th>
diff --git a/packages/office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md b/packages/office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md
new file mode 100644
index 0000000000000..b5e19a2e80c92
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/demo/ComponentStatus/docs/ComponentChecklistOverview.md
@@ -0,0 +1 @@
+Badges are used to track a component's status regarding different criteria. They reflect if a component is localizable, accessible and reliable.
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/demo/GettingStartedPage.scss b/packages/office-ui-fabric-react/src/demo/GettingStartedPage.scss
index 61cd171c17c19..563450d888728 100644
--- a/packages/office-ui-fabric-react/src/demo/GettingStartedPage.scss
+++ b/packages/office-ui-fabric-react/src/demo/GettingStartedPage.scss
@@ -24,13 +24,18 @@
     margin: -20px;
     margin-bottom: 20px;
     border-bottom: 1px solid $ms-color-neutralTertiaryAlt;
-
-    h1 {
-      margin-bottom: 0;
-    }
-
-    h3 {
-      margin-top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .ms-GettingStartedPage-title {
+      h1 {
+        margin-bottom: 0;
+      }
+
+      h3 {
+        margin-top: 0;
+      }
     }
   }
 
diff --git a/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx b/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx
index 2aeff4d2bd557..c1e3cb070a11d 100644
--- a/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx
+++ b/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx
@@ -1,89 +1,41 @@
-/* tslint:disable:jsx-no-multiline-js */
-
 import * as React from 'react';
-import { Link } from 'office-ui-fabric-react/lib/Link';
+import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import './GettingStartedPage.scss';
-import { Highlight } from '@uifabric/example-app-base';
+import { PageMarkdown } from '@uifabric/example-app-base';
 
 export class GettingStartedPage extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <div className='ms-GettingStartedPage'>
-
         <div className='ms-GettingStartedPage-banner'>
-          <h1>office-ui-fabric-react</h1>
-          <h3>A library of reusable, generic React components</h3>
-        </div>
-
-        <h2>Overview</h2>
-
-        <p>{
-          `Fabric React components are built as production ready components to be used in Microsoft products, but generalized, documented, and reusable. This enables us and our partners to more easily build great applications without spending a ton of time implementing the same things over and over.`
-        }</p>
-
-        <p>{
-          `Each component is designed to be RTL friendly, keyboard accessible, screen reader friendly, themeable, and generalized. TypeScript definition files are also included, so if you use TypeScript (which isn't a requirement), you will get compiler validation and using an editor like VS Code, you'll get intellisense. Each component is exported as a named module that can be easily imported in your code, allowing your external bundler to create small bundles that include just what you need.`
-        }</p>
-
-        <h2>Getting started</h2>
-
-        <p>{ `Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as ` }<Link href='https://webpack.github.io/' target='_blank'>Webpack</Link>{ ` which can resolve NPM package imports in your code and can bundle the specific things you import.` }</p>
-
-        <p>{
-          `Within an npm project, you should install the package and save it as a dependency:`
-        }</p>
-
-        <div className='ms-GettingStartedPage-code'>
-          <Highlight className='bash'>npm install --save office-ui-fabric-react</Highlight>
-        </div>
-
-        <p>{
-          `This will add the fabric-react project as a dependency in your package.json file, and will drop the project under node_modules/office-ui-fabric-react.`
-        }</p>
-
-        <p>{
-          `The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method. Note that wrapping your application in the Fabric component is required to support RTL, keyboard focus and other features.`
-        }</p>
-
-        <div className='ms-GettingStartedPage-code'>
-          <Highlight className='typescript'>{
-            `import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-
-const MyPage = () => (<Fabric><DefaultButton>I am a button.</DefaultButton></Fabric>);
-
-ReactDOM.render(<MyPage />, document.body.firstChild);`
-          }</Highlight>
-        </div>
-
-        <h2>Notes on module vs path-based imports</h2>
-        <p>{
-          `While it is possible to import all components as named imports from the main module entry point, it is not recommended to do so without using a bundler that supports es6 tree shaking. In other words, if you import the Button component like this:`
-        }</p>
-
-        <div className='ms-GettingStartedPage-code'>
-          <Highlight className='typescript'>{ `import { Button } from 'office-ui-fabric-react';` }</Highlight>
-        </div>
-
-        <p>{ `...this would work, but then unless you are using a tree-shaking bundler such as Rollup.js or Webpack 2, Webpack will assume you want every module exported from the main entry file to be included in your final bundle, which produces unnecessary large bundles and slows your page load down. Instead you can import the specific paths to trim down your bundle size:` }</p>
-
-        <div className='ms-GettingStartedPage-code'>
-          <Highlight className='typescript'>{
-            `import { Button } from 'office-ui-fabric-react/lib/Button';
-import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
-import { List } from 'office-ui-fabric-react/lib/List';`
-          }</Highlight>
+          <div className='ms-GettingStartedPage-title'>
+            <h1>office-ui-fabric-react</h1>
+            <h3>A library of reusable, generic React components</h3>
+          </div>
+          { this._getEditButton() }
         </div>
-
-        <h2>Using an AMD bundler like r.js</h2>
-
-        <p>{ `
-        If your project relies on AMD modules, they are dropped in the lib-amd folder. You will need to set up your bundler to handle the imports correctly. This may require you to symlink or copy the folder into your pre-bundle location.
-        ` }</p>
-
+        <PageMarkdown>
+          { require<string>('!raw-loader!office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md') }
+        </PageMarkdown>
       </div>
     );
   }
+  private _getEditButton() {
+    return (
+      <TooltipHost
+        key={ `GettingStartedPage-editButton` }
+        content={ `Edit Getting Started Page on GitHub` }
+        id={ `GettingStartedPage-editButtonHost` }
+      >
+        <IconButton
+          aria-describedby={ `GettingStartedPage-editButtonHost` }
+          iconProps={ { iconName: 'Edit' } }
+          href='https://github.com/OfficeDev/office-ui-fabric-react/edit/master/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md'
+          target='_blank'
+          rel='noopener noreferrer'
+        />
+      </TooltipHost>
+    );
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md b/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md
new file mode 100644
index 0000000000000..1addb39e0be72
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/demo/docs/GettingStartedOverview.md
@@ -0,0 +1,50 @@
+## Overview
+
+Fabric React components are built as production ready components to be used in Microsoft products, but generalized, documented, and reusable. This enables us and our partners to more easily build great applications without spending a ton of time implementing the same things over and over.
+
+Each component is designed to be RTL friendly, keyboard accessible, screen reader friendly, themeable, and generalized. TypeScript definition files are also included, so if you use TypeScript (which isn't a requirement), you will get compiler validation and using an editor like VS Code, you'll get intellisense. Each component is exported as a named module that can be easily imported in your code, allowing your external bundler to create small bundles that include just what you need.
+
+## Getting Started
+
+Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as <a href='https://webpack.github.io/' target='_blank' rel='noopener noreferrer'>Webpack</a> which can resolve NPM package imports in your code and can bundle the specific things you import.
+
+Within an npm project, you should install the package and save it as a dependency:
+
+```bash
+npm install --save office-ui-fabric-react
+```
+
+This will add the fabric-react project as a dependency in your package.json file, and will drop the project under node_modules/office-ui-fabric-react.
+
+The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method. Note that wrapping your application in the Fabric component is required to support RTL, keyboard focus and other features.
+
+```tsx
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+
+const MyPage = () => (<Fabric><DefaultButton>I am a button.</DefaultButton></Fabric>);
+
+ReactDOM.render(<MyPage />, document.body.firstChild);
+```
+
+## Notes on module vs path-based imports
+
+While it is possible to import all components as named imports from the main module entry point, it is not recommended to do so without using a bundler that supports es6 tree shaking. In other words, if you import the Button component like this:
+
+```tsx
+import { Button } from 'office-ui-fabric-react';
+```
+
+...this would work, but then unless you are using a tree-shaking bundler such as Rollup.js or Webpack 2, Webpack will assume you want every module exported from the main entry file to be included in your final bundle, which produces unnecessary large bundles and slows your page load down. Instead you can import the specific paths to trim down your bundle size:
+
+```tsx
+import { Button } from 'office-ui-fabric-react/lib/Button';
+import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { List } from 'office-ui-fabric-react/lib/List';
+```
+
+## Using an AMD bundler like r.js
+
+If your project relies on AMD modules, they are dropped in the lib-amd folder. You will need to set up your bundler to handle the imports correctly. This may require you to symlink or copy the folder into your pre-bundle location.
diff --git a/packages/office-ui-fabric-react/src/demo/index.tsx b/packages/office-ui-fabric-react/src/demo/index.tsx
index 23e30f0ccfa08..d95a64073f4b2 100644
--- a/packages/office-ui-fabric-react/src/demo/index.tsx
+++ b/packages/office-ui-fabric-react/src/demo/index.tsx
@@ -1,13 +1,10 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import * as ReactDOM from 'react-dom';
 import { App, AppDefinition } from './AppDefinition';
 import { Router, Route } from 'office-ui-fabric-react/lib/utilities/router/index';
 import { GettingStartedPage } from './GettingStartedPage';
 import { setBaseUrl } from 'office-ui-fabric-react/lib/Utilities';
-import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
-import { ComponentPage } from '@uifabric/example-app-base';
+import { ComponentPage, IAppLink, IAppLinkGroup } from '@uifabric/example-app-base';
 
 import './index.scss';
 import './ColorStyles.scss';
@@ -22,7 +19,7 @@ ComponentPage.defaultProps.areBadgesVisible = true;
 let rootElement: HTMLElement | null;
 
 // Return the anchor link from the URL without the hash
-function _extractAnchorLink(path: string) {
+function _extractAnchorLink(path: string): string {
   const index = path.lastIndexOf('#');
   if (index >= 0) {
     path = path.substr(index + 1, path.length - index);
@@ -30,33 +27,31 @@ function _extractAnchorLink(path: string) {
   return path;
 }
 
-function _scrollAnchorLink() {
+function _scrollAnchorLink(): void {
   if ((window.location.hash.match(/#/g) || []).length > 1) {
     const anchor = _extractAnchorLink(window.location.hash);
     document.getElementById(anchor)!.scrollIntoView();
   }
 }
 
-function _onLoad() {
+function _onLoad(): void {
   rootElement = rootElement || document.getElementById('content');
 
   ReactDOM.render(
-    <Fabric>
-      <Router onNewRouteLoaded={ _scrollAnchorLink }>
-        { _getRoutes() }
-      </Router>
-    </Fabric>,
+    <Router onNewRouteLoaded={ _scrollAnchorLink }>
+      { _getRoutes() }
+    </Router>,
     rootElement);
 }
 
-function _getRoutes() {
-  const routes = AppDefinition.testPages.map(page => <Route key={ page.key } path={ page.url } component={ page.component } />);
+function _getRoutes(): JSX.Element[] {
+  const routes = AppDefinition.testPages.map((page: IAppLink) => <Route key={ page.key } path={ page.url } component={ page.component } />);
   const appRoutes: JSX.Element[] = [];
 
-  AppDefinition.examplePages.forEach(group => {
+  AppDefinition.examplePages.forEach((group: IAppLinkGroup) => {
     group.links
-      .filter(link => link.hasOwnProperty('component') || link.hasOwnProperty('getComponent'))
-      .forEach((link, linkIndex) => {
+      .filter((link: IAppLink) => link.hasOwnProperty('component') || link.hasOwnProperty('getComponent'))
+      .forEach((link: IAppLink, linkIndex: number) => {
         const { component, getComponent } = link;
 
         appRoutes.push(
@@ -83,7 +78,7 @@ function _getRoutes() {
   return routes;
 }
 
-function _onUnload() {
+function _onUnload(): void {
   if (rootElement) {
     ReactDOM.unmountComponentAtNode(rootElement);
   }
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 f7b08e9ab90a6..6e59ab688ff29 100644
--- a/packages/office-ui-fabric-react/src/utilities/color/colors.ts
+++ b/packages/office-ui-fabric-react/src/utilities/color/colors.ts
@@ -19,6 +19,12 @@ export interface IHSV {
   v: number;
 }
 
+export interface IHSL {
+  h: number;
+  s: number;
+  l: number;
+}
+
 export interface IColor extends IRGB, IHSV {
   hex: string;
   str: string;
@@ -241,13 +247,13 @@ export function updateA(color: IColor, a: number): IColor {
   });
 }
 
-function _numberToPaddedHex(num: number) {
+function _numberToPaddedHex(num: number): string {
   const hex = num.toString(16);
 
   return hex.length === 1 ? '0' + hex : hex;
 }
 
-function _named(str: string) {
+function _named(str: string): IRGB | undefined {
   const c = (COLOR_VALUES as any)[str.toLowerCase()];
 
   if (c) {
@@ -260,7 +266,7 @@ function _named(str: string) {
   }
 }
 
-function _rgb(str: string) {
+function _rgb(str: string): IRGB | undefined {
   if (0 === str.indexOf('rgb(')) {
     str = (str.match(/rgb\(([^)]+)\)/)!)[1];
 
@@ -275,7 +281,7 @@ function _rgb(str: string) {
   }
 }
 
-function _rgba(str: string) {
+function _rgba(str: string): IRGB | undefined {
   if (str.indexOf('rgba(') === 0) {
     str = (str.match(/rgba\(([^)]+)\)/)!)[1];
 
@@ -290,7 +296,7 @@ function _rgba(str: string) {
   }
 }
 
-function _hex6(str: string) {
+function _hex6(str: string): IRGB | undefined {
   if ('#' === str[0] && 7 === str.length) {
     return {
       r: parseInt(str.slice(1, 3), 16),
@@ -301,7 +307,7 @@ function _hex6(str: string) {
   }
 }
 
-function _hex3(str: string) {
+function _hex3(str: string): IRGB | undefined {
   if ('#' === str[0] && 4 === str.length) {
     return {
       r: parseInt(str[1] + str[1], 16),
@@ -312,7 +318,7 @@ function _hex3(str: string) {
   }
 }
 
-function _hsl(str: string) {
+function _hsl(str: string): IRGB | undefined {
   if (str.indexOf('hsl(') === 0) {
     str = (str.match(/hsl\(([^)]+)\)/)!)[1];
     const parts = str.split(/ *, */);
@@ -328,7 +334,7 @@ function _hsl(str: string) {
   }
 }
 
-function _hsla(str: string) {
+function _hsla(str: string): IRGB | undefined {
   if (str.indexOf('hsla(') === 0) {
     str = (str.match(/hsla\(([^)]+)\)/)!)[1];
 
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 49d5bbd437fa7..dceb756e2433f 100644
--- a/packages/office-ui-fabric-react/src/utilities/color/shades.ts
+++ b/packages/office-ui-fabric-react/src/utilities/color/shades.ts
@@ -3,6 +3,7 @@
  * and the desired shade enum, this will return an appropriate shade of that color.
  */
 import {
+  IHSL,
   IColor,
   MAX_COLOR_RGBA
 } from './colors';
@@ -57,7 +58,7 @@ function _isWhite(color: IColor): boolean {
   return color.r === MAX_COLOR_RGBA && color.g === MAX_COLOR_RGBA && color.b === MAX_COLOR_RGBA;
 }
 
-function _darken(hsl: { h: number, s: number, l: number }, factor: number) {
+function _darken(hsl: IHSL, factor: number): IHSL {
   return {
     h: hsl.h,
     s: hsl.s,
@@ -65,7 +66,7 @@ function _darken(hsl: { h: number, s: number, l: number }, factor: number) {
   };
 }
 
-function _lighten(hsl: { h: number, s: number, l: number }, factor: number) {
+function _lighten(hsl: IHSL, factor: number): IHSL {
   return {
     h: hsl.h,
     s: hsl.s,
@@ -73,7 +74,7 @@ function _lighten(hsl: { h: number, s: number, l: number }, factor: number) {
   };
 }
 
-export function isDark(color: IColor) {
+export function isDark(color: IColor): boolean {
   return Colors.hsv2hsl(color.h, color.s, color.v).l < 50;
 }
 
@@ -94,7 +95,7 @@ export function isDark(color: IColor) {
  * @param {Shade} shade The shade of the base color to compute
  * @param {Boolean} isInverted Default false. Whether the given theme is inverted (reverse strongen/soften logic)
  */
-export function getShade(color: IColor, shade: Shade, isInverted = false) {
+export function getShade(color: IColor, shade: Shade, isInverted: boolean = false): IColor | null {
   'use strict';
   if (!color) {
     return null;
@@ -135,7 +136,7 @@ export function getShade(color: IColor, shade: Shade, isInverted = false) {
 // Background shades/tints are generated differently. The provided color will be guaranteed
 //   to be the darkest or lightest one. If it is <50% luminance, it will always be the darkest,
 //   otherwise it will always be the lightest.
-export function getBackgroundShade(color: IColor, shade: Shade, isInverted = false) {
+export function getBackgroundShade(color: IColor, shade: Shade, isInverted: boolean = false): IColor | null {
   'use strict';
   if (!color) {
     return null;
@@ -160,12 +161,12 @@ export function getBackgroundShade(color: IColor, shade: Shade, isInverted = fal
  * color pairs meet minimum accessibility requirements.
  * See: https://www.w3.org/TR/WCAG20/ section 1.4.3
  */
-export function getContrastRatio(color1: IColor, color2: IColor) {
+export function getContrastRatio(color1: IColor, color2: IColor): number {
   // Formula defined by: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef
   // relative luminance: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
 
   /* calculate the intermediate value needed to calculating relative luminance */
-  function _getThing(x: number) {
+  function _getThing(x: number): number {
     if (x <= .03928) {
       return x / 12.92;
     } else {
diff --git a/packages/office-ui-fabric-react/src/utilities/contextualMenu/contextualMenuUtility.ts b/packages/office-ui-fabric-react/src/utilities/contextualMenu/contextualMenuUtility.ts
index e296244f73c73..434710ccbe961 100644
--- a/packages/office-ui-fabric-react/src/utilities/contextualMenu/contextualMenuUtility.ts
+++ b/packages/office-ui-fabric-react/src/utilities/contextualMenu/contextualMenuUtility.ts
@@ -25,6 +25,6 @@ export function getIsChecked(item: IContextualMenuItem): boolean | null {
   return null;
 }
 
-export function hasSubmenu(item: IContextualMenuItem) {
+export function hasSubmenu(item: IContextualMenuItem): boolean {
   return !!(item.subMenuProps || item.items);
 }
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 4e977978f3306..cec552f76a828 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
@@ -277,9 +277,9 @@ describe('DateMath', () => {
     expect(DateMath.compareDates(dateRangeArray[0], date)).toBe(true);
 
     // Date range: week
-    let expectedDates = Array(7).map((val, i) => new Date(2017, 2, 12 + i));
+    let expectedDates = Array(7).map((val: undefined, i: number) => new Date(2017, 2, 12 + i));
     dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Sunday);
-    Array(7).forEach((val, i) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true));
+    Array(7).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true));
 
     // Date range: work week
     const workWeekDays = [
@@ -295,7 +295,7 @@ describe('DateMath', () => {
       new Date(2017, 2, 17),
     ];
     dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Sunday, workWeekDays);
-    Array(4).forEach((val, i) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true));
+    Array(4).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true));
 
     // work week defaults
     expectedDates = [
@@ -306,17 +306,17 @@ describe('DateMath', () => {
       new Date(2017, 2, 17),
     ];
     dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Sunday);
-    Array(4).forEach((val, i) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true));
+    Array(4).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true));
 
     // Date range: month
-    expectedDates = Array(31).map((val, i) => new Date(2017, 2, 1 + i));
+    expectedDates = Array(31).map((val: undefined, i: number) => new Date(2017, 2, 1 + i));
     dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Month, DayOfWeek.Sunday);
-    Array(31).forEach((val, i) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true));
+    Array(31).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true));
 
     // First day of week: Tuesday
-    expectedDates = Array(7).map((val, i) => new Date(2017, 2, 14 + i));
+    expectedDates = Array(7).map((val: undefined, i: number) => new Date(2017, 2, 14 + i));
     dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Tuesday);
-    Array(7).forEach((val, i) => expect(DateMath.compareDates(dateRangeArray[i], date)).toBe(true));
+    Array(7).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], date)).toBe(true));
   });
 
   // Generating week numbers array per month
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 7f797273c78cf..b7a7deff2215c 100644
--- a/packages/office-ui-fabric-react/src/utilities/dateMath/DateMath.ts
+++ b/packages/office-ui-fabric-react/src/utilities/dateMath/DateMath.ts
@@ -224,7 +224,7 @@ export function getWeekNumbersInMonth(
   weeksInMonth: number,
   firstDayOfWeek: DayOfWeek,
   firstWeekOfYear: FirstWeekOfYear,
-  navigatedDate: Date) {
+  navigatedDate: Date): number[] {
   const selectedYear = navigatedDate.getFullYear();
   const selectedMonth = navigatedDate.getMonth();
   let dayOfMonth = 1;
@@ -253,7 +253,7 @@ export function getWeekNumbersInMonth(
  * @param {firstWeekOfYear} firstWeekOfYear - The first week of the year (1-2)
  * @return {Number} The week's number in the year.
  */
-export function getWeekNumber(date: Date, firstDayOfWeek: DayOfWeek, firstWeekOfYear: FirstWeekOfYear) {
+export function getWeekNumber(date: Date, firstDayOfWeek: DayOfWeek, firstWeekOfYear: FirstWeekOfYear): number {
   // First four-day week of the year - minumum days count
   const fourDayWeek = 4;
 
@@ -297,7 +297,7 @@ function getStartDateOfWeek(date: Date, firstDayOfWeek: DayOfWeek): Date {
 /**
  * Helper function to assist in date comparisons
  */
-function getDatePartHashValue(date: Date) {
+function getDatePartHashValue(date: Date): number {
   // Generate date hash value created as sum of Date (up to 31 = 5 bits), Month (up to 11 = 4 bits) and Year.
   /* tslint:disable:no-bitwise */
   return date.getDate() + (date.getMonth() << 5) + (date.getFullYear() << 9);
@@ -312,7 +312,7 @@ function getDatePartHashValue(date: Date) {
 * @param {numberOfFullDays} number - week settings.
 * @return {Number} The week's number in the year.
 */
-function getWeekOfYearFullDays(date: Date, firstDayOfWeek: DayOfWeek, numberOfFullDays: number) {
+function getWeekOfYearFullDays(date: Date, firstDayOfWeek: DayOfWeek, numberOfFullDays: number): number {
   const dayOfYear = getDayOfYear(date) - 1;
   let num = (date.getDay()) - (dayOfYear % TimeConstants.DaysInOneWeek);
 
@@ -345,7 +345,7 @@ function getWeekOfYearFullDays(date: Date, firstDayOfWeek: DayOfWeek, numberOfFu
 * @param {firstDayOfWeek} DayOfWeek - The first day of week (0-6, Sunday = 0)
 * @return {Number} The week's number in the year.
 */
-function getFirstDayWeekOfYear(date: Date, firstDayOfWeek: number) {
+function getFirstDayWeekOfYear(date: Date, firstDayOfWeek: number): number {
   const num = getDayOfYear(date) - 1;
   const num2 = (date.getDay()) - (num % TimeConstants.DaysInOneWeek);
   const num3 = ((num2 - firstDayOfWeek) + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;
@@ -361,7 +361,7 @@ function getFirstDayWeekOfYear(date: Date, firstDayOfWeek: number) {
 * @param {dateWeekDay} DayOfWeek - shifts number forward to 1 week in case passed as true
 * @return {DayOfWeek} The day of week adjusted to firstDayOfWeek. E.g. when FirstDyOfWeek is Monday (1), Sunday becomes = 7 (7 > 1).
 */
-function adjustWeekDay(firstDayOfWeek: DayOfWeek, dateWeekDay: DayOfWeek) {
+function adjustWeekDay(firstDayOfWeek: DayOfWeek, dateWeekDay: DayOfWeek): number {
   return (firstDayOfWeek !== DayOfWeek.Sunday && dateWeekDay < firstDayOfWeek) ? dateWeekDay + TimeConstants.DaysInOneWeek : dateWeekDay;
 }
 
@@ -371,7 +371,7 @@ function adjustWeekDay(firstDayOfWeek: DayOfWeek, dateWeekDay: DayOfWeek) {
  * @param {Date} date - A date to find the day number for.
  * @return {Number} The day's number in the year.
  */
-function getDayOfYear(date: Date) {
+function getDayOfYear(date: Date): number {
   const month = date.getMonth();
   const year = date.getFullYear();
   let daysUntilDate = 0;
@@ -391,6 +391,6 @@ function getDayOfYear(date: Date) {
  * @param {number} year - The year to target.
  * @return {Number} The number of days in the month.
  */
-function daysInMonth(month: number, year: number) {
+function daysInMonth(month: number, year: number): number {
   return new Date(year, month, 0).getDate();
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/utilities/decorators/BaseDecorator.ts b/packages/office-ui-fabric-react/src/utilities/decorators/BaseDecorator.ts
index 0f9f765680ac8..e7d157dbe55aa 100644
--- a/packages/office-ui-fabric-react/src/utilities/decorators/BaseDecorator.ts
+++ b/packages/office-ui-fabric-react/src/utilities/decorators/BaseDecorator.ts
@@ -6,6 +6,7 @@ import {
 } from '../../Utilities';
 
 export class BaseDecorator<TProps, TState> extends BaseComponent<TProps, TState> {
+  // tslint:disable-next-line:typedef
   protected _shouldUpdateComponentRef = false;
 
   protected _composedComponentInstance: React.Component<TProps, TState>;
@@ -23,7 +24,7 @@ export class BaseDecorator<TProps, TState> extends BaseComponent<TProps, TState>
    *
    * Pass this method as the argument to the 'ref' property of the composed component.
    */
-  protected _updateComposedComponentRef(composedComponentInstance: React.Component<TProps, TState>) {
+  protected _updateComposedComponentRef(composedComponentInstance: React.Component<TProps, TState>): void {
     this._composedComponentInstance = composedComponentInstance;
     if (composedComponentInstance) {
       this._hoisted = hoistMethods(this, composedComponentInstance);
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 339e8b16d5d1d..35b02a2de1dd3 100644
--- a/packages/office-ui-fabric-react/src/utilities/decorators/withContainsFocus.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/decorators/withContainsFocus.tsx
@@ -20,11 +20,11 @@ export function withContainsFocus<TProps extends { containsFocus?: boolean }, S>
       this._handleBlur = this._handleBlur.bind(this);
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
       this._async.dispose();
     }
 
-    public render() {
+    public render(): JSX.Element {
       const { containsFocus } = this.state;
 
       return (
@@ -38,21 +38,21 @@ export function withContainsFocus<TProps extends { containsFocus?: boolean }, S>
       );
     }
 
-    public forceUpdate() {
+    public forceUpdate(): void {
       this._composedComponentInstance.forceUpdate();
     }
 
-    private _handleFocus(ev: React.FocusEvent<HTMLDivElement>) {
+    private _handleFocus(ev: React.FocusEvent<HTMLDivElement>): void {
       this._newContainsFocus = true;
       this._delayedSetContainsFocus();
     }
 
-    private _handleBlur(ev: React.FocusEvent<HTMLDivElement>) {
+    private _handleBlur(ev: React.FocusEvent<HTMLDivElement>): void {
       this._newContainsFocus = false;
       this._delayedSetContainsFocus();
     }
 
-    private _setContainsFocus() {
+    private _setContainsFocus(): void {
       if (this.state.containsFocus !== this._newContainsFocus) {
         this.setState({ containsFocus: this._newContainsFocus });
       }
diff --git a/packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.test.tsx b/packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.test.tsx
index 5e04310d6069f..07b488edbd242 100644
--- a/packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.test.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.test.tsx
@@ -5,7 +5,7 @@ import { setSSR } from '../../Utilities';
 
 @withResponsiveMode
 class Example extends React.Component<any, any> {
-  public render() {
+  public render(): JSX.Element {
     return <div />;
   }
 }
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 9196a7431f13b..9ac9396e5ba95 100644
--- a/packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.tsx
@@ -29,7 +29,7 @@ let _defaultMode: ResponsiveMode | undefined;
 /**
  * Allows a server rendered scenario to provide a default responsive mode.
  */
-export function setResponsiveMode(responsiveMode: ResponsiveMode | undefined) {
+export function setResponsiveMode(responsiveMode: ResponsiveMode | undefined): void {
   _defaultMode = responsiveMode;
 }
 
@@ -46,7 +46,7 @@ export function withResponsiveMode<TProps extends { responsiveMode?: ResponsiveM
       };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
       this._events.on(window, 'resize', () => {
         const responsiveMode = this._getResponsiveMode();
 
@@ -58,11 +58,11 @@ export function withResponsiveMode<TProps extends { responsiveMode?: ResponsiveM
       });
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
       this._events.dispose();
     }
 
-    public render() {
+    public render(): JSX.Element {
       const { responsiveMode } = this.state;
 
       return (
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 f7c2137e4a12c..a9f8378465278 100644
--- a/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx
@@ -40,7 +40,7 @@ export function withViewport<TProps extends { viewport?: IViewport }, TState>(Co
       };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
       this._onAsyncResize = this._async.debounce(
         this._onAsyncResize,
         RESIZE_DELAY,
@@ -57,11 +57,11 @@ export function withViewport<TProps extends { viewport?: IViewport }, TState>(Co
       }
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
       this._events.dispose();
     }
 
-    public render() {
+    public render(): JSX.Element {
       const { viewport } = this.state;
       const {
         skipViewportMeasures
@@ -77,18 +77,18 @@ export function withViewport<TProps extends { viewport?: IViewport }, TState>(Co
       );
     }
 
-    public forceUpdate() {
+    public forceUpdate(): void {
       this._updateViewport(true);
     }
 
-    private _onAsyncResize() {
+    private _onAsyncResize(): void {
       this._updateViewport();
     }
 
     /* Note: using lambda here because decorators don't seem to work in decorators. */
     private _updateViewport = (withForceUpdate?: boolean) => {
       const { viewport } = this.state;
-      const viewportElement = this._root.value;
+      const viewportElement = this._root.current;
       const scrollElement = findScrollableParent(viewportElement);
       const scrollRect = getRect(scrollElement);
       const clientRect = getRect(viewportElement);
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 625d6505a221b..ef629a69cb75f 100644
--- a/packages/office-ui-fabric-react/src/utilities/dragdrop/DragDropHelper.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/dragdrop/DragDropHelper.tsx
@@ -24,7 +24,7 @@ export class DragDropHelper implements IDragDropHelper {
   private readonly _distanceSquaredForDrag: number;
   private _isDragging: boolean;
   private _dragData: {
-    eventTarget: EventTarget;
+    eventTarget: EventTarget | null;
     clientX: number;
     clientY: number;
     dataTransfer?: DataTransfer;
@@ -55,7 +55,7 @@ export class DragDropHelper implements IDragDropHelper {
     this._events.on(document, 'mouseup', this._onDocumentMouseUp.bind(this), true);
   }
 
-  public dispose() {
+  public dispose(): void {
     this._events.dispose();
   }
 
@@ -237,7 +237,7 @@ export class DragDropHelper implements IDragDropHelper {
     }
   }
 
-  private _onDragEnd(target: IDragDropTarget, event: DragEvent) {
+  private _onDragEnd(target: IDragDropTarget, event: DragEvent): void {
     const { options } = target;
     if (options.onDragEnd) {
       options.onDragEnd(options.context.data, event);
@@ -247,7 +247,7 @@ export class DragDropHelper implements IDragDropHelper {
   /**
    * clear drag data when mouse up on body
    */
-  private _onMouseUp(event: MouseEvent) {
+  private _onMouseUp(event: MouseEvent): void {
     this._isDragging = false;
     if (this._dragData) {
       for (const key of Object.keys(this._activeTargets)) {
@@ -271,7 +271,7 @@ export class DragDropHelper implements IDragDropHelper {
   /**
    * clear drag data when mouse up outside of the document
    */
-  private _onDocumentMouseUp(event: MouseEvent) {
+  private _onDocumentMouseUp(event: MouseEvent): void {
     if (event.target === document.documentElement) {
       this._onMouseUp(event);
     }
@@ -282,7 +282,7 @@ export class DragDropHelper implements IDragDropHelper {
    * fire dragleave on the old target and fire dragenter to the new target
    * The target will handle style change on dragenter and dragleave events.
    */
-  private _onMouseMove(target: IDragDropTarget, event: MouseEvent) {
+  private _onMouseMove(target: IDragDropTarget, event: MouseEvent): void {
     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.
@@ -336,7 +336,7 @@ export class DragDropHelper implements IDragDropHelper {
   /**
    * when mouse leave a target while dragging some items, fire dragleave to the target
    */
-  private _onMouseLeave(target: IDragDropTarget, event: MouseEvent) {
+  private _onMouseLeave(target: IDragDropTarget, event: MouseEvent): void {
     if (this._isDragging) {
       if (this._dragData && this._dragData.dropTarget && this._dragData.dropTarget.key === target.key) {
         EventGroup.raise(target.root, 'dragleave');
@@ -348,7 +348,7 @@ export class DragDropHelper implements IDragDropHelper {
   /**
    * when mouse down on a draggable item, we start to track dragdata.
    */
-  private _onMouseDown(target: IDragDropTarget, event: MouseEvent) {
+  private _onMouseDown(target: IDragDropTarget, event: MouseEvent): void {
     if (event.button !== MOUSEDOWN_PRIMARY_BUTTON) {
       // Ignore anything except the primary button.
       return;
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 eb445c226724e..e995da28eaf2f 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
@@ -21,7 +21,7 @@ export class GridBase extends BaseComponent<IGridProps, {}> implements IGrid {
     this._id = getId();
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       items,
       columnCount,
@@ -40,7 +40,7 @@ export class GridBase extends BaseComponent<IGridProps, {}> implements IGrid {
 
     const content = (
       <table
-        {...htmlProps}
+        { ...htmlProps }
         aria-posinset={ positionInSet }
         aria-setsize={ setSize }
         id={ this._id }
@@ -49,13 +49,13 @@ export class GridBase extends BaseComponent<IGridProps, {}> implements IGrid {
       >
         <tbody>
           {
-            rowsOfItems.map((rows: any[], rowIndex: any) => {
+            rowsOfItems.map((rows: any[], rowIndex: number) => {
               return (
                 <tr
                   role={ 'row' }
                   key={ this._id + '-' + rowIndex + '-row' }
                 >
-                  { rows.map((cell, cellIndex) => {
+                  { rows.map((cell: any, cellIndex: number) => {
                     return (
                       <td
                         role={ 'presentation' }
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 8b9dd4f93b685..42d923e344cff 100644
--- a/packages/office-ui-fabric-react/src/utilities/grid/GridCell.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/grid/GridCell.tsx
@@ -13,7 +13,7 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
     id: getId('gridCell')
   };
 
-  public render() {
+  public render(): JSX.Element {
     const {
       item,
       id,
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 7cb5696286fb9..81274a20a840b 100644
--- a/packages/office-ui-fabric-react/src/utilities/positioning.test.ts
+++ b/packages/office-ui-fabric-react/src/utilities/positioning.test.ts
@@ -13,7 +13,7 @@ interface ITestValues {
   beakWidth: number;
 }
 
-function positionCalloutTest(testValues: ITestValues, alignment: DirectionalHint, validate: ITestValidation) {
+function positionCalloutTest(testValues: ITestValues, alignment: DirectionalHint, validate: ITestValidation): void {
   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);
@@ -32,7 +32,7 @@ function positionCalloutTest(testValues: ITestValues, alignment: DirectionalHint
   }
 }
 
-function validateNoBeakTest(testValues: ITestValues, alignment: DirectionalHint, validate: ITestValidation) {
+function validateNoBeakTest(testValues: ITestValues, alignment: DirectionalHint, validate: ITestValidation): void {
   const { callout, target, bounds, beakWidth } = testValues;
   const result: positioningFunctions.IElementPosition = positioningFunctions._positionElementWithinBounds(callout, target, bounds, positioningFunctions._getPositionData(alignment), beakWidth);
 
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 b4f477965e968..44c30714d61e1 100644
--- a/packages/office-ui-fabric-react/src/utilities/positioning/positioning.ts
+++ b/packages/office-ui-fabric-react/src/utilities/positioning/positioning.ts
@@ -15,7 +15,8 @@ import {
   IPositionProps,
   ICalloutPositon,
   ICalloutPositionProps,
-  RectangleEdge
+  RectangleEdge,
+  IRelativePositions
 } from './positioning.types';
 
 export class Rectangle extends FullRectangle {
@@ -126,7 +127,7 @@ export namespace positioningFunctions {
     return rect[RectangleEdge[edge]];
   }
 
-  function _setEdgeValue(rect: Rectangle, edge: RectangleEdge, value: number) {
+  function _setEdgeValue(rect: Rectangle, edge: RectangleEdge, value: number): Rectangle {
     rect[RectangleEdge[edge]] = value;
     return rect;
   }
@@ -584,7 +585,7 @@ export namespace positioningFunctions {
     return new Rectangle(rect.left, rect.right, rect.top, rect.bottom);
   }
 
-  export function _getTargetRect(bounds: Rectangle, target: Element | MouseEvent | IPoint | undefined) {
+  export function _getTargetRect(bounds: Rectangle, target: Element | MouseEvent | IPoint | undefined): Rectangle {
     let targetRectangle: Rectangle;
     if (target) {
       if ((target as MouseEvent).preventDefault) {
@@ -615,7 +616,7 @@ export namespace positioningFunctions {
   /**
    * If max height is less than zero it returns the bounds height instead.
    */
-  export function _getMaxHeightFromTargetRectangle(targetRectangle: Rectangle, targetEdge: DirectionalHint, gapSpace: number, bounds: Rectangle) {
+  export function _getMaxHeightFromTargetRectangle(targetRectangle: Rectangle, targetEdge: DirectionalHint, gapSpace: number, bounds: Rectangle): number {
     let maxHeight = 0;
 
     switch (targetEdge) {
@@ -720,7 +721,7 @@ export namespace positioningFunctions {
   export function _getRelativePositions(
     props: IPositionProps,
     hostElement: HTMLElement,
-    elementToPosition: HTMLElement) {
+    elementToPosition: HTMLElement): IRelativePositions {
     const positions = _positionCallout(props, hostElement, elementToPosition);
     const beakPosition = positions && positions.beakPosition ? positions.beakPosition.elementPosition : undefined;
     return {
@@ -731,6 +732,7 @@ export namespace positioningFunctions {
     };
   }
 }
+
 /**
  * @deprecated Do not use, this will be removed in 6.0.
  * Use either positionElement, or positionCallout
@@ -743,7 +745,7 @@ export namespace positioningFunctions {
  */
 export function getRelativePositions(props: IPositionProps,
   hostElement: HTMLElement,
-  calloutElement: HTMLElement) {
+  calloutElement: HTMLElement): IRelativePositions {
   return positioningFunctions._getRelativePositions(props, hostElement, calloutElement);
 }
 
@@ -780,7 +782,7 @@ 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: Element | MouseEvent | IPoint, targetEdge: DirectionalHint, gapSpace: number = 0, bounds?: IRectangle) {
+export function getMaxHeight(target: Element | MouseEvent | IPoint, targetEdge: DirectionalHint, gapSpace: number = 0, bounds?: IRectangle): number {
   const mouseTarget: MouseEvent = target as MouseEvent;
   const elementTarget: Element = target as Element;
   const pointTarget: IPoint = target as IPoint;
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 ee4249d64a33b..45a718819a64b 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
@@ -131,3 +131,10 @@ export interface IPositionDirectionalHintData {
 export interface IPositionedData extends IPositionDirectionalHintData {
 
 }
+
+export interface IRelativePositions {
+  calloutPosition: ICalloutPositon;
+  beakPosition: { position: IPosition | undefined, display: 'block' };
+  directionalClassName: string;
+  submenuDirection: 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 b200d640c24c6..a80323a964b2d 100644
--- a/packages/office-ui-fabric-react/src/utilities/router/Router.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/router/Router.tsx
@@ -13,22 +13,18 @@ export interface IRouterProps {
 }
 
 export class Router extends BaseComponent<IRouterProps, {}> {
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._events.on(window, 'hashchange', () => this.forceUpdate());
   }
 
-  public render() {
-    return (
-      <div>
-        { this._resolveRoute() }
-      </div>
-    );
+  public render(): JSX.Element | null {
+    return this._resolveRoute();
   }
 
-  private _getPath() {
+  private _getPath(): string {
     let path = location.hash;
     const hashIndex = path.lastIndexOf('#'),
-          questionMarkIndex = path.indexOf('?');
+      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) {
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 ca3bba566df62..33dc1f1744013 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/Selection.ts
+++ b/packages/office-ui-fabric-react/src/utilities/selection/Selection.ts
@@ -68,7 +68,7 @@ export class Selection implements ISelection {
       '';
   }
 
-  public setChangeEvents(isEnabled: boolean, suppressChange?: boolean) {
+  public setChangeEvents(isEnabled: boolean, suppressChange?: boolean): void {
     this._changeEventSuppressionCount += isEnabled ? -1 : 1;
 
     if (this._changeEventSuppressionCount === 0 && this._hasChanged) {
@@ -106,7 +106,7 @@ export class Selection implements ISelection {
    * Otherwise, shouldClear should be set to true, so that selection is
    * cleared.
    */
-  public setItems(items: IObjectWithKey[], shouldClear = true) {
+  public setItems(items: IObjectWithKey[], shouldClear: boolean = true): void {
     const newKeyToIndexMap: { [key: string]: number } = {};
     const newUnselectableIndices: { [key: string]: boolean } = {};
     let hasSelectionChanged = false;
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/SelectionPage.tsx b/packages/office-ui-fabric-react/src/utilities/selection/SelectionPage.tsx
index 7eae905e116b1..dd72b8a52bb0b 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionPage.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/selection/SelectionPage.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   ExampleCard,
   ComponentPage,
+  PageMarkdown,
   IComponentDemoPageProps
 } from '@uifabric/example-app-base';
 
@@ -10,48 +11,21 @@ import { SelectionBasicExample } from './examples/Selection.Basic.Example';
 const SelectionBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/utilities/selection/examples/Selection.Basic.Example.tsx') as string;
 
 export class SelectionPage extends React.Component<IComponentDemoPageProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return (
       <ComponentPage
         title='Selection'
         componentName='SelectionExample'
+        componentUrl='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/utilities/selection'
         exampleCards={
           <ExampleCard title='Basic Selection Example' code={ SelectionBasicExampleCode }>
             <SelectionBasicExample />
           </ExampleCard>
         }
         overview={
-          <div>
-            <p>
-              Selection is a store that maintains the selection state of items in an efficient way.
-              It exposes methods for accessing the selection state given an item index.
-              If the items change, it can resolve the selection if items move in the array.
-            </p>
-
-            <p>SelectionZone is a React component that acts as a mediator between the Selection object and elements. By providing it the Selection instance and rendering content within it, you can have it manage clicking/focus/keyboarding from the DOM and translate into selection updates. You just need to provide the right data-selection-* attributes on elements within each row/tile to give SelectionZone a hint what the intent is.</p>
-
-            <p>SelectionZone also takes in an onItemInvoked callback for when items are invoked. Invoking occurs when a user double clicks a row, presses enter while focused on it, or clicks within an element marked by the data-selection-invoke attribute.
-            </p>
-
-            <p>Available attributes:</p>
-            <ul>
-              <li>
-                <b>data-selection-index</b>: the index of the item being represented.This would go on the root of the tile/row.
-              </li>
-              <li>
-                <b>data-selection-invoke</b>: this boolean flag would be set on the element which should immediately invoke the item on click.There is also a nuanced behavior where we will clear selection and select the item if mousedown occurs on an unselected item.
-              </li>
-              <li>
-                <b>data-selection-toggle</b>: this boolean flag would be set on the element which should handle toggles.This could be a checkbox or a div.
-              </li>
-              <li>
-                <b>data-selection-toggle-all</b>: this boolean flag indicates that clicking it should toggle all selection.
-              </li>
-              <li>
-                <b>data-selection-disabled</b>: allows a branch of the DOM to be marked to ignore input events that alter selections.
-              </li>
-            </ul>
-          </div>
+          <PageMarkdown>
+            { require<string>('!raw-loader!office-ui-fabric-react/src/utilities/selection/docs/SelectionOverview.md') }
+          </PageMarkdown>
         }
         isHeaderVisible={ this.props.isHeaderVisible }
       />
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 6ca9e43284457..37253ace24266 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
@@ -1,13 +1,11 @@
-/* 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 { SelectionZone } from './SelectionZone';
 import { Selection } from './Selection';
-import { SelectionMode } from './interfaces';
+import { SelectionMode, IObjectWithKey } from './interfaces';
 
 import { KeyCodes } from '../../Utilities';
 
@@ -26,7 +24,7 @@ let _surface3: Element;
 let _onItemInvokeCalled: number;
 let _lastItemInvoked: any;
 
-function _initializeSelection(selectionMode = SelectionMode.multiple) {
+function _initializeSelection(selectionMode = SelectionMode.multiple): void {
   _selection = new Selection();
   _selection.setItems([{ key: 'a', }, { key: 'b' }, { key: 'c' }, { key: 'd' }]);
   _selectionZone = ReactTestUtils.renderIntoDocument(
@@ -34,7 +32,7 @@ function _initializeSelection(selectionMode = SelectionMode.multiple) {
       selection={ _selection }
       selectionMode={ selectionMode }
       // tslint:disable-next-line:jsx-no-lambda
-      onItemInvoked={ (item) => { _onItemInvokeCalled++; _lastItemInvoked = item; } }
+      onItemInvoked={ (item: IObjectWithKey) => { _onItemInvokeCalled++; _lastItemInvoked = item; } }
     >
 
       <button id='toggleAll' data-selection-all-toggle={ true }>Toggle all selected</button>
@@ -58,7 +56,7 @@ function _initializeSelection(selectionMode = SelectionMode.multiple) {
     </SelectionZone>
   );
 
-  _componentElement = ReactDOM.findDOMNode(_selectionZone);
+  _componentElement = ReactDOM.findDOMNode(_selectionZone) as Element;
   _toggleAll = _componentElement.querySelector('#toggleAll')!;
   _surface0 = _componentElement.querySelector('#surface0')!;
   _invoke0 = _componentElement.querySelector('#invoke0')!;
@@ -155,7 +153,7 @@ describe('SelectionZone', () => {
     expect(_selection.getSelectedCount()).toEqual(0);
   });
 
-  it('suports mouse shift click range select scenarios', () => {
+  it('supports mouse shift click range select scenarios', () => {
     _simulateClick(_surface1);
     expect(_selection.getSelectedCount()).toEqual(1);
 
@@ -232,7 +230,7 @@ describe('SelectionZone', () => {
   });
 });
 
-function _simulateClick(el: Element, eventData?: ReactTestUtils.SyntheticEventData) {
+function _simulateClick(el: Element, eventData?: ReactTestUtils.SyntheticEventData): void {
   ReactTestUtils.Simulate.mouseDown(el, eventData);
   ReactTestUtils.Simulate.focus(el, eventData);
   ReactTestUtils.Simulate.click(el, eventData);
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 1e95a600e1e7c..88cb5c3c1db90 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
@@ -12,7 +12,8 @@ import {
 } from '../../Utilities';
 import {
   ISelection,
-  SelectionMode
+  SelectionMode,
+  IObjectWithKey
 } from './interfaces';
 
 // Selection definitions:
@@ -51,7 +52,7 @@ export interface ISelectionZoneProps extends React.Props<SelectionZone> {
   selectionPreservedOnEmptyClick?: boolean;
   enterModalOnTouch?: boolean;
   isSelectedOnFocus?: boolean;
-  onItemInvoked?: (item?: any, index?: number, ev?: Event) => void;
+  onItemInvoked?: (item?: IObjectWithKey, index?: number, ev?: Event) => void;
   onItemContextMenu?: (item?: any, index?: number, ev?: Event) => void | boolean;
 }
 
@@ -71,9 +72,9 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   private _isTouch: boolean;
   private _isTouchTimeoutId: number | undefined;
 
-  public componentDidMount() {
-    const win = getWindow(this._root.value);
-    const scrollElement = findScrollableParent(this._root.value);
+  public componentDidMount(): void {
+    const win = getWindow(this._root.current);
+    const scrollElement = findScrollableParent(this._root.current);
 
     // Track the latest modifier keys globally.
     this._events.on(win, 'keydown, keyup', this._updateModifiers, true);
@@ -82,7 +83,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     this._events.on(document.body, 'touchend', this._onTouchStartCapture, true);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div
         className='ms-SelectionZone'
@@ -121,13 +122,13 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
       return;
     }
 
-    if (!elementContains(ev.target, this._root.value)) {
+    if (!elementContains(ev.target, this._root.current)) {
       return;
     }
 
     let target = ev.target as HTMLElement;
 
-    while (target !== this._root.value) {
+    while (target !== this._root.current) {
       if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
         this.ignoreNextFocus();
         break;
@@ -185,7 +186,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
       return;
     }
 
-    while (target !== this._root.value) {
+    while (target !== this._root.current) {
       if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {
         break;
       } else if (itemRoot) {
@@ -196,6 +197,8 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
         } else if (target === itemRoot && !this._isShiftPressed && !this._isCtrlPressed) {
           this._onInvokeMouseDown(ev, this._getItemIndex(itemRoot));
           break;
+        } else if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT') {
+          return;
         }
       }
 
@@ -218,7 +221,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
       return;
     }
 
-    while (target !== this._root.value) {
+    while (target !== this._root.current) {
       if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {
         this._onToggleAllClick(ev);
         break;
@@ -238,6 +241,8 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
         } else if (target === itemRoot) {
           this._onItemSurfaceClick(ev, index);
           break;
+        } else if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT') {
+          return;
         }
       }
 
@@ -267,7 +272,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   }
 
   private _isSelectionDisabled(target: HTMLElement): boolean {
-    while (target !== this._root.value) {
+    while (target !== this._root.current) {
       if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) {
         return true;
       }
@@ -296,7 +301,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     if (itemRoot && onItemInvoked && selectionMode !== SelectionMode.none && !this._isInputElement(target)) {
       const index = this._getItemIndex(itemRoot);
 
-      while (target !== this._root.value) {
+      while (target !== this._root.current) {
         if (
           this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) ||
           this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
@@ -362,7 +367,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     if (itemRoot) {
       const index = this._getItemIndex(itemRoot);
 
-      while (target !== this._root.value) {
+      while (target !== this._root.current) {
         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.
@@ -388,7 +393,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
-  private _onToggleAllClick(ev: React.MouseEvent<HTMLElement>) {
+  private _onToggleAllClick(ev: React.MouseEvent<HTMLElement>): void {
     const { selection } = this.props;
 
     const selectionMode = this._getSelectionMode();
@@ -400,7 +405,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
-  private _onToggleClick(ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, index: number) {
+  private _onToggleClick(ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, index: number): void {
     const { selection } = this.props;
 
     const selectionMode = this._getSelectionMode();
@@ -431,7 +436,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     // for checkboxes if you use a checkbox for the toggle.
   }
 
-  private _onInvokeClick(ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, index: number) {
+  private _onInvokeClick(ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, index: number): void {
     const { selection, onItemInvoked } = this.props;
 
     if (onItemInvoked) {
@@ -441,7 +446,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
-  private _onItemSurfaceClick(ev: React.SyntheticEvent<HTMLElement>, index: number) {
+  private _onItemSurfaceClick(ev: React.SyntheticEvent<HTMLElement>, index: number): void {
     const { selection } = this.props;
     const isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
 
@@ -460,7 +465,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
-  private _onInvokeMouseDown(ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, index: number) {
+  private _onInvokeMouseDown(ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, index: number): void {
     const { selection } = this.props;
 
     // Only do work if item is not selected.
@@ -471,7 +476,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     this._clearAndSelectIndex(index);
   }
 
-  private _tryClearOnEmptyClick(ev: MouseEvent) {
+  private _tryClearOnEmptyClick(ev: MouseEvent): void {
     if (
       !this.props.selectionPreservedOnEmptyClick &&
       this._isNonHandledClick(ev.target as HTMLElement)
@@ -480,7 +485,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
-  private _clearAndSelectIndex(index: number) {
+  private _clearAndSelectIndex(index: number): void {
     const { selection } = this.props;
     const isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index);
 
@@ -500,7 +505,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    * We need to track the modifier key states so that when focus events occur, which do not contain
    * modifier states in the Event object, we know how to behave.
    */
-  private _updateModifiers(ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) {
+  private _updateModifiers(ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>): void {
     this._isShiftPressed = ev.shiftKey;
     this._isCtrlPressed = ev.ctrlKey;
     this._isMetaPressed = ev.metaKey;
@@ -509,7 +514,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   private _findItemRoot(target: HTMLElement): HTMLElement | undefined {
     const { selection } = this.props;
 
-    while (target !== this._root.value) {
+    while (target !== this._root.current) {
       const indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME);
       const index = Number(indexValue);
 
@@ -520,7 +525,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
       target = getParent(target) as HTMLElement;
     }
 
-    if (target === this._root.value) {
+    if (target === this._root.current) {
       return undefined;
     }
 
@@ -534,7 +539,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   private _hasAttribute(element: HTMLElement, attributeName: string): boolean {
     let isToggle = false;
 
-    while (!isToggle && element !== this._root.value) {
+    while (!isToggle && element !== this._root.current) {
       isToggle = element.getAttribute(attributeName) === 'true';
       element = getParent(element) as HTMLElement;
     }
@@ -562,7 +567,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     return true;
   }
 
-  private _handleNextFocus(handleFocus: boolean) {
+  private _handleNextFocus(handleFocus: boolean): void {
     if (this._shouldHandleFocusTimeoutId) {
       this._async.clearTimeout(this._shouldHandleFocusTimeoutId);
       this._shouldHandleFocusTimeoutId = undefined;
@@ -577,7 +582,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     }
   }
 
-  private _setIsTouch(isTouch: boolean) {
+  private _setIsTouch(isTouch: boolean): void {
     if (this._isTouchTimeoutId) {
       this._async.clearTimeout(this._isTouchTimeoutId);
       this._isTouchTimeoutId = undefined;
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/docs/SelectionOverview.md b/packages/office-ui-fabric-react/src/utilities/selection/docs/SelectionOverview.md
new file mode 100644
index 0000000000000..fe073967737db
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/utilities/selection/docs/SelectionOverview.md
@@ -0,0 +1,15 @@
+Selection is a store that maintains the selection state of items in an efficient way.
+It exposes methods for accessing the selection state given an item index.
+If the items change, it can resolve the selection if items move in the array.
+
+SelectionZone is a React component that acts as a mediator between the Selection object and elements. By providing it the Selection instance and rendering content within it, you can have it manage clicking/focus/keyboarding from the DOM and translate into selection updates. You just need to provide the right data-selection-* attributes on elements within each row/tile to give SelectionZone a hint what the intent is.
+
+SelectionZone also takes in an onItemInvoked callback for when items are invoked. Invoking occurs when a user double clicks a row, presses enter while focused on it, or clicks within an element marked by the data-selection-invoke attribute.
+
+Available attributes:
+
+- **data-selection-index:** the index of the item being represented.This would go on the root of the tile/row.
+- **data-selection-invoke:** this boolean flag would be set on the element which should immediately invoke the item on click.There is also a nuanced behavior where we will clear selection and select the item if mousedown occurs on an unselected item.
+- **data-selection-toggle:** this boolean flag would be set on the element which should handle toggles.This could be a checkbox or a div.
+- **data-selection-toggle-all:** this boolean flag indicates that clicking it should toggle all selection.
+- **data-selection-disabled:** allows a branch of the DOM to be marked to ignore input events that alter selections.
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 e0b1e06df8b38..26859311ce352 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
@@ -34,7 +34,7 @@ export interface ISelectionItemExampleProps {
  * The SelectionItemExample controls and displays the selection state of a single item
  */
 export class SelectionItemExample extends React.Component<ISelectionItemExampleProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     const { item, itemIndex, selection } = this.props;
     let isSelected = false;
 
@@ -82,11 +82,11 @@ export class SelectionBasicExample extends React.Component<{}, ISelectionBasicEx
     this.state.selection.setItems(this.state.items as IObjectWithKey[], false);
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._hasMounted = true;
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { items, selection } = this.state;
 
     return (
@@ -96,9 +96,9 @@ export class SelectionBasicExample extends React.Component<{}, ISelectionBasicEx
           <SelectionZone
             selection={ selection }
             // tslint:disable-next-line:jsx-no-lambda
-            onItemInvoked={ (item) => alert('item invoked: ' + item.name) }
+            onItemInvoked={ this._alertItem }
           >
-            { items.map((item, index) => (
+            { items.map((item: { key: string | number }, index: number) => (
               <SelectionItemExample
                 ref={ 'detailsGroup_' + index }
                 key={ item.key }
@@ -113,18 +113,20 @@ export class SelectionBasicExample extends React.Component<{}, ISelectionBasicEx
     );
   }
 
-  private _onSelectionChanged() {
+  private _alertItem = (item: { key?: React.Key, name: React.ReactText }): void => alert('item invoked: ' + item.name);
+
+  private _onSelectionChanged(): void {
     if (this._hasMounted) {
       this.forceUpdate();
     }
   }
 
-  private _onToggleSelectAll() {
+  private _onToggleSelectAll(): void {
     const { selection } = this.state;
     selection.toggleAllSelected();
   }
 
-  private _onSelectionModeChanged(ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem) {
+  private _onSelectionModeChanged(ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem): void {
     this.setState((previousState: ISelectionBasicExampleState) => {
       const newSelection = new Selection({
         onSelectionChanged: this._onSelectionChanged,
@@ -139,7 +141,7 @@ export class SelectionBasicExample extends React.Component<{}, ISelectionBasicEx
     });
   }
 
-  private _onCanSelectChanged(ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem) {
+  private _onCanSelectChanged(ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem): void {
     const canSelectItem = (menuItem.data === 'vowels') ? this._canSelectItem : undefined;
 
     this.setState((previousState: ISelectionBasicExampleState) => {
diff --git a/packages/office-ui-fabric-react/tslint.json b/packages/office-ui-fabric-react/tslint.json
index 7d6cf89d5c8c0..9dcefdf589368 100644
--- a/packages/office-ui-fabric-react/tslint.json
+++ b/packages/office-ui-fabric-react/tslint.json
@@ -8,10 +8,9 @@
       false,
       140
     ],
-    "no-unused-variable": false,
     "no-any": false,
     "typedef": [
       false
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/packages/styling/CHANGELOG.json b/packages/styling/CHANGELOG.json
index 836a4130eb448..9ee0d0bf084f5 100644
--- a/packages/styling/CHANGELOG.json
+++ b/packages/styling/CHANGELOG.json
@@ -1,6 +1,68 @@
 {
   "name": "@uifabric/styling",
   "entries": [
+    {
+      "version": "5.25.0",
+      "tag": "@uifabric/styling_v5.25.0",
+      "date": "Thu, 19 Apr 2018 00:17:37 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "7d066299cd2f3a13014ff2a43a2b2f76a0efb0d7",
+            "comment": "PulsingBeaconAnimationStyles: Distinguish between single and double pulse."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.24.0",
+      "tag": "@uifabric/styling_v5.24.0",
+      "date": "Wed, 18 Apr 2018 10:15:04 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "4efff92981d7301ac16bc8a2cbd7624585f9c42b",
+            "comment": "Add opt-in @deprecated comments"
+          }
+        ],
+        "patch": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "4efff92981d7301ac16bc8a2cbd7624585f9c42b",
+            "comment": "Fix deprecated semantic slots returning empty strings"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.23.1",
+      "tag": "@uifabric/styling_v5.23.1",
+      "date": "Mon, 16 Apr 2018 10:23:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4",
+            "comment": "Removing module entry temporarily. (Will be added back in 6.0.)"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e",
+            "comment": "Updating build to React 16.3.1."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.23.0 <6.0.0` to `>=5.24.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.0 <6.0.0` to `>=5.15.1 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.23.0",
       "tag": "@uifabric/styling_v5.23.0",
diff --git a/packages/styling/CHANGELOG.md b/packages/styling/CHANGELOG.md
index 1a3a1b6bffc56..063c8f6bdf65c 100644
--- a/packages/styling/CHANGELOG.md
+++ b/packages/styling/CHANGELOG.md
@@ -1,6 +1,32 @@
 # Change Log - @uifabric/styling
 
-This log was last generated on Tue, 10 Apr 2018 17:37:28 GMT and should not be manually modified.
+This log was last generated on Thu, 19 Apr 2018 00:17:37 GMT and should not be manually modified.
+
+## 5.25.0
+Thu, 19 Apr 2018 00:17:37 GMT
+
+### Minor changes
+
+- PulsingBeaconAnimationStyles: Distinguish between single and double pulse.
+
+## 5.24.0
+Wed, 18 Apr 2018 10:15:04 GMT
+
+### Minor changes
+
+- Add opt-in @deprecated comments
+
+### Patches
+
+- Fix deprecated semantic slots returning empty strings
+
+## 5.23.1
+Mon, 16 Apr 2018 10:23:26 GMT
+
+### Patches
+
+- Removing module entry temporarily. (Will be added back in 6.0.)
+- Updating build to React 16.3.1.
 
 ## 5.23.0
 Tue, 10 Apr 2018 17:37:28 GMT
diff --git a/packages/styling/package.json b/packages/styling/package.json
index 25c3d6ce78d05..a0bee1db13a51 100644
--- a/packages/styling/package.json
+++ b/packages/styling/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/styling",
-  "version": "5.23.0",
+  "version": "5.25.0",
   "description": "Defines the core Office UI Fabric styles through a JavaScript interface.",
   "repository": {
     "type": "git",
@@ -8,7 +8,6 @@
   },
   "license": "MIT",
   "main": "lib/index.js",
-  "module": "lib-es2015/index.js",
   "typings": "lib-es2015/index.d.ts",
   "sideEffects": false,
   "scripts": {
@@ -20,18 +19,18 @@
   },
   "devDependencies": {
     "@types/webpack-env": "1.13.0",
-    "@types/react": "16.0.25",
+    "@types/react": "16.3.10",
     "@types/jest": "21.1.8",
     "es6-map": "^0.1.5",
     "es6-weak-map": "^2.0.2",
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1"
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
-    "@uifabric/utilities": ">=5.23.0 <6.0.0",
-    "@uifabric/merge-styles": ">=5.15.0 <6.0.0",
+    "@uifabric/utilities": ">=5.25.0 <6.0.0",
+    "@uifabric/merge-styles": ">=5.15.2 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts b/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts
index eac7e609045cf..bc15dbadd6a60 100644
--- a/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts
+++ b/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts
@@ -45,7 +45,7 @@ function _continuousPulseStepFive(beaconColorOne: string, innerDimension: string
   };
 }
 
-function _continuousPulseAnimation(
+function _continuousPulseAnimationDouble(
   beaconColorOne: string,
   beaconColorTwo: string,
   innerDimension: string,
@@ -73,8 +73,24 @@ function _continuousPulseAnimation(
   });
 }
 
+function _continuousPulseAnimationSingle(
+  beaconColorOne: string,
+  beaconColorTwo: string,
+  innerDimension: string,
+  outerDimension: string,
+  borderWidth: string
+): string {
+  return keyframes({
+    '0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
+    '14.2%': _continuousPulseStepTwo(borderWidth),
+    '35.7%': _continuousPulseStepThree(),
+    '71.4%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
+    '100%': {}
+  });
+}
+
 function _createDefaultAnimation(
-  animationName: string,
+  animationName: string
 ): IRawStyle {
   return {
     animationName,
@@ -85,6 +101,7 @@ function _createDefaultAnimation(
 }
 
 export const PulsingBeaconAnimationStyles = {
-  continuousPulseAnimation: _continuousPulseAnimation,
-  createDefaultAnimation: _createDefaultAnimation
+  continuousPulseAnimationDouble: _continuousPulseAnimationDouble,
+  continuousPulseAnimationSingle: _continuousPulseAnimationSingle,
+  createDefaultAnimation: _createDefaultAnimation,
 };
\ No newline at end of file
diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts
index 2611df309824f..ab52c951ba3df 100644
--- a/packages/styling/src/styles/theme.ts
+++ b/packages/styling/src/styles/theme.ts
@@ -15,7 +15,7 @@ import { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles';
 
 let _theme: ITheme = {
   palette: DefaultPalette,
-  semanticColors: _makeSemanticColorsFromPalette(DefaultPalette, false),
+  semanticColors: _makeSemanticColorsFromPalette(DefaultPalette, false, false),
   fonts: DefaultFontStyles,
   isInverted: false
 };
@@ -37,9 +37,13 @@ if (!Customizations.getSettings([ThemeSettingName]).theme) {
 }
 
 /**
- * Gets the theme object.
+ * Gets the theme object
+ * @param {boolean} depComments - Whether to include deprecated tags as comments for deprecated slots.
  */
-export function getTheme(): ITheme {
+export function getTheme(depComments: boolean = false): ITheme {
+  if (depComments === true) {
+    _theme = createTheme({}, depComments);
+  }
   return _theme;
 }
 
@@ -69,9 +73,11 @@ export function removeOnThemeChangeCallback(callback: (theme: ITheme) => void):
 
 /**
  * Applies the theme, while filling in missing slots.
+ * @param {object} theme - Partial theme object.
+ * @param {boolean} depComments - Whether to include deprecated tags as comments for deprecated slots.
  */
-export function loadTheme(theme: IPartialTheme): ITheme {
-  _theme = createTheme(theme);
+export function loadTheme(theme: IPartialTheme, depComments: boolean = false): ITheme {
+  _theme = createTheme(theme, depComments);
 
   // Invoke the legacy method of theming the page as well.
   legacyLoadTheme({ ..._theme.palette, ..._theme.semanticColors });
@@ -91,8 +97,10 @@ export function loadTheme(theme: IPartialTheme): ITheme {
 
 /**
  * Creates a custom theme definition which can be used with the Customizer.
+ * @param {object} theme - Partial theme object.
+ * @param {boolean} depComments - Whether to include deprecated tags as comments for deprecated slots.
  */
-export function createTheme(theme: IPartialTheme): ITheme {
+export function createTheme(theme: IPartialTheme, depComments: boolean = false): ITheme {
   let newPalette = { ...DefaultPalette, ...theme.palette };
 
   if (!theme.palette || !theme.palette.accent) {
@@ -100,8 +108,7 @@ export function createTheme(theme: IPartialTheme): ITheme {
   }
 
   // mix in custom overrides with good slots first, since custom overrides might be used in fixing deprecated slots
-  let newSemanticColors = { ..._makeSemanticColorsFromPalette(newPalette, !!theme.isInverted), ...theme.semanticColors };
-  newSemanticColors = { ..._fixDeprecatedSlots(newSemanticColors), ...theme.semanticColors };
+  let newSemanticColors = { ..._makeSemanticColorsFromPalette(newPalette, !!theme.isInverted, depComments), ...theme.semanticColors };
 
   return {
     palette: newPalette,
@@ -117,7 +124,7 @@ export function createTheme(theme: IPartialTheme): ITheme {
 // Generates all the semantic slot colors based on the Fabric palette.
 // We'll use these as fallbacks for semantic slots that the passed in theme did not define.
 // This does NOT fix deprecated slots.
-function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean): ISemanticColors {
+function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean, depComments: boolean): ISemanticColors {
   let toReturn: ISemanticColors = {
     bodyBackground: p.white,
     bodyText: p.neutralPrimary,
@@ -175,14 +182,23 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean): ISema
     linkHovered: p.themeDarker,
 
     // Deprecated slots, fixed by _fixDeprecatedSlots()
+    /**
+     * Deprecated. Use `listText` instead.
+     * @deprecated
+     */
     listTextColor: ''
   };
 
-  return toReturn;
+  return _fixDeprecatedSlots(toReturn, depComments!);
 }
 
-function _fixDeprecatedSlots(s: ISemanticColors): ISemanticColors {
-  s.listTextColor = s.listText;
+function _fixDeprecatedSlots(s: ISemanticColors, depComments: boolean): ISemanticColors {
+  // Add @deprecated tag as comment if enabled
+  let dep = '';
+  if (depComments === true) {
+    dep = ' /* @deprecated */';
+  }
 
+  s.listTextColor = s.listText + dep;
   return s;
-}
\ No newline at end of file
+}
diff --git a/packages/utilities/CHANGELOG.json b/packages/utilities/CHANGELOG.json
index 409572ed25b5a..6bc84558fe287 100644
--- a/packages/utilities/CHANGELOG.json
+++ b/packages/utilities/CHANGELOG.json
@@ -1,6 +1,56 @@
 {
   "name": "@uifabric/utilities",
   "entries": [
+    {
+      "version": "5.25.0",
+      "tag": "@uifabric/utilities_v5.25.0",
+      "date": "Thu, 19 Apr 2018 18:25:59 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "e77a31bee560440bae3737eca6b19fce2c1ae3db",
+            "comment": "Update createRef to match React.createRef api"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.24.0",
+      "tag": "@uifabric/utilities_v5.24.0",
+      "date": "Mon, 16 Apr 2018 10:23:26 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "0c830b2d32319e5455c2c652765b9d4d6cda8268",
+            "comment": "Adding some helpers which ensure that `ms-Fabric.is-focusVisible` class name is added to the document body when focus rectangles should be fixible. Also ensuring that the `documentElement` has a `dir` attribute."
+          },
+          {
+            "author": "Christian Gonzalez <christianjordangonzalez@gmail.com>",
+            "commit": "a79de6bee8a344b392da6308988ce075c0206382",
+            "comment": "Upgrade to TypeScript 2.8.1"
+          }
+        ],
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4",
+            "comment": "Removing module entry temporarily. (Will be added back in 6.0.)"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "6f8a180ae2ecca66d09be97e48e8e03cc17d4d9e",
+            "comment": "Updating build to React 16.3.1."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.0 <6.0.0` to `>=5.15.1 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.23.0",
       "tag": "@uifabric/utilities_v5.23.0",
diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md
index 26e970fc07c2c..c27bca3c41b4d 100644
--- a/packages/utilities/CHANGELOG.md
+++ b/packages/utilities/CHANGELOG.md
@@ -1,6 +1,26 @@
 # Change Log - @uifabric/utilities
 
-This log was last generated on Thu, 05 Apr 2018 10:15:39 GMT and should not be manually modified.
+This log was last generated on Thu, 19 Apr 2018 18:25:59 GMT and should not be manually modified.
+
+## 5.25.0
+Thu, 19 Apr 2018 18:25:59 GMT
+
+### Minor changes
+
+- Update createRef to match React.createRef api
+
+## 5.24.0
+Mon, 16 Apr 2018 10:23:26 GMT
+
+### Minor changes
+
+- Adding some helpers which ensure that `ms-Fabric.is-focusVisible` class name is added to the document body when focus rectangles should be fixible. Also ensuring that the `documentElement` has a `dir` attribute.
+- Upgrade to TypeScript 2.8.1
+
+### Patches
+
+- Removing module entry temporarily. (Will be added back in 6.0.)
+- Updating build to React 16.3.1.
 
 ## 5.23.0
 Thu, 05 Apr 2018 10:15:39 GMT
diff --git a/packages/utilities/package.json b/packages/utilities/package.json
index f722e9e433dcf..a1ef8f6c6935d 100644
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
@@ -1,9 +1,8 @@
 {
   "name": "@uifabric/utilities",
-  "version": "5.23.0",
+  "version": "5.25.0",
   "description": "Office UI Fabric utilities for building React components.",
   "main": "lib/index.js",
-  "module": "lib-es2015/index.js",
   "typings": "lib-es2015/index.d.ts",
   "sideEffects": false,
   "repository": {
@@ -26,19 +25,18 @@
     "@types/enzyme": "3.1.5",
     "@types/enzyme-adapter-react-16": "1.0.1",
     "@types/prop-types": "15.5.2",
-    "@types/react": "16.0.25",
-    "@types/react-dom": "16.0.3",
+    "@types/react": "16.3.10",
+    "@types/react-dom": "16.0.5",
     "@types/sinon": "2.2.2",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
     "sinon": "^4.1.3"
   },
   "dependencies": {
-    "@microsoft/load-themed-styles": "^1.7.13",
-    "@uifabric/merge-styles": ">=5.15.0 <6.0.0",
+    "@uifabric/merge-styles": ">=5.15.2 <6.0.0",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"
   },
diff --git a/packages/utilities/src/BaseComponent.ts b/packages/utilities/src/BaseComponent.ts
index 6fec71b826bac..932d9de5c52fc 100644
--- a/packages/utilities/src/BaseComponent.ts
+++ b/packages/utilities/src/BaseComponent.ts
@@ -3,6 +3,8 @@ import { Async } from './Async';
 import { EventGroup } from './EventGroup';
 import { IDisposable } from './IDisposable';
 import { warnDeprecations, warnMutuallyExclusive, warnConditionallyRequiredProps, ISettingsMap } from './warn';
+import { initializeFocusRects } from './initializeFocusRects';
+import { initializeDir } from './initializeDir';
 
 /**
  * BaseProps interface.
@@ -50,6 +52,10 @@ export class BaseComponent<P extends IBaseProps = {}, S = {}> extends React.Comp
   constructor(props: P, context?: any) {
     super(props, context);
 
+    // Ensure basic assumptions about the environment.
+    initializeFocusRects();
+    initializeDir();
+
     this._shouldUpdateComponentRef = true;
 
     _makeAllSafe(this, BaseComponent.prototype, [
diff --git a/packages/utilities/src/Context.tsx b/packages/utilities/src/Context.tsx
index f145cae8c7b56..91b0b21776aa8 100644
--- a/packages/utilities/src/Context.tsx
+++ b/packages/utilities/src/Context.tsx
@@ -5,7 +5,7 @@ import * as PropTypes from 'prop-types';
 export function provideContext<TContext, TProps>(
   contextTypes: PropTypes.ValidationMap<TContext>,
   mapPropsToContext: (props: TProps) => TContext
-): React.ComponentType<TProps & React.Props<{}>> {
+): React.ComponentType<TProps> {
   class Provider extends React.Component<TProps> {
     public static readonly childContextTypes: PropTypes.ValidationMap<TContext> = contextTypes;
 
diff --git a/packages/utilities/src/createRef.test.ts b/packages/utilities/src/createRef.test.ts
index ba1c9130c8b44..0f37ddba100b5 100644
--- a/packages/utilities/src/createRef.test.ts
+++ b/packages/utilities/src/createRef.test.ts
@@ -2,17 +2,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('to have a current prop that is null on creation', () => {
+    expect(createRef().current).toEqual(null);
   });
 
-  it('when called with ReactElement it sets the value to the passed component', () => {
+  it('when called with ReactElement it sets the current property to the passed component', () => {
     const component = React.createElement('span');
     const refObject = createRef<React.ReactElement<{}>>();
 
     refObject(component);
 
-    expect(refObject.value).toBe(component);
+    expect(refObject.current).toBe(component);
+  });
+
+  it('when called with HTMLElement it sets the current property to the passed element', () => {
+    const component = document.createElement('span');
+    const refObject = createRef();
+
+    refObject(component);
+
+    expect(refObject.current).toBe(component);
   });
 
   it('when called with HTMLElement it sets the value to the passed element', () => {
@@ -21,6 +30,30 @@ describe('createRef', () => {
 
     refObject(component);
 
-    expect(refObject.value).toBe(component);
+    expect(refObject.current).toBe(component);
+  });
+
+  describe('the deprecated value prop', () => {
+    it('is initialized to null', () => {
+      expect(createRef().value).toEqual(null);
+    });
+
+    it('is set to the passed element', () => {
+      const component = document.createElement('span');
+      const refObject = createRef();
+
+      refObject(component);
+
+      expect(refObject.value).toBe(component);
+    });
+
+    it('is the same value as current', () => {
+      const component = document.createElement('span');
+      const refObject = createRef();
+
+      refObject(component);
+
+      expect(refObject.value).toBe(refObject.current);
+    });
   });
 });
diff --git a/packages/utilities/src/createRef.ts b/packages/utilities/src/createRef.ts
index b08cd78f3290e..ac72b96147a0e 100644
--- a/packages/utilities/src/createRef.ts
+++ b/packages/utilities/src/createRef.ts
@@ -1,13 +1,33 @@
 export type RefObject<T> = {
   (component: T | null): void;
+  current: T | null;
+
+  /**
+   * @deprecated Use .current as that is consistent the official React Api.
+   */
   value: T | null;
 };
 
+/**
+ * This is a polyfill for the React.createRef() api.
+ * For more info on React.createRef() see the official React documentation
+ * on creating and accessing refs.
+ * @see https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
+ * @see https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs
+ */
 export function createRef<T>(): RefObject<T> {
   const refObject = ((element: T | null): void => {
-    refObject.value = element;
+    refObject.current = element;
   }) as RefObject<T>;
-  refObject.value = null;
+
+  // This getter is here to support the deprecated value prop on the refObject.
+  Object.defineProperty(refObject, 'value', {
+    get(): T | null {
+      return refObject.current;
+    }
+  });
+
+  refObject.current = null;
 
   return refObject;
 }
\ No newline at end of file
diff --git a/packages/utilities/src/focus.test.tsx b/packages/utilities/src/focus.test.tsx
index 4707d03bcf353..21020c63cf3e5 100644
--- a/packages/utilities/src/focus.test.tsx
+++ b/packages/utilities/src/focus.test.tsx
@@ -11,7 +11,7 @@ let _element: HTMLElement | undefined;
 
 function renderIntoDocument(element: React.ReactElement<{}>): HTMLElement {
   const component = ReactTestUtils.renderIntoDocument(element);
-  const renderedDOM: Element = ReactDOM.findDOMNode(component as React.ReactInstance);
+  const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
   return renderedDOM as HTMLElement;
 }
 
diff --git a/packages/utilities/src/focus.ts b/packages/utilities/src/focus.ts
index cf2c251caae38..6eeb0e3c5c5cd 100644
--- a/packages/utilities/src/focus.ts
+++ b/packages/utilities/src/focus.ts
@@ -1,6 +1,11 @@
 /* tslint:disable:no-string-literal */
 
-import { elementContains, getDocument, elementContainsAttribute } from './dom';
+import {
+  elementContainsAttribute,
+  elementContains,
+  getDocument,
+  getWindow
+} from './dom';
 
 const IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';
 const IS_VISIBLE_ATTRIBUTE = 'data-is-visible';
@@ -370,18 +375,16 @@ export function focusAsync(element: HTMLElement | { focus: () => void } | undefi
 
     targetToFocusOnNextRepaint = element;
 
-    const htmlElement = element as HTMLElement;
-    const view = ((
-      htmlElement.ownerDocument &&
-      htmlElement.ownerDocument.defaultView
-    ) ? htmlElement.ownerDocument.defaultView : window);
+    const win = getWindow(element as Element);
 
-    // element.focus() is a no-op if the element is no longer in the DOM, meaning this is always safe
-    view.requestAnimationFrame(() => {
-      targetToFocusOnNextRepaint && targetToFocusOnNextRepaint.focus();
+    if (win) {
+      // element.focus() is a no-op if the element is no longer in the DOM, meaning this is always safe
+      win.requestAnimationFrame(() => {
+        targetToFocusOnNextRepaint && targetToFocusOnNextRepaint.focus();
 
-      // We are done focusing for this frame, so reset the queued focus element
-      targetToFocusOnNextRepaint = undefined;
-    });
+        // We are done focusing for this frame, so reset the queued focus element
+        targetToFocusOnNextRepaint = undefined;
+      });
+    }
   }
 }
diff --git a/packages/utilities/src/initializeDir.ts b/packages/utilities/src/initializeDir.ts
new file mode 100644
index 0000000000000..5d86dffd615b3
--- /dev/null
+++ b/packages/utilities/src/initializeDir.ts
@@ -0,0 +1,16 @@
+import { getWindow } from './dom';
+
+export function initializeDir(window?: Window): void {
+  const win = (window || getWindow()) as (Window & { __hasInitializedDir__: boolean });
+
+  if (win && !win.__hasInitializedDir__) {
+    win.__hasInitializedDir__ = true;
+
+    // Ensure that the documentElement has a 'dir' attribute.
+    const { documentElement } = win.document;
+
+    if (!documentElement.hasAttribute('dir')) {
+      documentElement.setAttribute('dir', 'ltr');
+    }
+  }
+}
diff --git a/packages/utilities/src/initializeFocusRects.test.ts b/packages/utilities/src/initializeFocusRects.test.ts
new file mode 100644
index 0000000000000..46531c311a8e2
--- /dev/null
+++ b/packages/utilities/src/initializeFocusRects.test.ts
@@ -0,0 +1,90 @@
+import { IsFocusVisibleClassName, initializeFocusRects } from './initializeFocusRects';
+import { KeyCodes } from './KeyCodes';
+
+describe('initializeFocusRects', () => {
+  let classNames: string[] = [];
+  // tslint:disable-next-line:no-any
+  const mockWindow: { [key: string]: any } = {
+    addEventListener: (name: string, callback: Function) => {
+      mockWindow[name] = callback;
+    },
+    document: {
+      body: {
+        classList: {
+          contains: (name: string) => classNames.indexOf(name) > -1,
+          add: (name: string) => classNames.push(name),
+          remove: (name: string) => classNames.splice(classNames.indexOf(name), 1),
+          toggle: (name: string, val: boolean) => {
+            const hasClass = classNames.indexOf(name) > -1;
+            if (hasClass !== val) {
+              if (hasClass) {
+                classNames.splice(classNames.indexOf(name), 1);
+              } else {
+                classNames.push(name);
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+  const mockTarget = {
+    ownerDocument: {
+      defaultView: mockWindow
+    }
+  };
+
+  beforeEach(() => {
+    classNames = [];
+    initializeFocusRects(mockWindow as Window);
+  });
+
+  it('can show focus when you press a directional key', () => {
+    mockWindow.keydown({ target: mockTarget, which: KeyCodes.up });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(true);
+
+    classNames = [];
+    mockWindow.keydown({ target: mockTarget, which: KeyCodes.down });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(true);
+
+    classNames = [];
+    mockWindow.keydown({ target: mockTarget, which: KeyCodes.left });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(true);
+
+    classNames = [];
+    mockWindow.keydown({ target: mockTarget, which: KeyCodes.right });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(true);
+
+    classNames = [];
+    mockWindow.keydown({ target: mockTarget, which: KeyCodes.tab });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(true);
+
+    classNames = [];
+    mockWindow.keydown({ target: mockTarget, which: KeyCodes.pageUp });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(true);
+
+    classNames = [];
+    mockWindow.keydown({ target: mockTarget, which: KeyCodes.pageDown });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(true);
+
+    classNames = [];
+    mockWindow.keydown({ target: mockTarget, which: KeyCodes.home });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(true);
+
+    classNames = [];
+    mockWindow.keydown({ target: mockTarget, which: KeyCodes.end });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(true);
+  });
+
+  it('no-ops when you press a non-directional key', () => {
+    mockWindow.keydown({ target: mockTarget, which: 127 });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(false);
+  });
+
+  it('removes the class when you click the mouse', () => {
+    mockWindow.keydown({ target: mockTarget, which: KeyCodes.down });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(true);
+    mockWindow.mousedown({ target: mockTarget });
+    expect(classNames.indexOf(IsFocusVisibleClassName) > -1).toEqual(false);
+  });
+});
diff --git a/packages/utilities/src/initializeFocusRects.ts b/packages/utilities/src/initializeFocusRects.ts
new file mode 100644
index 0000000000000..68061c3a76cfb
--- /dev/null
+++ b/packages/utilities/src/initializeFocusRects.ts
@@ -0,0 +1,70 @@
+import { getWindow } from './dom';
+import { KeyCodes } from './KeyCodes';
+import { KeyboardEvent } from '../../../common/temp/node_modules/@types/react';
+
+export const FabricClassName = 'ms-Fabric';
+export const IsFocusVisibleClassName = 'is-focusVisible';
+const DirectionalKeyCodes = [
+  KeyCodes.up,
+  KeyCodes.down,
+  KeyCodes.left,
+  KeyCodes.right,
+  KeyCodes.home,
+  KeyCodes.end,
+  KeyCodes.tab,
+  KeyCodes.pageUp,
+  KeyCodes.pageDown
+];
+
+/**
+ * Initializes the logic which:
+ *
+ * 1. Subscribes keydown and mousedown events. (It will only do it once per window,
+ *    so it's safe to call this method multiple times.)
+ * 2. When the user presses directional keyboard keys, adds the 'is-focusVisible' classname
+ *    to the document body.
+ * 3. When the user clicks a mouse button, we remove the classname if it exists.
+ *
+ * This logic allows components on the page to conditionally render focus treatments only
+ * if the global classname exists, which simplifies logic overall.
+ *
+ * @param window
+ */
+export function initializeFocusRects(window?: Window): void {
+  const win = (window || getWindow()) as (Window & { __hasInitializeFocusRects__: boolean });
+
+  if (win && !win.__hasInitializeFocusRects__) {
+    win.__hasInitializeFocusRects__ = true;
+    const { classList } = win.document.body;
+
+    classList.toggle(FabricClassName, true);
+
+    win.addEventListener('mousedown', _onMouseDown, true);
+    win.addEventListener('keydown', _onKeyDown as () => void, true);
+  }
+}
+
+function _onMouseDown(ev: MouseEvent): void {
+  const win = getWindow(ev.target as Element);
+
+  if (win) {
+    const { classList } = win.document.body;
+
+    if (classList.contains(IsFocusVisibleClassName)) {
+      classList.remove(IsFocusVisibleClassName);
+    }
+  }
+}
+
+function _onKeyDown(ev: KeyboardEvent<Element>): void {
+  const win = getWindow(ev.target as Element);
+
+  if (win) {
+    const { classList } = win.document.body;
+    const isDirectionalKeyCode = DirectionalKeyCodes.indexOf(ev.which) > -1;
+
+    if (isDirectionalKeyCode && !classList.contains(IsFocusVisibleClassName)) {
+      classList.add(IsFocusVisibleClassName);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/utilities/src/inputMask.test.ts b/packages/utilities/src/inputMask.test.ts
new file mode 100644
index 0000000000000..48ec8fcfe6b6e
--- /dev/null
+++ b/packages/utilities/src/inputMask.test.ts
@@ -0,0 +1,160 @@
+import {
+  clearNext,
+  clearPrev,
+  clearRange,
+  getLeftFormatIndex,
+  getMaskDisplay,
+  getRightFormatIndex,
+  IMaskValue,
+  insertString,
+  parseMask
+} from './inputMask';
+
+const inputMask = 'Phone number m\\ask: (999) 999 - 9999';
+
+const values: IMaskValue[] = [
+  { value: '1', format: /[0-9]/, displayIndex: 20 },
+  { value: '2', format: /[0-9]/, displayIndex: 21 },
+  { value: '3', format: /[0-9]/, displayIndex: 22 },
+  { value: '4', format: /[0-9]/, displayIndex: 25 },
+  { value: '5', format: /[0-9]/, displayIndex: 26 },
+  { value: undefined, format: /[0-9]/, displayIndex: 27 },
+  { value: undefined, format: /[0-9]/, displayIndex: 31 },
+  { value: undefined, format: /[0-9]/, displayIndex: 32 },
+  { value: undefined, format: /[0-9]/, displayIndex: 33 },
+  { value: undefined, format: /[0-9]/, displayIndex: 34 },
+];
+
+function resetValues(charData: IMaskValue[], maxIndex: number = Infinity): void {
+  for (let i = 0; i < charData.length; i++) {
+    if (i < maxIndex) {
+      charData[i].value = (i + 1).toString()[0];
+    } else {
+      charData[i].value = undefined;
+    }
+  }
+}
+
+describe('inputMask', () => {
+  it('parses mask sucessfully', () => {
+    let result = parseMask(inputMask);
+    expect(result.length).toEqual(values.length);
+
+    for (let i = 0; i < values.length; i++) {
+      expect(result[i].displayIndex).toEqual(values[i].displayIndex);
+    }
+  });
+
+  it('parsing ignores escaped format characters', () => {
+    let result = parseMask('Esc\\aped some ch\\ar\\acters: (999) 999 - 9999 \\*');
+    expect(result.length).toEqual(values.length);
+  });
+
+  it('generates displayedMask', () => {
+    resetValues(values, 5);
+    let result = getMaskDisplay(inputMask, values, '_');
+    expect(result).toEqual('Phone number mask: (123) 45_ - ____');
+
+    result = getMaskDisplay(inputMask, values);
+    expect(result).toEqual('Phone number mask: (123) 45');
+
+    resetValues(values, 0);
+    result = getMaskDisplay(inputMask, values);
+    expect(result).toEqual('Phone number mask: (');
+  });
+
+  it('generated displayedMask doesn\'t render escape codes', () => {
+    const maskString = 'Esc\\aped Ch\\ar\\acters: (999) 999 - 9999';
+    const maskValues = parseMask(maskString);
+
+    resetValues(maskValues, 5);
+
+    let result = getMaskDisplay(maskString, maskValues, '_');
+    expect(result).toEqual('Escaped Characters: (123) 45_ - ____');
+
+    result = getMaskDisplay(maskString, maskValues);
+    expect(result).toEqual('Escaped Characters: (123) 45');
+  });
+
+  it('clearNext works as intended', () => {
+    resetValues(values, 5);
+    let result = clearNext(values, 20);
+    expect(result[0].value).toBeUndefined();
+
+    resetValues(values, 5);
+    result = clearNext(values, 22);
+    expect(result[2].value).toBeUndefined();
+
+    resetValues(values, 5);
+    result = clearNext(values, 23);
+    expect(result[3].value).toBeUndefined();
+    expect(result[2].value).toBeDefined();
+  });
+
+  it('clearPrev works as intended', () => {
+    resetValues(values, 5);
+    let result = clearPrev(values, 25);
+    expect(result[2].value).toBeUndefined();
+
+    resetValues(values, 5);
+    result = clearPrev(values, 21);
+    expect(result[0].value).toBeUndefined();
+
+    resetValues(values, 5);
+    result = clearPrev(values, 20);
+    expect(result[0].value).toBeDefined();
+  });
+
+  it('clearRange works as intended', () => {
+    resetValues(values, 5);
+    let result = clearRange(values, 23, 5);
+    expect(result[2].value).toBeDefined();
+    expect(result[3].value).toBeUndefined();
+    expect(result[4].value).toBeUndefined();
+
+    resetValues(values, 5);
+    result = clearRange(values, 22, 5);
+    expect(result[2].value).toBeUndefined();
+    expect(result[3].value).toBeUndefined();
+    expect(result[4].value).toBeUndefined();
+  });
+
+  it('getLeftFormatIndex works as intended', () => {
+    resetValues(values, 5);
+    let result = getLeftFormatIndex(values, 23);
+    expect(result).toEqual(22);
+
+    resetValues(values, 5);
+    result = getLeftFormatIndex(values, 22);
+    expect(result).toEqual(21);
+
+    resetValues(values, 5);
+    result = getLeftFormatIndex(values, 25);
+    expect(result).toEqual(22);
+  });
+
+  it('getRightFormatIndex works as intended', () => {
+    resetValues(values, 5);
+    let result = getRightFormatIndex(values, 23);
+    expect(result).toEqual(25);
+
+    resetValues(values, 5);
+    result = getRightFormatIndex(values, 22);
+    expect(result).toEqual(22);
+
+    resetValues(values, 5);
+    result = getRightFormatIndex(values, 25);
+    expect(result).toEqual(25);
+  });
+
+  it('insertString works as intended', () => {
+    resetValues(values, 5);
+    let result = insertString(values, 23, '89asdf0asdf98');
+    expect(values[3].value).toEqual('8');
+    expect(values[4].value).toEqual('9');
+    expect(values[5].value).toEqual('0');
+    expect(values[6].value).toEqual('9');
+    expect(values[7].value).toEqual('8');
+    expect(result).toEqual(33);
+  });
+});
diff --git a/packages/utilities/src/inputMask.ts b/packages/utilities/src/inputMask.ts
new file mode 100644
index 0000000000000..ab108e411ee03
--- /dev/null
+++ b/packages/utilities/src/inputMask.ts
@@ -0,0 +1,247 @@
+export interface IMaskValue {
+  value?: string;
+  /**
+   * This index refers to the index in the displayMask rather than the inputMask.
+   * This means that any escaped characters do not count toward this index.
+   */
+  displayIndex: number;
+  format: RegExp;
+}
+
+export const DEFAULT_MASK_FORMAT_CHARS: { [key: string]: RegExp } = {
+  '9': /[0-9]/,
+  'a': /[a-zA-Z]/,
+  '*': /[a-zA-Z0-9]/
+};
+
+/**
+ * Takes in the mask string and the formatCharacters and returns an array of MaskValues
+ * Example:
+ * mask = 'Phone Number: (999) - 9999'
+ * return = [
+ *    { value: undefined, displayIndex: 16, format: /[0-9]/ },
+ *    { value: undefined, displayIndex: 17, format: /[0-9]/ },
+ *    { value: undefined, displayIndex: 18, format: /[0-9]/ },
+ *    { value: undefined, displayIndex: 22, format: /[0-9]/ },
+ * ]
+ *
+ * @param mask The string use to define the format of the displayed maskedValue.
+ * @param formatChars An object defining how certain characters in the mask should accept input.
+ */
+export function parseMask(
+  mask: string | undefined,
+  formatChars: { [key: string]: RegExp } = DEFAULT_MASK_FORMAT_CHARS): IMaskValue[] {
+  if (!mask) {
+    return [];
+  }
+
+  let maskCharData: IMaskValue[] = [];
+  // Count the escape characters in the mask string.
+  let escapedChars = 0;
+  for (let i = 0; i + escapedChars < mask.length; i++) {
+    const maskChar = mask.charAt(i + escapedChars);
+    if (maskChar === '\\') {
+      escapedChars++;
+    } else {
+      // Check if the maskChar is a format character.
+      const maskFormat = formatChars[maskChar];
+      if (maskFormat) {
+        maskCharData.push({
+          /**
+           * Do not add escapedChars to the displayIndex.
+           * The index refers to a position in the mask's displayValue.
+           * Since the backslashes don't appear in the displayValue,
+           * we do not add them to the charData displayIndex.
+           */
+          displayIndex: i,
+          format: maskFormat
+        });
+      }
+    }
+  }
+
+  return maskCharData;
+}
+
+/**
+ * Takes in the mask string, an array of MaskValues, and the maskCharacter
+ * returns the mask string formatted with the input values and maskCharacter.
+ * If the maskChar is undefined, the maskDisplay is truncated to the last filled format character.
+ * Example:
+ * mask = 'Phone Number: (999) 999 - 9999'
+ * maskCharData = '12345'
+ * maskChar = '_'
+ * return = 'Phone Number: (123) 45_ - ___'
+ *
+ * Example:
+ * mask = 'Phone Number: (999) 999 - 9999'
+ * value = '12345'
+ * maskChar = undefined
+ * return = 'Phone Number: (123) 45'
+ *
+ * @param mask The string use to define the format of the displayed maskedValue.
+ * @param maskCharData The input values to insert into the mask string for displaying.
+ * @param maskChar? A character to display in place of unfilled mask format characters.
+ */
+export function getMaskDisplay(mask: string | undefined, maskCharData: IMaskValue[], maskChar?: string): string {
+  let maskDisplay = mask;
+
+  if (!maskDisplay) {
+    return '';
+  }
+
+  // Remove all backslashes
+  maskDisplay = maskDisplay.replace(/\\/g, '');
+
+  // lastDisplayIndex is is used to truncate the string if necessary.
+  let lastDisplayIndex = 0;
+  if (maskCharData.length > 0) {
+    lastDisplayIndex = maskCharData[0].displayIndex - 1;
+  }
+
+  /**
+   * For each input value, replace the character in the maskDisplay with the value.
+   * If there is no value set for the format character, use the maskChar.
+   */
+  for (let charData of maskCharData) {
+    let nextChar = ' ';
+    if (charData.value) {
+      nextChar = charData.value;
+      if (charData.displayIndex > lastDisplayIndex) {
+        lastDisplayIndex = charData.displayIndex;
+      }
+    } else {
+      if (maskChar) {
+        nextChar = maskChar;
+      }
+    }
+
+    // Insert the character into the maskdisplay at its corresponding index
+    maskDisplay = maskDisplay.slice(0, charData.displayIndex) + nextChar +
+      maskDisplay.slice(charData.displayIndex + 1);
+  }
+
+  // Cut off all mask characters after the last filled format value
+  if (!maskChar) {
+    maskDisplay = maskDisplay.slice(0, lastDisplayIndex + 1);
+  }
+
+  return maskDisplay;
+}
+
+/**
+ * Get the next format index right of or at a specified index.
+ * If no index exists, returns the rightmost index.
+ * @param maskCharData
+ * @param index
+ */
+export function getRightFormatIndex(maskCharData: IMaskValue[], index: number): number {
+  for (let i = 0; i < maskCharData.length; i++) {
+    if (maskCharData[i].displayIndex >= index) {
+      return maskCharData[i].displayIndex;
+    }
+  }
+  return maskCharData[maskCharData.length - 1].displayIndex;
+}
+
+/**
+ * Get the next format index left of a specified index.
+ * If no index exists, returns the leftmost index.
+ * @param maskCharData
+ * @param index
+ */
+export function getLeftFormatIndex(maskCharData: IMaskValue[], index: number): number {
+  for (let i = maskCharData.length - 1; i >= 0; i--) {
+    if (maskCharData[i].displayIndex < index) {
+      return maskCharData[i].displayIndex;
+    }
+  }
+  return maskCharData[0].displayIndex;
+}
+
+/**
+ * Deletes all values in maskCharData with a displayIndex that falls inside the specified range.
+ * maskCharData is modified inline and also returned.
+ * @param maskCharData
+ * @param selectionStart
+ * @param selectionCount
+ */
+export function clearRange(maskCharData: IMaskValue[], selectionStart: number, selectionCount: number): IMaskValue[] {
+  for (let i = 0; i < maskCharData.length; i++) {
+    if (maskCharData[i].displayIndex >= selectionStart) {
+      if (maskCharData[i].displayIndex >= selectionStart + selectionCount) {
+        break;
+      }
+      maskCharData[i].value = undefined;
+    }
+  }
+  return maskCharData;
+}
+
+/**
+ * Deletes the input character at or after a specified index and returns the new array of charData
+ * maskCharData is modified inline and also returned.
+ * @param maskCharData
+ * @param selectionStart
+ */
+export function clearNext(maskCharData: IMaskValue[], selectionStart: number): IMaskValue[] {
+  for (let i = 0; i < maskCharData.length; i++) {
+    if (maskCharData[i].displayIndex >= selectionStart) {
+      maskCharData[i].value = undefined;
+      break;
+    }
+  }
+  return maskCharData;
+}
+
+/**
+ * Deletes the input character before a specified index and returns the new array of charData
+ * maskCharData is modified inline and also returned.
+ * @param maskCharData
+ * @param selectionStart
+ */
+export function clearPrev(maskCharData: IMaskValue[], selectionStart: number): IMaskValue[] {
+  for (let i = maskCharData.length - 1; i >= 0; i--) {
+    if (maskCharData[i].displayIndex < selectionStart) {
+      maskCharData[i].value = undefined;
+      break;
+    }
+  }
+  return maskCharData;
+}
+
+/**
+ * Deletes all values in maskCharData with a displayIndex that falls inside the specified range.
+ * Modifies the maskCharData inplace with the passed string and returns the display index of the
+ * next format character after the inserted string.
+ * @param maskCharData
+ * @param selectionStart
+ * @param selectionCount
+ * @return The displayIndex of the next format character
+ */
+export function insertString(maskCharData: IMaskValue[], selectionStart: number, newString: string): number {
+  let stringIndex = 0,
+    nextIndex = 0;
+  // Iterate through _maskCharData finding values with a displayIndex after the specified range start
+  for (let i = 0; i < maskCharData.length && stringIndex < newString.length; i++) {
+    if (maskCharData[i].displayIndex >= selectionStart) {
+      nextIndex = maskCharData[i].displayIndex;
+      // Find the next character in the newString that matches the format
+      while (stringIndex < newString.length) {
+        // If the character matches the format regexp, set the maskCharData to the new character
+        if (maskCharData[i].format.test(newString.charAt(stringIndex))) {
+          maskCharData[i].value = newString.charAt(stringIndex++);
+          // Set the nextIndex to the display index of the next mask format character.
+          if (i + 1 < maskCharData.length) {
+            nextIndex = maskCharData[i + 1].displayIndex;
+          } else {
+            nextIndex++;
+          }
+          break;
+        }
+        stringIndex++;
+      }
+    }
+  }
+  return nextIndex;
+}
diff --git a/packages/utilities/src/scroll.scss b/packages/utilities/src/scroll.scss
deleted file mode 100644
index 4f1d16d7d1cc4..0000000000000
--- a/packages/utilities/src/scroll.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Note: due to this being attached to body, we'll make the variable Fabric specific to be clear where it
-// is coming from.
-.scrollDisabled {
-  overflow: hidden !important;
-}
diff --git a/packages/utilities/src/scroll.ts b/packages/utilities/src/scroll.ts
index 1a36047b3d4b9..f244b4c53aeca 100644
--- a/packages/utilities/src/scroll.ts
+++ b/packages/utilities/src/scroll.ts
@@ -1,9 +1,13 @@
 import { getDocument } from './dom';
-import * as styles from './scroll.scss';
+import { mergeStyles } from '@uifabric/merge-styles/lib/index';
 
 let _scrollbarWidth: number;
 let _bodyScrollDisabledCount = 0;
 
+const DisabledScrollClassName = mergeStyles({
+  overflow: 'hidden !important' as 'hidden'
+});
+
 /**
  * Placing this attribute on scrollable divs optimizes detection to know
  * if the div is scrollable or not (given we can avoid expensive operations
@@ -22,7 +26,7 @@ export function disableBodyScroll(): void {
   let doc = getDocument();
 
   if (doc && doc.body && !_bodyScrollDisabledCount) {
-    doc.body.classList.add(styles.scrollDisabled);
+    doc.body.classList.add(DisabledScrollClassName);
   }
 
   _bodyScrollDisabledCount++;
@@ -38,7 +42,7 @@ export function enableBodyScroll(): void {
     let doc = getDocument();
 
     if (doc && doc.body && _bodyScrollDisabledCount === 1) {
-      doc.body.classList.remove(styles.scrollDisabled);
+      doc.body.classList.remove(DisabledScrollClassName);
     }
 
     _bodyScrollDisabledCount--;
diff --git a/packages/variants/CHANGELOG.json b/packages/variants/CHANGELOG.json
index 7cc8f9a269fa4..aec063ef1b7f4 100644
--- a/packages/variants/CHANGELOG.json
+++ b/packages/variants/CHANGELOG.json
@@ -1,6 +1,25 @@
 {
   "name": "@uifabric/variants",
   "entries": [
+    {
+      "version": "5.3.3",
+      "tag": "@uifabric/variants_v5.3.3",
+      "date": "Mon, 16 Apr 2018 10:23:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "4b856fc9e1734edd3986c28f25e9211a3edf96d4",
+            "comment": "Removing module entry temporarily. (Will be added back in 6.0.)"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.23.0 <6.0.0` to `>=5.23.1 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.3.2",
       "tag": "@uifabric/variants_v5.3.2",
diff --git a/packages/variants/CHANGELOG.md b/packages/variants/CHANGELOG.md
index f63c788906178..b5f9dfb80f068 100644
--- a/packages/variants/CHANGELOG.md
+++ b/packages/variants/CHANGELOG.md
@@ -1,6 +1,13 @@
 # Change Log - @uifabric/variants
 
-This log was last generated on Mon, 02 Apr 2018 22:15:06 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Apr 2018 10:23:26 GMT and should not be manually modified.
+
+## 5.3.3
+Mon, 16 Apr 2018 10:23:26 GMT
+
+### Patches
+
+- Removing module entry temporarily. (Will be added back in 6.0.)
 
 ## 5.3.2
 Mon, 02 Apr 2018 22:15:06 GMT
diff --git a/packages/variants/package.json b/packages/variants/package.json
index 3b228c652eb11..28da61f2b5388 100644
--- a/packages/variants/package.json
+++ b/packages/variants/package.json
@@ -1,9 +1,8 @@
 {
   "name": "@uifabric/variants",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "Office UI Fabric subtheme generator.",
   "main": "lib/index.js",
-  "module": "lib-es2015/index.js",
   "typings": "lib-es2015/index.d.ts",
   "sideEffects": false,
   "repository": {
@@ -27,6 +26,6 @@
   },
   "dependencies": {
     "tslib": "^1.7.1",
-    "@uifabric/styling": ">=5.23.0 <6.0.0"
+    "@uifabric/styling": ">=5.25.0 <6.0.0"
   }
 }
\ No newline at end of file
diff --git a/scripts/clean.js b/scripts/clean.js
index 10e03833a7b69..98043438aa1cf 100644
--- a/scripts/clean.js
+++ b/scripts/clean.js
@@ -7,7 +7,8 @@ const path = require('path');
   'dist',
   'lib-amd',
   'lib-es2015',
-  'coverage'
+  'coverage',
+  'src/**/*.scss.ts'
 ].forEach(folder => {
   rimraf(path.resolve(process.cwd(), folder));
 });
\ No newline at end of file
diff --git a/scripts/package.json b/scripts/package.json
index 2ce0b470fee78..d5af64928894c 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.15.0 <6.0.0",
+    "@uifabric/merge-styles": ">=5.15.2 <6.0.0",
     "autoprefixer": "^7.1.5",
     "bundlesize": "^0.15.2",
     "chalk": "^2.1.0",
@@ -39,7 +39,7 @@
     "ts-loader": "^4.1.0",
     "tslint": "^5.7.0",
     "tslint-microsoft-contrib": "^5.0.1",
-    "typescript": "2.7.2",
+    "typescript": "2.8.1",
     "webpack": "^4.2.0",
     "webpack-bundle-analyzer": "^2.11.1",
     "webpack-cli": "^2.0.12",
@@ -50,7 +50,7 @@
   "bundlesize": [
     {
       "path": "../apps/test-bundle-button/dist/test-bundle-button.min.js",
-      "maxSize": "45.8 kB"
+      "maxSize": "46.5 kB"
     }
   ]
 }
\ No newline at end of file
diff --git a/scripts/templates/EmptyClassNames.mustache b/scripts/templates/EmptyClassNames.mustache
index 69fbd0cbc7f87..482801f6ea9f4 100644
--- a/scripts/templates/EmptyClassNames.mustache
+++ b/scripts/templates/EmptyClassNames.mustache
@@ -1,5 +1,5 @@
 import { memoizeFunction } from '../../Utilities';
-import { mergeStyleSets} from '../../Styling';
+import { mergeStyleSets, IStyle } from '../../Styling';
 
 export interface I{{componentName}}Styles {
    /**
@@ -9,14 +9,14 @@ export interface I{{componentName}}Styles {
 }
 
 export interface I{{componentName}}Names {
-	/**
-	* Root html container for this component.
-	*/
-	root?: string;
+  /**
+   * Root html container for this component.
+   */
+  root?: string;
 }
 
 export const getClassNames = memoizeFunction((): I{{componentName}}Names => {
-	return mergeStyleSets({
-		root: []
-	});
+  return mergeStyleSets({
+    root: []
+  });
 });
diff --git a/scripts/templates/EmptyComponent.mustache b/scripts/templates/EmptyComponent.mustache
index 207d68eac887f..f0c9e237b1b88 100644
--- a/scripts/templates/EmptyComponent.mustache
+++ b/scripts/templates/EmptyComponent.mustache
@@ -8,4 +8,4 @@ export class {{componentName}} extends BaseComponent < I{{componentName}}Props,
       <div>Hello World!</div>
     );
   }
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/scripts/templates/EmptyProps.mustache b/scripts/templates/EmptyProps.mustache
index cdec473a5e7b2..9bf949a03aa4f 100644
--- a/scripts/templates/EmptyProps.mustache
+++ b/scripts/templates/EmptyProps.mustache
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { {{componentName}} } from './{{componentName}}';
-import { IStyle } from '../../Styling';
 
 export interface I{{componentName}} {
 }