diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 853c516dad6896..7b8cb59f31cd8b 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 ad98597185fb24..4cc0e35cb30cfc 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 03a88d5329b50f..37768f45f95425 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/.vscode/tasks.json b/.vscode/tasks.json
index cb4569a49b2bd3..88e721384038c1 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -1,13 +1,22 @@
 {
-  "version": "0.1.0",
-  "command": "gulp",
-  "isShellCommand": true,
+  "version": "2.0.0",
   "tasks": [
     {
-      "taskName": "bundle",
-      "isBuildCommand": true,
-      "showOutput": "always",
-      "isWatching": true
+      "label": "Typescript (oufr) watch",
+      "type": "process",
+      "command": "node",
+      "args": [
+        "./scripts/node_modules/typescript/bin/tsc",
+        "-p",
+        "packages/office-ui-fabric-react/tsconfig.json",
+        "-w",
+        "--noEmit"
+      ],
+      "problemMatcher": "$tsc",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/fabric-website/CHANGELOG.json b/apps/fabric-website/CHANGELOG.json
index ec6015e7ba8ae1..549326a38cd410 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 d9d87e339be9db..2cb7da3dab9aa3 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/package.json b/apps/fabric-website/package.json
index 98198f63c3a67d..5e4d27bc359376 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",
@@ -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.89.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 38b5c98c5e03ad..103875380d1d90 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 e5d8ce6a6f775d..4856de58c41120 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 ed7c3d59482b01..c8668c67451a79 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 e212f0f6c8a389..631ad9ced549aa 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 509c060ff18851..89e546370bbc43 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 2540e510094077..28ea93554d6259 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 8ffd0bba489422..0400353f9881d3 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 08879b64d9e0d2..3a317fd721b66c 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 df836511d6eabd..04b96ff55fa1e3 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 bafc2d4ce182d4..d63bd6bfd626c8 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 9885099a843ebd..d4901d42638cab 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 f2f143e825b2b6..4870ddee18ca03 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 a9bcf0d2b8edb6..0dd67f4f21d285 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 5012d58ed50d89..263ed46fa1d847 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 686d320b7d8cab..0e70557dfb12d9 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 9e93ead4f9383e..f2eb361ac72ad9 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 9f998585a05c85..d5a8b62c7b95e4 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 f4f9be714e055c..1f5c650f113be1 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 6a3232b9b1f1b4..ddbd8862a50a40 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 50bf399d2ee0fe..e69e2759099261 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 dfe53b86345489..0f61628ccf9e25 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 0175c42a03ed8e..187ecf596d44cb 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 4182b09dfb1a4e..53a58a52cad6ec 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 6096e069887363..ee8ad6e087fac4 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 4c9bd0ba381062..864849d170daad 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 d28667aeabcd03..b4c2fdebd414ab 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 25be30d714a4fc..28b68e2bdf3930 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 bf17459fd3717b..a92bb1ac7e117c 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 1532af2aed26a6..dcc0d0f29ba739 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 204c5dec1575f3..7528ff1215d4a2 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 2ac9254e714f83..76d78ee67c44c9 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 b3bf165e8e8d7a..37429d48ddf427 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 b1bae3dc7b2a97..5e5b0eef3d4cd5 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 dac02d95e18f8c..ca5e93aab22086 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 3ed0df6639a622..3917a6b67f35b4 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 c7e9b107a45f67..56124bb35f9067 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 961cdec0c6c040..4f19fe75087cd0 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 9208478fa3ef96..65e087c4b323e1 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 78139437bee796..cb46a0a86369d1 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 0357bd7b5cdc86..ed4bb74cfa756e 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 f8af3614d787e1..799e9db3e3cdc1 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 f5760704309112..d3918096fc4e33 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 21a3374c8f20b9..05813321385c93 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 2e09a43deffda0..2973b8d378c304 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 991a8a3c799e23..2d61c08e874965 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 9dde9e1fb0ee5d..364d4fc5052bd0 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 d215e845f2ecf0..7099ae35adf875 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 a407a065e0a9ab..be0793d2b2eb17 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 dd0e8f5f59b2a0..dee5dec8a0d435 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 7c21183bd950a6..7cae17323a2274 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 36e654cc461c86..050161847c3fa9 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 9e158348e4bfba..991071864bd814 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 a6570e9a22f00e..5c4a48a32ce800 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 6207c0bcaf1098..1bf3aab5a22bbc 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 f94833f6f8e1dd..a3143da8bdd981 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 a991a20e89881a..1ed9a5c4ec33ad 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 3d756d2edbc24c..4e5a7c942ee85e 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 268f915e2603b6..ea2119d9a12656 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 5a11a629e2ce4b..da320c2385ce0d 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 9c3f68da7568d6..9a6e4ac8f1e6d0 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 3ee30b89ea0a59..c1ac5e2ca8d6d8 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 17e72e6f9ecff1..02fd6b09c5ec74 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 962688361f6bd4..ced2bb935516fd 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 a43701393039af..86398034c23b75 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 a68576a591830d..18570a9f0f6726 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 e0377f11c6009d..c3028cb9720491 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 750ccff7c794f1..a524b400189b55 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 481664c191be8a..a46d5f2871c29f 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 81b0c766b8ee93..e5962ebab25e7f 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 a9dd35ef267053..bc7d60d8b27c27 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 13fdb3ac613b9a..e0174926854afe 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 ec7fb9aa58d2b8..4885114e6360f6 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 7841a5f4ecd702..3fed74a80af96b 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 83cf6348f90749..b16d12b01cd386 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 0f2371b9ef90e1..ff14f47e1a4d1d 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 a54ec3b47229eb..000f457820c06b 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 c46e45ddacf0f5..1ad71bac883143 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 1c1662094b730a..2936b7836c7856 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 e1351d495aba69..ac995196cf9c7e 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 cfc7cbd4d10461..352163683d80f4 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 e6d5bd33c7076f..0d0418e344726f 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 3e6e62ce10b04e..956e39abf262e8 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 62125bd95e0928..37c8d071211833 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 3a754649c67042..194928696fcbe1 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 f4b291598e0aa9..af05182284fc0b 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 7530fc307fb061..bd9a9ef31b68c1 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 e69897d0ad1437..2d4dea3c8b7a50 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 19d6955bd429b6..285ee97d20aae1 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 8f92a49d61ab08..0b3b58eb528b3b 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 ed574ac555f439..50406003b832db 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 0966eb30aff807..0cdf67f593ad05 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 14da544821c6d1..cd8ce65a79c342 100644
--- a/apps/ssr-tests/package.json
+++ b/apps/ssr-tests/package.json
@@ -21,7 +21,7 @@
     "@types/mocha": "2.2.39",
     "@types/webpack-env": "1.13.0",
     "mocha": "^3.3.0",
-    "office-ui-fabric-react": ">=5.81.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.89.0 <6.0.0",
     "raw-loader": "^0.5.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json
index 3366d6813c4ddd..422498e0efcff3 100644
--- a/apps/test-bundle-button/package.json
+++ b/apps/test-bundle-button/package.json
@@ -25,7 +25,7 @@
   "dependencies": {
     "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0",
     "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0",
-    "office-ui-fabric-react": ">=5.81.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.89.0 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json
index c6de7b07c05263..c9ad72cefe8556 100644
--- a/apps/todo-app/package.json
+++ b/apps/todo-app/package.json
@@ -19,7 +19,7 @@
     "@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",
+    "office-ui-fabric-react": ">=5.89.0 <6.0.0",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "typescript": "2.8.1",
diff --git a/apps/todo-app/src/components/TodoForm.tsx b/apps/todo-app/src/components/TodoForm.tsx
index c381a5fd8980a8..57a5d51148bab7 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/package.json b/apps/vr-tests/package.json
index aa79a27ddfbe8e..7eee74674948b7 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -23,12 +23,12 @@
     "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",
+    "office-ui-fabric-react": ">=5.89.0 <6.0.0",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "typescript": "2.8.1",
diff --git a/apps/vr-tests/src/stories/Rating.stories.tsx b/apps/vr-tests/src/stories/Rating.stories.tsx
index 280bfdbddbb5a3..60f15cfdf2756d 100644
--- a/apps/vr-tests/src/stories/Rating.stories.tsx
+++ b/apps/vr-tests/src/stories/Rating.stories.tsx
@@ -29,6 +29,12 @@ storiesOf('Rating', module)
       max={ 5 }
       rating={ 2 }
     />
+  )).add('Allow Zero', () => (
+    <Rating
+      allowZeroStars={ true }
+      max={ 5 }
+      rating={ 0 }
+    />
   )).add('Large', () => (
     <Rating
       min={ 1 }
diff --git a/common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json b/common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json
deleted file mode 100644
index df66dfe34204b1..00000000000000
--- a/common/changes/@uifabric/example-app-base/edit-docs-buttons_2018-03-31-00-27.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/example-app-base",
-      "comment": "Add new APIs for editing sections on GitHub.",
-      "type": "minor"
-    }
-  ],
-  "packageName": "@uifabric/example-app-base",
-  "email": "v-jojanz@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/example-app-base/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/example-app-base/remove-module-entries_2018-04-15-20-25.json
deleted file mode 100644
index 6385145549e737..00000000000000
--- a/common/changes/@uifabric/example-app-base/remove-module-entries_2018-04-15-20-25.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/example-app-base",
-      "comment": "Removing module entry temporarily. (Will be added back in 6.0.)",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/example-app-base",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/example-app-base/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/example-app-base/update-react_2018-04-16-00-49.json
deleted file mode 100644
index 354e192e1b1cdd..00000000000000
--- a/common/changes/@uifabric/example-app-base/update-react_2018-04-16-00-49.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/example-app-base",
-      "comment": "Updating build to React 16.3.1.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/example-app-base",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/M365Nav_2018-03-29-21-53.json b/common/changes/@uifabric/experiments/M365Nav_2018-03-29-21-53.json
deleted file mode 100644
index 4fc42b890fe667..00000000000000
--- a/common/changes/@uifabric/experiments/M365Nav_2018-03-29-21-53.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/experiments",
-      "comment": "M365Nav component as an experiment",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/experiments",
-  "email": "sikrishn@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/amyngu-preferConst_2018-04-10-23-09.json b/common/changes/@uifabric/experiments/amyngu-preferConst_2018-04-10-23-09.json
deleted file mode 100644
index d67c6f9a773511..00000000000000
--- a/common/changes/@uifabric/experiments/amyngu-preferConst_2018-04-10-23-09.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/experiments",
-      "comment": "prefer const, instead of let, for extendedpicker, floatingpicker, and selecteditemlists",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/experiments",
-  "email": "amyngu@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/experiments/remove-module-entries_2018-04-15-20-25.json
deleted file mode 100644
index b2b545b919dd76..00000000000000
--- a/common/changes/@uifabric/experiments/remove-module-entries_2018-04-15-20-25.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/experiments",
-      "comment": "Removing module entry temporarily. (Will be added back in 6.0.)",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/experiments",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/experiments/update-react_2018-04-16-00-49.json
deleted file mode 100644
index ef31fc935af03c..00000000000000
--- a/common/changes/@uifabric/experiments/update-react_2018-04-16-00-49.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/experiments",
-      "comment": "Updating build to React 16.3.1.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/experiments",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/v-vibr-EnumFix_2018-04-13-01-58.json b/common/changes/@uifabric/experiments/v-vibr-EnumFix_2018-04-13-01-58.json
deleted file mode 100644
index 9ff1f486081567..00000000000000
--- a/common/changes/@uifabric/experiments/v-vibr-EnumFix_2018-04-13-01-58.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/experiments",
-      "comment": "Shimmer: Changes casing on enums in Shimmer.types",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/experiments",
-  "email": "v-vibr@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/v-vibr-Experiments-imports_2018-04-13-23-51.json b/common/changes/@uifabric/experiments/v-vibr-Experiments-imports_2018-04-13-23-51.json
deleted file mode 100644
index c26a701cdba6ab..00000000000000
--- a/common/changes/@uifabric/experiments/v-vibr-Experiments-imports_2018-04-13-23-51.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/experiments",
-      "comment": "Experiments: fixing imports for example pages for better user understanding.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/experiments",
-  "email": "v-vibr@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/v-vibr-Shimmer-example_2018-04-14-01-44.json b/common/changes/@uifabric/experiments/v-vibr-Shimmer-example_2018-04-14-01-44.json
deleted file mode 100644
index 8231e782bad39a..00000000000000
--- a/common/changes/@uifabric/experiments/v-vibr-Shimmer-example_2018-04-14-01-44.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/experiments",
-      "comment": "Shimmer: adding two more examples as per designers request.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/experiments",
-  "email": "v-vibr@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/v-vibr-shimmer-importsFix_2018-04-13-01-05.json b/common/changes/@uifabric/experiments/v-vibr-shimmer-importsFix_2018-04-13-01-05.json
deleted file mode 100644
index e4eec79859a9f0..00000000000000
--- a/common/changes/@uifabric/experiments/v-vibr-shimmer-importsFix_2018-04-13-01-05.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/experiments",
-      "comment": "Shimmer: imports audited",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/experiments",
-  "email": "v-vibr@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/fabric-website/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/fabric-website/update-react_2018-04-16-00-49.json
deleted file mode 100644
index 07f4b1ea334470..00000000000000
--- a/common/changes/@uifabric/fabric-website/update-react_2018-04-16-00-49.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/fabric-website",
-      "comment": "Updating build to React 16.3.1.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/fabric-website",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/file-type-icons/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/file-type-icons/remove-module-entries_2018-04-15-20-25.json
deleted file mode 100644
index d2aa44a583db11..00000000000000
--- a/common/changes/@uifabric/file-type-icons/remove-module-entries_2018-04-15-20-25.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/file-type-icons",
-      "comment": "Removing module entry temporarily. (Will be added back in 6.0.)",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/file-type-icons",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/file-type-icons/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/file-type-icons/update-react_2018-04-16-00-49.json
deleted file mode 100644
index f2a33bcc6a0384..00000000000000
--- a/common/changes/@uifabric/file-type-icons/update-react_2018-04-16-00-49.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/file-type-icons",
-      "comment": "Updating build to React 16.3.1.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/file-type-icons",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/icons/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/icons/remove-module-entries_2018-04-15-20-25.json
deleted file mode 100644
index a8418444ddc29c..00000000000000
--- a/common/changes/@uifabric/icons/remove-module-entries_2018-04-15-20-25.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/icons",
-      "comment": "Removing module entry temporarily. (Will be added back in 6.0.)",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/icons",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/merge-styles/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json b/common/changes/@uifabric/merge-styles/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json
new file mode 100644
index 00000000000000..a1990b77f20195
--- /dev/null
+++ b/common/changes/@uifabric/merge-styles/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/merge-styles",
+      "comment": "Add `animation` to `IRawStyleBase` for use in style sets.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/merge-styles",
+  "email": "v-jojanz@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/merge-styles/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/merge-styles/remove-module-entries_2018-04-15-20-25.json
deleted file mode 100644
index a837bbb41be96b..00000000000000
--- a/common/changes/@uifabric/merge-styles/remove-module-entries_2018-04-15-20-25.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/merge-styles",
-      "comment": "Removing module entry temporarily. (Will be added back in 6.0.)",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/merge-styles",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/styling/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/styling/remove-module-entries_2018-04-15-20-25.json
deleted file mode 100644
index 294fc484291532..00000000000000
--- a/common/changes/@uifabric/styling/remove-module-entries_2018-04-15-20-25.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/styling",
-      "comment": "Removing module entry temporarily. (Will be added back in 6.0.)",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/styling",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/styling/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/styling/update-react_2018-04-16-00-49.json
deleted file mode 100644
index 666b6b4d236703..00000000000000
--- a/common/changes/@uifabric/styling/update-react_2018-04-16-00-49.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/styling",
-      "comment": "Updating build to React 16.3.1.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/styling",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/utilities/misc-fixs_2018-04-01-07-38.json b/common/changes/@uifabric/utilities/misc-fixs_2018-04-01-07-38.json
deleted file mode 100644
index a7c2fe449ef133..00000000000000
--- a/common/changes/@uifabric/utilities/misc-fixs_2018-04-01-07-38.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/utilities",
-      "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.",
-      "type": "minor"
-    }
-  ],
-  "packageName": "@uifabric/utilities",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/utilities/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/utilities/remove-module-entries_2018-04-15-20-25.json
deleted file mode 100644
index 90c6fe87c370a7..00000000000000
--- a/common/changes/@uifabric/utilities/remove-module-entries_2018-04-15-20-25.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/utilities",
-      "comment": "Removing module entry temporarily. (Will be added back in 6.0.)",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/utilities",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/utilities/ts-2-8_2018-03-30-06-33.json b/common/changes/@uifabric/utilities/ts-2-8_2018-03-30-06-33.json
deleted file mode 100644
index 82d9ea20e0742a..00000000000000
--- a/common/changes/@uifabric/utilities/ts-2-8_2018-03-30-06-33.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/utilities",
-      "comment": "Upgrade to TypeScript 2.8.1",
-      "type": "minor"
-    }
-  ],
-  "packageName": "@uifabric/utilities",
-  "email": "christianjordangonzalez@gmail.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/utilities/update-react_2018-04-16-00-49.json b/common/changes/@uifabric/utilities/update-react_2018-04-16-00-49.json
deleted file mode 100644
index c8e3c5efb59a7e..00000000000000
--- a/common/changes/@uifabric/utilities/update-react_2018-04-16-00-49.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/utilities",
-      "comment": "Updating build to React 16.3.1.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/utilities",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/variants/remove-module-entries_2018-04-15-20-25.json b/common/changes/@uifabric/variants/remove-module-entries_2018-04-15-20-25.json
deleted file mode 100644
index 28c5496e55ddb6..00000000000000
--- a/common/changes/@uifabric/variants/remove-module-entries_2018-04-15-20-25.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/variants",
-      "comment": "Removing module entry temporarily. (Will be added back in 6.0.)",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/variants",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/ts-2-8_2018-03-30-06-33.json b/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json
similarity index 60%
rename from common/changes/office-ui-fabric-react/ts-2-8_2018-03-30-06-33.json
rename to common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json
index 835cd2aa8d58a9..c3c4a5f41b02d7 100644
--- a/common/changes/office-ui-fabric-react/ts-2-8_2018-03-30-06-33.json
+++ b/common/changes/office-ui-fabric-react/ClassName_2018-04-16-07-21.json
@@ -2,10 +2,10 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "Upgrade to TypeScript 2.8.1",
+      "comment": "Added optional className property to Calendar",
       "type": "minor"
     }
   ],
   "packageName": "office-ui-fabric-react",
-  "email": "christianjordangonzalez@gmail.com"
+  "email": "aur@gmx.de"
 }
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json b/common/changes/office-ui-fabric-react/breadcrumb-validation_2018-04-24-20-18.json
similarity index 70%
rename from common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json
rename to common/changes/office-ui-fabric-react/breadcrumb-validation_2018-04-24-20-18.json
index 711ddf9131d25d..4b33ce7dc64ce2 100644
--- a/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json
+++ b/common/changes/office-ui-fabric-react/breadcrumb-validation_2018-04-24-20-18.json
@@ -2,7 +2,7 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "Fix style and alignment issues with DetailsList headers",
+      "comment": "Fix props validation for Breadcrumb",
       "type": "patch"
     }
   ],
diff --git a/common/changes/office-ui-fabric-react/breadcrumbFocus_2018-04-12-22-52.json b/common/changes/office-ui-fabric-react/breadcrumbFocus_2018-04-12-22-52.json
deleted file mode 100644
index d13446f5d7708b..00000000000000
--- a/common/changes/office-ui-fabric-react/breadcrumbFocus_2018-04-12-22-52.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Add focus method to Breadcrumb",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "v-hudole@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/chiechan-fixContextualMenuSplitButtonStyling_2018-04-12-20-45.json b/common/changes/office-ui-fabric-react/chiechan-fixContextualMenuSplitButtonStyling_2018-04-12-20-45.json
deleted file mode 100644
index 1ee10bfcd06d59..00000000000000
--- a/common/changes/office-ui-fabric-react/chiechan-fixContextualMenuSplitButtonStyling_2018-04-12-20-45.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Contextual Split Button: Change styling to only have one split button container instead of two",
-      "type": "minor"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "chiechan@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/ddlbrena-popupScrollBarFix_2018-04-12-05-44.json b/common/changes/office-ui-fabric-react/ddlbrena-popupScrollBarFix_2018-04-12-05-44.json
deleted file mode 100644
index 796dbfa4cb471f..00000000000000
--- a/common/changes/office-ui-fabric-react/ddlbrena-popupScrollBarFix_2018-04-12-05-44.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Fix scroll bar shows when it should not.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "ddlbrena@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/dropdown-role-fix-4386_2018-04-10-21-58.json b/common/changes/office-ui-fabric-react/dropdown-role-fix-4386_2018-04-10-21-58.json
deleted file mode 100644
index c9eb3c2d78e28b..00000000000000
--- a/common/changes/office-ui-fabric-react/dropdown-role-fix-4386_2018-04-10-21-58.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Changed Dropdown components role from combobox to dropdown",
-      "type": "minor"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "v-brgarl@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/hide_suggestions_footer_2018-04-13-18-56.json b/common/changes/office-ui-fabric-react/hide_suggestions_footer_2018-04-13-18-56.json
deleted file mode 100644
index 3be40d9e521cb1..00000000000000
--- a/common/changes/office-ui-fabric-react/hide_suggestions_footer_2018-04-13-18-56.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Bring back isResultsFooterVisible that is props but never used.",
-      "type": "minor"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "joezha@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/jspurlin-KeepArrowKeysInsideSpinButton_2018-04-12-14-31.json b/common/changes/office-ui-fabric-react/jspurlin-KeepArrowKeysInsideSpinButton_2018-04-12-14-31.json
deleted file mode 100644
index 0843c29e1b9a60..00000000000000
--- a/common/changes/office-ui-fabric-react/jspurlin-KeepArrowKeysInsideSpinButton_2018-04-12-14-31.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "SpinButton: Make sure up/down Arrow do not leave the spinButton",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "jspurlin@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/keco-calendar-keydown-regression_2018-04-24-15-57.json b/common/changes/office-ui-fabric-react/keco-calendar-keydown-regression_2018-04-24-15-57.json
new file mode 100644
index 00000000000000..3816bc46c2f2a3
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/keco-calendar-keydown-regression_2018-04-24-15-57.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Gate calendar month, year, and today keydowns for only ENTER as onClick handles space with button nodes to fix double date change regression.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "keco@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/kysedate-combobox-handle-weird-text_2018-04-13-00-10.json b/common/changes/office-ui-fabric-react/kysedate-combobox-handle-weird-text_2018-04-13-00-10.json
deleted file mode 100644
index 6ef7bdc0515621..00000000000000
--- a/common/changes/office-ui-fabric-react/kysedate-combobox-handle-weird-text_2018-04-13-00-10.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "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.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "kysedate@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/kysedate-combobox-option-rendering-optomization_2018-04-12-00-59.json b/common/changes/office-ui-fabric-react/kysedate-combobox-option-rendering-optomization_2018-04-12-00-59.json
deleted file mode 100644
index 964aedd7e6c239..00000000000000
--- a/common/changes/office-ui-fabric-react/kysedate-combobox-option-rendering-optomization_2018-04-12-00-59.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "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. ",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "kysedate@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/layer-host_2018-04-11-15-15.json b/common/changes/office-ui-fabric-react/layer-host_2018-04-11-15-15.json
deleted file mode 100644
index 685591bbf61b71..00000000000000
--- a/common/changes/office-ui-fabric-react/layer-host_2018-04-11-15-15.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Add ability to use Customer to provide a default layer host",
-      "type": "minor"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "tmichon@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/master_2018-04-04-05-56.json b/common/changes/office-ui-fabric-react/master_2018-04-04-05-56.json
deleted file mode 100644
index 43328552a57560..00000000000000
--- a/common/changes/office-ui-fabric-react/master_2018-04-04-05-56.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Adds tests for DocumentCardTitle title truncation",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "mark@thedutchies.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json b/common/changes/office-ui-fabric-react/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json
similarity index 50%
rename from common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json
rename to common/changes/office-ui-fabric-react/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json
index 4f81ceaabfd170..1ca09fdf4bf6eb 100644
--- a/common/changes/office-ui-fabric-react/edit-docs-buttons_2018-03-31-00-27.json
+++ b/common/changes/office-ui-fabric-react/mergeStyles-ProgressIndicator-part2_2018-04-18-01-05.json
@@ -2,8 +2,8 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "Add new component page prop for editing on GitHub.",
-      "type": "patch"
+      "comment": "Complete ProgressIndicator conversion to mergeStyles. Add `barHeight` to enable changing height of progress bar.",
+      "type": "minor"
     }
   ],
   "packageName": "office-ui-fabric-react",
diff --git a/common/changes/office-ui-fabric-react/improve-contextualmenu-perf_2018-04-11-23-07.json b/common/changes/office-ui-fabric-react/minorpicker-fixes_2018-04-16-18-52.json
similarity index 67%
rename from common/changes/office-ui-fabric-react/improve-contextualmenu-perf_2018-04-11-23-07.json
rename to common/changes/office-ui-fabric-react/minorpicker-fixes_2018-04-16-18-52.json
index 41c50e59c4b210..6de2d06c45968f 100644
--- a/common/changes/office-ui-fabric-react/improve-contextualmenu-perf_2018-04-11-23-07.json
+++ b/common/changes/office-ui-fabric-react/minorpicker-fixes_2018-04-16-18-52.json
@@ -2,7 +2,7 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "ContextualMenu/Button: Improve perf and add hiddenvariable to buttons",
+      "comment": "Pickers: Several fixes regarding certain props",
       "type": "minor"
     }
   ],
diff --git a/common/changes/office-ui-fabric-react/misc-fixs_2018-04-01-07-38.json b/common/changes/office-ui-fabric-react/misc-fixs_2018-04-01-07-38.json
deleted file mode 100644
index 898cd84eb1991c..00000000000000
--- a/common/changes/office-ui-fabric-react/misc-fixs_2018-04-01-07-38.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "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.",
-      "type": "minor"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/pivotFocus_2018-04-12-22-55.json b/common/changes/office-ui-fabric-react/no_unused_vars_part_of_ts_2018-04-25-00-45.json
similarity index 54%
rename from common/changes/office-ui-fabric-react/pivotFocus_2018-04-12-22-55.json
rename to common/changes/office-ui-fabric-react/no_unused_vars_part_of_ts_2018-04-25-00-45.json
index 1e900f6f3b5b06..233a70992be0b8 100644
--- a/common/changes/office-ui-fabric-react/pivotFocus_2018-04-12-22-55.json
+++ b/common/changes/office-ui-fabric-react/no_unused_vars_part_of_ts_2018-04-25-00-45.json
@@ -1,11 +1,11 @@
 {
   "changes": [
     {
+      "comment": "",
       "packageName": "office-ui-fabric-react",
-      "comment": "Add focus method to Pivot.",
-      "type": "patch"
+      "type": "none"
     }
   ],
   "packageName": "office-ui-fabric-react",
-  "email": "v-hudole@microsoft.com"
+  "email": "cliff.koh@microsoft.com"
 }
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/panel-grammarlyfix-4305_2018-04-06-19-47.json b/common/changes/office-ui-fabric-react/panel-grammarlyfix-4305_2018-04-06-19-47.json
deleted file mode 100644
index c3eb1bccc378ab..00000000000000
--- a/common/changes/office-ui-fabric-react/panel-grammarlyfix-4305_2018-04-06-19-47.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Set Panel's FocusTrapZone prop isClickableOutsideFocusTrap to true by default to allow click interactions while panel is open",
-      "type": "minor"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "v-brgarl@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/redo-focuszone-change_2018-04-15-19-20.json b/common/changes/office-ui-fabric-react/redo-focuszone-change_2018-04-15-19-20.json
deleted file mode 100644
index cf6dfeb297c7d0..00000000000000
--- a/common/changes/office-ui-fabric-react/redo-focuszone-change_2018-04-15-19-20.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "FocusZone: redoing the \"reset alignment on mouse down\" change in a less intrusive manner, with test coverage.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/remove-module-entries_2018-04-15-20-25.json b/common/changes/office-ui-fabric-react/remove-module-entries_2018-04-15-20-25.json
deleted file mode 100644
index b145c901792938..00000000000000
--- a/common/changes/office-ui-fabric-react/remove-module-entries_2018-04-15-20-25.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "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.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json b/common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json
deleted file mode 100644
index 6207afae72398e..00000000000000
--- a/common/changes/office-ui-fabric-react/selection-link_2018-04-13-14-47.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Prevent SelectionZone from interfering with links and buttons",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "tmichon@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/tagpicker-itemrole-3385_2018-04-12-18-36.json b/common/changes/office-ui-fabric-react/tagpicker-itemrole-3385_2018-04-12-18-36.json
deleted file mode 100644
index fe4ba75157d19b..00000000000000
--- a/common/changes/office-ui-fabric-react/tagpicker-itemrole-3385_2018-04-12-18-36.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Added missing role to TagPicker's TagItem.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "v-brgarl@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/undo-focuszone-change_2018-04-15-18-09.json b/common/changes/office-ui-fabric-react/undo-focuszone-change_2018-04-15-18-09.json
deleted file mode 100644
index 977b7a95f4352f..00000000000000
--- a/common/changes/office-ui-fabric-react/undo-focuszone-change_2018-04-15-18-09.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "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.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/update-react_2018-04-16-00-49.json b/common/changes/office-ui-fabric-react/update-react_2018-04-16-00-49.json
deleted file mode 100644
index c9f7173a66dfe0..00000000000000
--- a/common/changes/office-ui-fabric-react/update-react_2018-04-16-00-49.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Updating build to React 16.3.1.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/users-prmutn-ariaRowIndexBugfix_2018-04-11-10-40.json b/common/changes/office-ui-fabric-react/users-prmutn-ariaRowIndexBugfix_2018-04-11-10-40.json
deleted file mode 100644
index 60c6c3d01c3990..00000000000000
--- a/common/changes/office-ui-fabric-react/users-prmutn-ariaRowIndexBugfix_2018-04-11-10-40.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "DetailsList: Starting aria-rowIndex from 1 instead of 0 as mentioned in https://www.w3.org/TR/wai-aria-1.1/#aria-rowindex",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "preetsaimutneja@gmail.com"
-}
diff --git a/common/changes/office-ui-fabric-react/wutonghao-UpdateColorPickerWhenAlphaIsHidden_2018-04-12-14-47.json b/common/changes/office-ui-fabric-react/wutonghao-UpdateColorPickerWhenAlphaIsHidden_2018-04-12-14-47.json
deleted file mode 100644
index f91d3314e6eaf7..00000000000000
--- a/common/changes/office-ui-fabric-react/wutonghao-UpdateColorPickerWhenAlphaIsHidden_2018-04-12-14-47.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "ColorPicker: text fields now update when `alphaSliderHidden` is `true`.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "wuthao@microsoft.com"
-}
diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json
index bf7f32d9e86f70..bb7886a232192e 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-s/+4I1stfHVNJUr02wUGBqmXKrw=",
+      "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",
@@ -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,7 +595,7 @@
     },
     "@rush-temp/example-app-base": {
       "version": "file:projects/example-app-base.tgz",
-      "integrity": "sha1-g2umsH4jBo7kU+WDzaVJkbNlwaw=",
+      "integrity": "sha1-DkUcfRVaa8xwsxbZRsRwvrr9KbU=",
       "requires": {
         "@types/es6-promise": "0.0.32",
         "@types/highlight.js": "9.12.2",
@@ -607,16 +607,16 @@
         "es6-weak-map": "2.0.2",
         "highlight.js": "9.12.0",
         "markdown-to-jsx": "6.6.1",
-        "office-ui-fabric-react": "5.81.1",
-        "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-1MOz3fzgJdgsZbnqVpEEpLVm8IU=",
+      "integrity": "sha1-daarXQdKu4kkuBeXhStW7KW9YK8=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/enzyme": "3.1.5",
@@ -635,17 +635,17 @@
         "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-dZr7KSR9vJoixvZQPJFiSIX+DLU=",
+      "integrity": "sha1-a1mHbvDvXnWaXuyFJEIvClcuHpI=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/es6-promise": "0.0.32",
@@ -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-MLLcWZH3dcQlOIsFVjHP+jkHwB8=",
+      "integrity": "sha1-Yn+JPy99YoMSgbFnw5ID2WktWNs=",
       "requires": {
         "@types/react": "16.3.10",
         "@types/react-dom": "16.0.5",
-        "react": "16.3.1",
-        "react-dom": "16.3.1",
+        "react": "16.3.2",
+        "react-dom": "16.3.2",
         "tslib": "1.9.0"
       }
     },
     "@rush-temp/icons": {
       "version": "file:projects/icons.tgz",
-      "integrity": "sha1-2XwOquDqAafVO8IpJupgyDrA+oI=",
+      "integrity": "sha1-pVQHHai8Itvqt9Yu8AHEDXB1BRs=",
       "requires": {
         "tslib": "1.9.0"
       }
     },
     "@rush-temp/jest-serializer-merge-styles": {
       "version": "file:projects/jest-serializer-merge-styles.tgz",
-      "integrity": "sha1-5FDKIBEZN+O4wvS9p7J00Br0V3s=",
+      "integrity": "sha1-n+RTd+E26yjhauT284rh4gXLfzo=",
       "requires": {
         "@types/jest": "21.1.8"
       }
     },
     "@rush-temp/merge-styles": {
       "version": "file:projects/merge-styles.tgz",
-      "integrity": "sha1-QIuSxyehZfdDcAXXirfgoWEEP7o=",
+      "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-i8JOWnOFhaTSFEmXCm+h8r+9j+E=",
+      "integrity": "sha1-15D4XJwcbRk65so2L5a1u+DEUCU=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/enzyme": "3.1.5",
@@ -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-8Ghyr4/qGNQ/YEHwqaygWsDmMD4=",
+      "integrity": "sha1-Lpw29kpo8XYUjrbjk3AiOmKBc2I=",
       "requires": {
         "tslint-react": "3.5.1"
       }
     },
     "@rush-temp/ssr-tests": {
       "version": "file:projects/ssr-tests.tgz",
-      "integrity": "sha1-+nK7SlDCapSHb/B61UlRABKdQd4=",
+      "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"
       },
@@ -1060,7 +1060,7 @@
     },
     "@rush-temp/styling": {
       "version": "file:projects/styling.tgz",
-      "integrity": "sha1-03CC7l1s8xhZIFkk4JIqB3iFNJY=",
+      "integrity": "sha1-oCh2p/rfJ1hLnsJ+kA4etUwi93s=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/jest": "21.1.8",
@@ -1068,27 +1068,27 @@
         "@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-Sud3Qsm2huOFkMCfFZJT/XShdZ8=",
+      "integrity": "sha1-DEKsr3vPRqOJSyHa++oqhlnkt9Q=",
       "requires": {
         "@types/prop-types": "15.5.2",
         "@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-k4V69iaBHsJ8QloWsHkmBsbqx1w=",
+      "integrity": "sha1-g+j/qa8VUW7jubOkemtdrdiWsRM=",
       "requires": {
         "@microsoft/load-themed-styles": "1.7.50",
         "@types/es6-promise": "0.0.32",
@@ -1097,15 +1097,15 @@
         "@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.8.1"
       }
     },
     "@rush-temp/utilities": {
       "version": "file:projects/utilities.tgz",
-      "integrity": "sha1-UQZx1Uyz4Cd32KAug5xteFLzSFU=",
+      "integrity": "sha1-/OUe7tPLUU+ih/KZ/03w8cRa5L0=",
       "requires": {
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
@@ -1117,15 +1117,15 @@
         "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-V9Y+UfNieu0HjBP64XMsygPdE68=",
+      "integrity": "sha1-8x6mkzR8vS0Ro1fs0Ctch++yuY8=",
       "requires": {
         "@types/jest": "21.1.8",
         "tslib": "1.9.0"
@@ -1133,7 +1133,7 @@
     },
     "@rush-temp/vr-tests": {
       "version": "file:projects/vr-tests.tgz",
-      "integrity": "sha1-Lf3JH56MLke69+FuXZfn/W/Go38=",
+      "integrity": "sha1-km3rck0pwUcIkwCcmzEE5OtXAtU=",
       "requires": {
         "@storybook/addon-options": "3.2.3",
         "@storybook/react": "3.4.1",
@@ -1145,10 +1145,10 @@
         "file-loader": "0.11.2",
         "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",
@@ -1251,7 +1251,7 @@
         "@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",
@@ -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"
       }
@@ -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",
@@ -4281,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": {
@@ -5404,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",
@@ -5756,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",
@@ -5933,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": {
@@ -7536,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",
@@ -7577,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",
@@ -8724,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",
@@ -8797,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",
@@ -8815,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"
@@ -8868,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",
@@ -8883,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"
       }
@@ -8893,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"
       }
@@ -8914,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"
       }
     },
@@ -8951,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",
@@ -8994,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",
@@ -9008,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",
@@ -9021,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"
@@ -9269,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",
@@ -9701,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": {
@@ -10577,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",
@@ -11030,15 +11082,15 @@
       "integrity": "sha1-KhZgU8ye+wlWUGPn/Td8yKywNBw="
     },
     "office-ui-fabric-react": {
-      "version": "5.81.1",
-      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.81.1.tgz",
-      "integrity": "sha512-caZGXpLjwVmr9iSD8jWedxrsBymI0tI4tVq+3+/b0rUGg65I2tDOteVtAdDnzDfhT3EUJA4JX3x4+6SkPptlwg==",
+      "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"
       }
@@ -11516,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",
@@ -11551,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": {
@@ -13306,9 +13363,9 @@
       "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
     },
     "prettier": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.12.0.tgz",
-      "integrity": "sha512-Wz0SMncgaglBzDcohH3ZIAi4nVpzOIEweFzCOmgVEoRSeO72b4dcKGfgxoRGVMaFlh1r7dlVaJ+f3CIHfeH6xg=="
+      "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",
@@ -13668,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",
@@ -13741,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",
@@ -13765,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": {
@@ -13783,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"
               }
@@ -13859,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",
@@ -13951,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",
@@ -14015,14 +14072,14 @@
       }
     },
     "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": {
@@ -14452,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",
@@ -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",
@@ -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"
       }
     },
@@ -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,7 +17855,7 @@
       "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",
@@ -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",
@@ -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,8 +19098,8 @@
         "mkdirp": "0.5.1",
         "p-each-series": "1.0.0",
         "p-lazy": "1.0.0",
-        "prettier": "1.12.0",
-        "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",
@@ -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",
@@ -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"
       },
@@ -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",
@@ -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",
@@ -20034,7 +20208,7 @@
       "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 840a2759ffaa26..5368c017587def 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 9777f8c931d521..9a36550aefe33c 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 b657ab6ca488af..24810d4b8e0838 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 c6ffb651b524a1..42f862d1ec829b 100644
--- a/ghdocs/Contributing/NewComponent.md
+++ b/ghdocs/Contributing/NewComponent.md
@@ -135,4 +135,4 @@ For any new component you should think of adding **Unit tests**, **React functio
 
 ### Code Owners
 
-Add yourself to the [Code owners file](../../,github/CODEOWNERS).
\ No newline at end of file
+Add yourself to the [Code owners file](../../.github/CODEOWNERS).
diff --git a/ghdocs/References/Fabric_Component.md b/ghdocs/References/Fabric_Component.md
index d3515040bbda8d..f24af4b85fb560 100644
--- a/ghdocs/References/Fabric_Component.md
+++ b/ghdocs/References/Fabric_Component.md
@@ -1,6 +1,6 @@
 # The Fabric component
 
-Consumers using Fabric components should be wrapping their content within the Fabric component. 
+Consumers using Fabric components should be wrapping their content within the Fabric component.
 
 ```tsx
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
@@ -17,15 +17,5 @@ ReactDOM.render(
 
 * Note: The Fabric component will render a div, and will mix in div properties. You may use it as a replacement for a root div.
 
-The Fabric component is a root wrapper component which solves 2 problems:
-
-1. The default fontFamily css style is defined at this layer, allowing components within to inherit the default fontFamily. The class `ms-Fabric` defines this.
-
-2. The focus rectangle visibility is managed through the `is-focusVisible` css class.
-
-## Focus rectangle
-
-Focus rectangles around components should only be shown when the user presses tab or directional keys. When they press mouse buttons, focus rectangles should not be shown. The `Fabric` component that will conditionally add/remove an `is-focusVisible` class, and components rendering focus rectangles should conditionalize their visibility based on the `.ms-Fabric.is-focusVisible` parent selector.
-
-This is abstracted in the scss include `focus-border()`.
+The Fabric component is a root wrapper component which defines the default fontFamily for elements within to use.
 
diff --git a/packages/example-app-base/CHANGELOG.json b/packages/example-app-base/CHANGELOG.json
index d4aa248d3b5fa9..de8ab6e43ed9d7 100644
--- a/packages/example-app-base/CHANGELOG.json
+++ b/packages/example-app-base/CHANGELOG.json
@@ -1,6 +1,100 @@
 {
   "name": "@uifabric/example-app-base",
   "entries": [
+    {
+      "version": "5.11.0",
+      "tag": "@uifabric/example-app-base_v5.11.0",
+      "date": "Mon, 23 Apr 2018 10:24:54 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "2bbc7950bd9f10ea1e792dcb1155c625aa8e8f4f",
+            "comment": "Updating the focus styling to use the generalized `ms-Fabric--isFocusVisibl"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.25.0 <6.0.0` to `>=5.26.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.26.0 <6.0.0` to `>=5.27.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "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 5207c37bdc3bd6..7a9b299bf2aa64 100644
--- a/packages/example-app-base/CHANGELOG.md
+++ b/packages/example-app-base/CHANGELOG.md
@@ -1,6 +1,39 @@
 # 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 Mon, 23 Apr 2018 10:24:54 GMT and should not be manually modified.
+
+## 5.11.0
+Mon, 23 Apr 2018 10:24:54 GMT
+
+### Minor changes
+
+- Updating the focus styling to use the generalized `ms-Fabric--isFocusVisibl
+
+## 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 5222e8cf041e5b..e376a319ecd640 100644
--- a/packages/example-app-base/package.json
+++ b/packages/example-app-base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/example-app-base",
-  "version": "5.9.0",
+  "version": "5.11.0",
   "description": "Office UI Fabric example app base utilities for building example sites.",
   "main": "lib/index.js",
   "typings": "lib-es2015/index.d.ts",
@@ -33,8 +33,8 @@
     "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.27.0 <6.0.0",
+    "@uifabric/utilities": ">=5.28.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/common/_focusBorder.scss b/packages/example-app-base/src/common/_focusBorder.scss
index a05e1cdf39b28e..ea3d088163bcc8 100644
--- a/packages/example-app-base/src/common/_focusBorder.scss
+++ b/packages/example-app-base/src/common/_focusBorder.scss
@@ -14,7 +14,7 @@
     position: relative;
   }
 
-  :global(.ms-Fabric.is-focusVisible) &:focus:after {
+  :global(.ms-Fabric--isFocusVisible) &:focus:after {
     // Wrap the parent element with $padding pixels.
     content: '';
     position: absolute;
@@ -33,7 +33,7 @@
 
 // When focus is set using the keyboard, apply an outline.
 @mixin focus-outline {
-  :global(.ms-Fabric.is-focusVisible) &:focus {
+  :global(.ms-Fabric--isFocusVisible) &:focus {
     outline: 1px solid $focusedBorderColor;
   }
 }
diff --git a/packages/example-app-base/src/components/Highlight/Highlight.tsx b/packages/example-app-base/src/components/Highlight/Highlight.tsx
index c11c2a5993fd48..51482f0bc96218 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 f1257e07fadabb..41f471ca4b88bb 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/experiments/.vscode/settings.json b/packages/experiments/.vscode/settings.json
index 307cc081230ba0..a47d61e2fb865a 100644
--- a/packages/experiments/.vscode/settings.json
+++ b/packages/experiments/.vscode/settings.json
@@ -22,12 +22,13 @@
   "search.exclude": {
     "**/node_modules": true,
     "**/lib": true,
+    "**/lib-es2015": true,
     "**/lib-amd": true,
     "**/dist": true,
     "**/*.scss.ts": true
   },
   // Controls after how many characters the editor will wrap to the next line. Setting this to 0 turns on viewport width wrapping
-  "editor.wrappingColumn": 140,
+  "editor.wordWrapColumn": 140,
   "tslint.enable": true,
   "tslint.rulesDirectory": "../../common/node_modules/tslint-microsoft-contrib",
   // Defines space handling after opening and before closing JSX expression braces. Requires TypeScript >= 2.0.6.
diff --git a/packages/experiments/CHANGELOG.json b/packages/experiments/CHANGELOG.json
index 41ea85b74ebaf8..e4d100cdfc07d7 100644
--- a/packages/experiments/CHANGELOG.json
+++ b/packages/experiments/CHANGELOG.json
@@ -1,6 +1,219 @@
 {
   "name": "@uifabric/experiments",
   "entries": [
+    {
+      "version": "5.33.1",
+      "tag": "@uifabric/experiments_v5.33.1",
+      "date": "Wed, 25 Apr 2018 05:32:09 GMT",
+      "comments": {
+        "none": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "a15bb064e6ec7551c593730e266b09f0873784dc",
+            "comment": "Remove wordWrap setting."
+          }
+        ],
+        "patch": [
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "56c4cfb63266ef8b1952d967598bf4044a7eed7a",
+            "comment": "Fix bad aria-label prop in Tile"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.88.0 <6.0.0` to `>=5.89.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.33.0",
+      "tag": "@uifabric/experiments_v5.33.0",
+      "date": "Mon, 23 Apr 2018 10:24:54 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Cliff Koh <cliff.koh@microsoft.com>",
+            "commit": "edf45906e38be620dd26401b05b9bda10322027f",
+            "comment": "Fix code in @uifabric/experiments such that it adheres to same tslint rules as the main office-ui-fabric-react package."
+          },
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "cf2fcbcb9ed19793090d86186042cc8e463659c8",
+            "comment": "Fix index import"
+          }
+        ],
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "2bbc7950bd9f10ea1e792dcb1155c625aa8e8f4f",
+            "comment": "Updating the focus styling to use the generalized `ms-Fabric--isFocusVisibl"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.86.0 <6.0.0` to `>=5.87.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.10.2 <6.0.0` to `>=5.11.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/jest-serializer-merge-styles\" from `>=5.1.0 <6.0.0` to `>=5.2.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.32.0",
+      "tag": "@uifabric/experiments_v5.32.0",
+      "date": "Fri, 20 Apr 2018 23:06:06 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "amyngu <31973030+amyngu@users.noreply.github.com>",
+            "commit": "602a5b9fe30e8df5bf22342288f7b97dc8bd3c6e",
+            "comment": "Add delete callback, expose item change methods on SelectedItemsList"
+          },
+          {
+            "author": "Vitalie Braga <vitaliebraga@gmail.com>",
+            "commit": "703efd38ae346d2b0b1be7c6082c2aad492b1d31",
+            "comment": "Shimmer: adding two new props and deprecating another one."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.85.0 <6.0.0` to `>=5.86.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "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 851a24ceb9d5eb..26de01cba2571a 100644
--- a/packages/experiments/CHANGELOG.md
+++ b/packages/experiments/CHANGELOG.md
@@ -1,6 +1,68 @@
 # 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 Wed, 25 Apr 2018 05:32:09 GMT and should not be manually modified.
+
+## 5.33.1
+Wed, 25 Apr 2018 05:32:09 GMT
+
+### Patches
+
+- Fix bad aria-label prop in Tile
+
+## 5.33.0
+Mon, 23 Apr 2018 10:24:54 GMT
+
+### Minor changes
+
+- Updating the focus styling to use the generalized `ms-Fabric--isFocusVisibl
+
+### Patches
+
+- Fix code in @uifabric/experiments such that it adheres to same tslint rules as the main office-ui-fabric-react package.
+- Fix index import
+
+## 5.32.0
+Fri, 20 Apr 2018 23:06:06 GMT
+
+### Minor changes
+
+- Add delete callback, expose item change methods on SelectedItemsList
+- Shimmer: adding two new props and deprecating another one.
+
+## 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/package.json b/packages/experiments/package.json
index 77aab3ce1ecd51..5bf19f7b3f2613 100644
--- a/packages/experiments/package.json
+++ b/packages/experiments/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/experiments",
-  "version": "5.31.0",
+  "version": "5.33.1",
   "description": "Experimental React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib-es2015/index.d.ts",
@@ -30,9 +30,9 @@
     "@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/jest-serializer-merge-styles": ">=5.1.0 <6.0.0",
+    "@uifabric/example-app-base": ">=5.11.0 <6.0.0",
+    "@uifabric/file-type-icons": ">=0.6.1 <1.0.0",
+    "@uifabric/jest-serializer-merge-styles": ">=5.2.0 <6.0.0",
     "es6-weak-map": "^2.0.2",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
@@ -45,8 +45,8 @@
   },
   "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.89.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/CommandBar.ts b/packages/experiments/src/CommandBar.ts
index eb972f5838cae8..bf610f9a887714 100644
--- a/packages/experiments/src/CommandBar.ts
+++ b/packages/experiments/src/CommandBar.ts
@@ -1 +1 @@
-export * from './components/CommandBar';
+export * from './components/CommandBar/index';
diff --git a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
index ed460e5a82c226..e8314b03d0f1ab 100644
--- a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
+++ b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import {
   BaseComponent,
   css,
@@ -6,20 +7,21 @@ import {
 } from 'office-ui-fabric-react/lib/Utilities';
 import {
   ICommandBar,
-  ICommandBarProps,
   ICommandBarItemProps,
+  ICommandBarProps,
   ICommandBarStyleProps,
   ICommandBarStyles
 } from './CommandBar.types';
-import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
-import { OverflowSet, IOverflowSet } from 'office-ui-fabric-react/lib/OverflowSet';
-import { ResizeGroup, IResizeGroup } from 'office-ui-fabric-react/lib/ResizeGroup';
-import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { IOverflowSet, OverflowSet } from 'office-ui-fabric-react/lib/OverflowSet';
+import { IResizeGroup, ResizeGroup } from 'office-ui-fabric-react/lib/ResizeGroup';
 import {
   classNamesFunction,
   createRef
 } from '../../Utilities';
 
+import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+
 const getClassNames = classNamesFunction<ICommandBarStyleProps, ICommandBarStyles>();
 
 export interface ICommandBarData {
@@ -56,7 +58,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 {
@@ -76,7 +78,7 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
       onGrowData = this._onGrowData,
     } = this.props;
 
-    let commandBardata: ICommandBarData = {
+    const commandBardata: ICommandBarData = {
       primaryItems: [...items],
       overflowItems: [...overflowItems!],
       minimumOverflowItems: [...overflowItems!].length, // for tracking
@@ -134,13 +136,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 {
@@ -158,10 +160,11 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
 
   private _onReduceData = (data: ICommandBarData): ICommandBarData | undefined => {
     const { endAligned, onDataReduced } = this.props;
-    let { primaryItems, overflowItems, cacheKey, farItems } = data;
+    const { farItems } = data;
+    let { primaryItems, overflowItems, cacheKey } = data;
 
     // Use first item if endAligned, otherwise use last item
-    let movedItem = primaryItems[endAligned ? 0 : primaryItems.length - 1];
+    const movedItem = primaryItems[endAligned ? 0 : primaryItems.length - 1];
 
     if (movedItem !== undefined) {
       movedItem.renderedInOverflow = true;
@@ -182,7 +185,8 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
 
   private _onGrowData = (data: ICommandBarData): ICommandBarData | undefined => {
     const { endAligned, onDataGrown } = this.props;
-    let { primaryItems, overflowItems, cacheKey, minimumOverflowItems, farItems } = data;
+    const { minimumOverflowItems, farItems } = data;
+    let { primaryItems, overflowItems, cacheKey } = data;
     const movedItem = overflowItems[0];
 
     // Make sure that moved item exists and is not one of the original overflow items
@@ -205,7 +209,7 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
   }
 
   private _onRenderItems = (item: ICommandBarItemProps): JSX.Element | React.ReactNode => {
-    let { buttonStyles } = this.props;
+    const { buttonStyles } = this.props;
 
     if (item.onRender) {
       // These are the top level items, there is no relevant menu dismissing function to
diff --git a/packages/experiments/src/components/CommandBar/CommandBar.test.tsx b/packages/experiments/src/components/CommandBar/CommandBar.test.tsx
index cdc75037b459b7..bb544507c9dd5d 100644
--- a/packages/experiments/src/components/CommandBar/CommandBar.test.tsx
+++ b/packages/experiments/src/components/CommandBar/CommandBar.test.tsx
@@ -1,9 +1,7 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
+import * as renderer from 'react-test-renderer';
 
 import { CommandBar } from './CommandBar';
-import * as renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 
 describe('CommandBar', () => {
@@ -81,7 +79,7 @@ describe('CommandBar', () => {
       />
     );
 
-    let menuItem = commandBar.find('button');
+    const menuItem = commandBar.find('button');
 
     menuItem.simulate('click');
 
@@ -123,7 +121,7 @@ describe('CommandBar', () => {
       />
     );
 
-    let menuItem = commandBar.find('button');
+    const menuItem = commandBar.find('button');
 
     menuItem.simulate('click');
 
@@ -140,7 +138,7 @@ describe('CommandBar', () => {
   });
 
   it('updates menu after update if item is still present', () => {
-    let items = [
+    const items = [
       {
         name: 'TestText 1',
         key: 'TestKey1',
@@ -162,7 +160,7 @@ describe('CommandBar', () => {
       />
     );
 
-    let menuItem = commandBar.find('button');
+    const menuItem = commandBar.find('button');
 
     menuItem.simulate('click');
 
diff --git a/packages/experiments/src/components/CommandBar/CommandBarPage.tsx b/packages/experiments/src/components/CommandBar/CommandBarPage.tsx
index f8eddae5847b4f..632f596789f28c 100644
--- a/packages/experiments/src/components/CommandBar/CommandBarPage.tsx
+++ b/packages/experiments/src/components/CommandBar/CommandBarPage.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
+
 import {
+  ComponentPage,
   ExampleCard,
   IComponentDemoPageProps,
-  ComponentPage,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
-import { items, overflowItems, farItems } from './examples/data';
-import { ICommandBarProps } from './CommandBar.types';
+import { farItems, items, overflowItems } from './examples/data';
+
 import { CommandBarBasicExample } from './examples/CommandBar.Basic.Example';
+import { ICommandBarProps } from './CommandBar.types';
 
 const CommandBarBasicExampleCode = require(
   '!raw-loader!@uifabric/experiments/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx'
@@ -15,7 +17,7 @@ const CommandBarBasicExampleCode = require(
 
 export class CommandBarPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
-    let cmdBarParamsTextAndIcons: ICommandBarProps = { items, overflowItems, farItems };
+    const cmdBarParamsTextAndIcons: ICommandBarProps = { items, overflowItems, farItems };
 
     return (
       <ComponentPage
@@ -24,7 +26,7 @@ export class CommandBarPage extends React.Component<IComponentDemoPageProps, {}>
         exampleCards={
           <div>
             <ExampleCard title='CommandBar with search box and overflowing menu items' code={ CommandBarBasicExampleCode }>
-              <CommandBarBasicExample {...cmdBarParamsTextAndIcons} />
+              <CommandBarBasicExample { ...cmdBarParamsTextAndIcons } />
             </ExampleCard>
           </div>
         }
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 7c7eab154bbbcb..29c8c570fe2c71 100644
--- a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
+++ b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -100,7 +100,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: 4px;
                   left: 4px;
@@ -201,7 +201,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -212,7 +212,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: 4px;
                   left: 4px;
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 25e6b581fb3e9c..5bb01a038e8af1 100644
--- a/packages/experiments/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx
+++ b/packages/experiments/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { CommandBar, ICommandBarProps } from '@uifabric/experiments/lib/CommandBar';
 
 export class CommandBarBasicExample extends React.Component<ICommandBarProps, {}> {
@@ -12,7 +13,7 @@ export class CommandBarBasicExample extends React.Component<ICommandBarProps, {}
   }
 
   public render(): JSX.Element {
-    let { items, overflowItems, farItems } = this.props;
+    const { items, overflowItems, farItems } = this.props;
 
     return (
       <div>
diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx
index 9e1679a693996c..7880c3a408e920 100644
--- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx
@@ -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');
 
@@ -135,11 +135,11 @@ 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);
     });
@@ -163,9 +163,9 @@ 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);
     });
diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
index bd88502c5f8b6a..23befccb19daeb 100644
--- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
@@ -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,19 +70,19 @@ 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 {
@@ -152,8 +152,8 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     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
     }));
   }
@@ -169,35 +169,35 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   protected resetFocus(index?: number): void {
     const { items } = this.state;
 
-    if (items.length && index! >= 0 && this.root.value) {
-      const 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,18 +211,18 @@ 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);
     }
   }
 
@@ -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/examples/ExtendedPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx
index 7112ba5e64a200..738e1504c3fc13 100644
--- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx
@@ -61,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();
           }
         }
       },
@@ -84,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;
         }
       },
       {
@@ -182,9 +182,9 @@ 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));
     }
   }
 
@@ -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
     );
   }
 
diff --git a/packages/experiments/src/components/Form/Form.test.tsx b/packages/experiments/src/components/Form/Form.test.tsx
index a15fb2310658a3..99653f1f8d1c9a 100644
--- a/packages/experiments/src/components/Form/Form.test.tsx
+++ b/packages/experiments/src/components/Form/Form.test.tsx
@@ -4,19 +4,18 @@ import * as React from 'react';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import * as sinon from 'sinon';
 
-// Controls
-import { Form } from './Form';
-import { IFormProps } from './Form.types';
 import { DEFAULT_DEBOUNCE } from './FormBaseInput';
+import { Form } from './Form';
 import { FormTextInput } from './inputs/textInput/FormTextInput';
+import { IFormProps } from './Form.types';
 import { IFormTextInputProps } from './inputs/textInput/FormTextInput.types';
 import { Validators } from './validators/Validators';
 
 describe('Form', () => {
   let formProps: IFormProps;
   let formTextInputProps: IFormTextInputProps;
-  let formRequiredTestMessage = 'This field is required';
-  let formTextBoxValidatorTestMessage = 'Error message for number field';
+  const formRequiredTestMessage = 'This field is required';
+  const formTextBoxValidatorTestMessage = 'Error message for number field';
 
   describe('Form renders for different props', () => {
     let renderedForm: Form;
@@ -58,7 +57,7 @@ describe('Form', () => {
         </Form>
       ) as Form;
 
-      let textInput: Element = ReactTestUtils.findRenderedDOMComponentWithClass(renderedForm, 'ms-TextField');
+      const textInput: Element = ReactTestUtils.findRenderedDOMComponentWithClass(renderedForm, 'ms-TextField');
       expect(textInput).toBeTruthy();
     });
 
@@ -76,7 +75,7 @@ describe('Form', () => {
         </Form>
       ) as Form;
 
-      let textInputs: Element[] = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedForm, 'ms-TextField');
+      const textInputs: Element[] = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedForm, 'ms-TextField');
       expect(textInputs.length).toEqual(2);
     });
 
@@ -92,7 +91,7 @@ describe('Form', () => {
         </Form>
       ) as Form;
 
-      let textInput: HTMLInputElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'input') as HTMLInputElement;
+      const textInput: HTMLInputElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'input') as HTMLInputElement;
       expect(textInput.value).toEqual('Value');
     });
   });
@@ -120,7 +119,7 @@ describe('Form', () => {
 
     it('Valid values are returned correctly', () => {
       let result: any;
-      let renderedForm: Form = ReactTestUtils.renderIntoDocument(
+      const renderedForm: Form = ReactTestUtils.renderIntoDocument(
         <Form
           onSubmit={ (value: any) => { result = value; } }
         >
@@ -136,7 +135,7 @@ describe('Form', () => {
           />
         </Form>
       ) as Form;
-      let form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
+      const form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
       ReactTestUtils.Simulate.submit(form);
 
       expect(result['field']).toEqual('Value');
@@ -144,7 +143,7 @@ describe('Form', () => {
     });
 
     it('Invalid values are not returned', () => {
-      let renderedForm: Form = ReactTestUtils.renderIntoDocument(
+      const renderedForm: Form = ReactTestUtils.renderIntoDocument(
         <Form onSubmit={ (value: any) => { /*stub*/ } }>
           <FormTextInput
             inputKey='field'
@@ -160,16 +159,16 @@ describe('Form', () => {
         </Form>
       ) as Form;
 
-      let form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
+      const form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
       ReactTestUtils.Simulate.submit(form);
 
-      let textBox: FormTextInput[] = ReactTestUtils.scryRenderedComponentsWithType(renderedForm, FormTextInput);
+      const textBox: FormTextInput[] = ReactTestUtils.scryRenderedComponentsWithType(renderedForm, FormTextInput);
       expect(textBox[0].state.currentError).toEqual(formRequiredTestMessage);
       expect(textBox[1].state.currentError).toEqual(formTextBoxValidatorTestMessage);
     });
 
     it('Number fields with initial value of 0 are displayed properly', () => {
-      let renderedForm: Form = ReactTestUtils.renderIntoDocument(
+      const renderedForm: Form = ReactTestUtils.renderIntoDocument(
         <Form
           onSubmit={ (value: any) => { /*stub*/ } }
         >
@@ -179,15 +178,15 @@ describe('Form', () => {
           />
         </Form>
       ) as Form;
-      let numberField: HTMLDivElement =
+      const numberField: HTMLDivElement =
         ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedForm, 'ms-TextField')[0] as HTMLDivElement;
-      let input: HTMLInputElement = numberField.getElementsByTagName('input')[0];
+      const input: HTMLInputElement = numberField.getElementsByTagName('input')[0];
       expect(input.getAttribute('value')).toEqual('0');
     });
 
     it('OnUpdated callback is called without submitting form', () => {
-      let updateCallback: sinon.SinonStub = sinon.stub();
-      let renderedForm: Form = ReactTestUtils.renderIntoDocument(
+      const updateCallback: sinon.SinonStub = sinon.stub();
+      const renderedForm: Form = ReactTestUtils.renderIntoDocument(
         <Form
           onUpdated={ updateCallback }
         >
@@ -197,14 +196,14 @@ describe('Form', () => {
           />
         </Form>
       ) as Form;
-      let textBox: ExtendsTextBox = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsTextBox);
+      const textBox: ExtendsTextBox = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsTextBox);
       textBox.setValue('1');
       clock.tick(DEFAULT_DEBOUNCE);
       expect(updateCallback.calledOnce).toBeTruthy();
     });
 
     it('Errors are hidden when pristine', () => {
-      let renderedForm: Form = ReactTestUtils.renderIntoDocument(
+      const renderedForm: Form = ReactTestUtils.renderIntoDocument(
         <Form>
           <ExtendsTextBox
             inputKey='field'
@@ -215,13 +214,13 @@ describe('Form', () => {
       // Error message is gated behind <DelayedRender>, tick the clock to make it show up
       clock.tick(DEFAULT_DEBOUNCE);
 
-      let errors: HTMLElement[] =
+      const errors: HTMLElement[] =
         ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedForm, 'ms-TextField-errorMessage') as HTMLElement[];
       expect(errors.length).toEqual(0);
     });
 
     it('Errors are shown when pristine and prop is set', () => {
-      let renderedForm: Form = ReactTestUtils.renderIntoDocument(
+      const renderedForm: Form = ReactTestUtils.renderIntoDocument(
         <Form
           showErrorsWhenPristine={ true }
         >
@@ -234,14 +233,14 @@ describe('Form', () => {
       // Error message is gated behind <DelayedRender>, tick the clock to make it show up
       clock.tick(DEFAULT_DEBOUNCE);
 
-      let errors: HTMLElement[] =
+      const errors: HTMLElement[] =
         ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedForm, 'ms-TextField-errorMessage') as HTMLElement[];
       expect(errors.length).toEqual(1);
     });
 
     it('Debounce interval can be changed', () => {
-      let updateCallback: sinon.SinonStub = sinon.stub();
-      let renderedForm: Form = ReactTestUtils.renderIntoDocument(
+      const updateCallback: sinon.SinonStub = sinon.stub();
+      const renderedForm: Form = ReactTestUtils.renderIntoDocument(
         <Form
           onUpdated={ updateCallback }
         >
@@ -252,7 +251,7 @@ describe('Form', () => {
           />
         </Form>
       ) as Form;
-      let textBox: ExtendsTextBox = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsTextBox);
+      const textBox: ExtendsTextBox = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsTextBox);
       textBox.setValue('1');
       clock.tick(DEFAULT_DEBOUNCE);
       expect(updateCallback.calledOnce).toBeFalsy();
diff --git a/packages/experiments/src/components/Form/Form.tsx b/packages/experiments/src/components/Form/Form.tsx
index 21dc6a6ec8995e..8fff20091ad1d0 100644
--- a/packages/experiments/src/components/Form/Form.tsx
+++ b/packages/experiments/src/components/Form/Form.tsx
@@ -102,7 +102,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
    * Renders a form component and all child inputs
    */
   public render(): JSX.Element {
-    let nativeProps = getNativeProps(this.props, divProperties);
+    const nativeProps = getNativeProps(this.props, divProperties);
     return (
       <form
         { ...nativeProps }
@@ -130,7 +130,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
    * Returns a dictionary keyed by the input names
    */
   private _getFormValues(): { [key: string]: any } {
-    let formValues: { [key: string]: any } = {};
+    const formValues: { [key: string]: any } = {};
     this._mountedInputs.forEach((input: GenericFormInput) => {
       formValues[input.props.inputKey] = input.state.currentValue;
     });
@@ -144,7 +144,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
    * @param input The input to validate
    */
   private _validateComponent(input: GenericFormInput): IFormValidationResult {
-    let validationResult = input.doValidate();
+    const validationResult = input.doValidate();
     if (!validationResult.isValid && (this.props.showErrorsWhenPristine || !this._pristine)) {
       input.setError(validationResult.errorMessage);
     } else {
@@ -159,7 +159,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
    * Returns a list of the validation results
    */
   private _validateForm(): { [key: string]: IFormValidationResult } {
-    let validationResults: { [key: string]: IFormValidationResult } = {};
+    const validationResults: { [key: string]: IFormValidationResult } = {};
     this._mountedInputs.forEach((input: GenericFormInput) => {
       validationResults[input.props.inputKey] = this._validateComponent(input);
     });
@@ -183,9 +183,9 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
     }
 
     if (this.props.onSubmit) {
-      let validationResults = this._validateForm();
-      let formIsValid: boolean = this._isFormValid(validationResults);
-      let formValues: { [key: string]: any } = this._getFormValues();
+      const validationResults = this._validateForm();
+      const formIsValid: boolean = this._isFormValid(validationResults);
+      const formValues: { [key: string]: any } = this._getFormValues();
 
       if (formIsValid) {
         this.props.onSubmit(formValues);
@@ -210,7 +210,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
   }
 
   private _submitValue = (input: GenericFormInput): void => {
-    let validationResult: IFormValidationResult = this._validateComponent(input);
+    const validationResult: IFormValidationResult = this._validateComponent(input);
     this.setState((prevState: IFormState) => {
       prevState.validationResults[input.props.inputKey] = validationResult;
       return prevState;
@@ -228,7 +228,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
    * @param input The input to unregister
    */
   private _unmountInput = (input: GenericFormInput): void => {
-    let currentIndex: number = this._mountedInputs.indexOf(input);
+    const currentIndex: number = this._mountedInputs.indexOf(input);
     if (currentIndex > -1) {
       this._mountedInputs.splice(currentIndex, 1);
       this.setState((prevState: IFormState) => {
@@ -239,7 +239,7 @@ export class Form extends BaseComponent<IFormProps, IFormState> {
   }
 
   private _isFormValid = (validationResults: { [key: string]: IFormValidationResult } = this.state.validationResults): boolean => {
-    for (let key in validationResults) {
+    for (const key in validationResults) {
       if (!validationResults[key].isValid) {
         return false;
       }
diff --git a/packages/experiments/src/components/Form/FormBaseInput.ts b/packages/experiments/src/components/Form/FormBaseInput.ts
index 2a451978c8cee4..1dcca899cb885f 100644
--- a/packages/experiments/src/components/Form/FormBaseInput.ts
+++ b/packages/experiments/src/components/Form/FormBaseInput.ts
@@ -107,13 +107,13 @@ export abstract class FormBaseInput<T, P extends IFormBaseInputProps<T>, S exten
       validators = []
     } = this.props;
 
-    let validationResult: IFormValidationResult = {
+    const validationResult: IFormValidationResult = {
       isValid: true,
       component: this
     };
 
-    for (let validator of (validators as any)) {
-      let error: string = validator(this.state.currentValue);
+    for (const validator of (validators as any)) {
+      const error: string = validator(this.state.currentValue);
       if (error) {
         validationResult.isValid = false;
         validationResult.errorMessage = error;
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 e2ca8d64400602..4c963d147bbd4a 100644
--- a/packages/experiments/src/components/Form/examples/Form.Autosave.Example.tsx
+++ b/packages/experiments/src/components/Form/examples/Form.Autosave.Example.tsx
@@ -32,7 +32,7 @@ export class FormAutosaveExample extends React.Component<{}, IFormAutosaveExampl
             inputKey='date'
             validators={ [(value: Date) => {
               if (value) {
-                let date = new Date();
+                const date = new Date();
                 date.setDate(date.getDate() - 1);
                 if (value.getTime() < date.getTime()) {
                   return 'Date must be today or later';
@@ -53,7 +53,7 @@ export class FormAutosaveExample extends React.Component<{}, IFormAutosaveExampl
   }
 
   private _onUpdate = (key: string, value: any): void => {
-    let newFormResults = this.state && this.state.formResults ? { ...this.state.formResults } : {};
+    const newFormResults = this.state && this.state.formResults ? { ...this.state.formResults } : {};
     newFormResults[key] = value;
     this.setState({ formResults: newFormResults });
   }
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 35d240d8369f44..59dd753fe71746 100644
--- a/packages/experiments/src/components/Form/examples/Form.Validation.Example.tsx
+++ b/packages/experiments/src/components/Form/examples/Form.Validation.Example.tsx
@@ -38,7 +38,7 @@ export class FormValidationExample extends React.Component<{}, IFormValidationEx
             inputKey='date'
             validators={ [(value: Date) => {
               if (value) {
-                let date = new Date();
+                const date = new Date();
                 date.setDate(date.getDate() - 1);
                 if (value.getTime() < date.getTime()) {
                   return 'Date must be today or later';
diff --git a/packages/experiments/src/components/Form/inputs/checkbox/FormCheckBox.test.tsx b/packages/experiments/src/components/Form/inputs/checkbox/FormCheckBox.test.tsx
index 842eea5d941c31..d15ec494d65b75 100644
--- a/packages/experiments/src/components/Form/inputs/checkbox/FormCheckBox.test.tsx
+++ b/packages/experiments/src/components/Form/inputs/checkbox/FormCheckBox.test.tsx
@@ -33,7 +33,7 @@ describe('FormCheckBox Unit Tests', () => {
     });
 
     it('Null name throws error', () => {
-      let errorFunction = () => {
+      const errorFunction = () => {
         ReactTestUtils.renderIntoDocument(
           <Form
             onSubmit={ undefined }
@@ -82,7 +82,7 @@ describe('FormCheckBox Unit Tests', () => {
       ) as Form;
 
       renderedInput = ReactTestUtils.findRenderedDOMComponentWithClass(renderedForm, 'ms-Checkbox') as HTMLElement;
-      let form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
+      const form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
       ReactTestUtils.Simulate.submit(form);
 
       expect(result['name']).toBeTruthy();
@@ -102,8 +102,8 @@ describe('FormCheckBox Unit Tests', () => {
     });
 
     it('Checkbox is leading and trailing debounced', () => {
-      let updateStub: sinon.SinonStub = sandbox.stub();
-      let renderedForm = ReactTestUtils.renderIntoDocument(
+      const updateStub: sinon.SinonStub = sandbox.stub();
+      const renderedForm = ReactTestUtils.renderIntoDocument(
         <Form
           onUpdated={ updateStub }
         >
@@ -114,7 +114,7 @@ describe('FormCheckBox Unit Tests', () => {
         </Form>
       ) as Form;
 
-      let checkBox: ExtendsCheckbox = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsCheckbox);
+      const checkBox: ExtendsCheckbox = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsCheckbox);
       checkBox.setValue(true);
       expect(updateStub.callCount).toEqual(1);
       checkBox.setValue(false);
diff --git a/packages/experiments/src/components/Form/inputs/conditionalSubmit/ConditionalSubmitButton.test.tsx b/packages/experiments/src/components/Form/inputs/conditionalSubmit/ConditionalSubmitButton.test.tsx
index 66b5d7e4de8d7f..58c24d551d8c99 100644
--- a/packages/experiments/src/components/Form/inputs/conditionalSubmit/ConditionalSubmitButton.test.tsx
+++ b/packages/experiments/src/components/Form/inputs/conditionalSubmit/ConditionalSubmitButton.test.tsx
@@ -25,7 +25,7 @@ describe('FormSubmitButton Unit Tests', () => {
   });
 
   it('Button is disabled when form is invalid and enabled when form is valid', () => {
-    let renderedForm = ReactTestUtils.renderIntoDocument(
+    const renderedForm = ReactTestUtils.renderIntoDocument(
       <Form>
         <ExtendsTextBox
           inputKey='name'
@@ -36,8 +36,8 @@ describe('FormSubmitButton Unit Tests', () => {
       </Form>
     ) as Form;
 
-    let button: HTMLButtonElement = ReactTestUtils.findRenderedDOMComponentWithClass(renderedForm, 'ms-Button') as HTMLButtonElement;
-    let textBox: ExtendsTextBox = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsTextBox);
+    const button: HTMLButtonElement = ReactTestUtils.findRenderedDOMComponentWithClass(renderedForm, 'ms-Button') as HTMLButtonElement;
+    const textBox: ExtendsTextBox = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsTextBox);
 
     expect(button.getAttribute('disabled')).toEqual('');
     textBox.setValue('Value');
diff --git a/packages/experiments/src/components/Form/inputs/datePicker/FormDatePicker.test.tsx b/packages/experiments/src/components/Form/inputs/datePicker/FormDatePicker.test.tsx
index c9750bd8a34af9..0c9ba0eae0a9d9 100644
--- a/packages/experiments/src/components/Form/inputs/datePicker/FormDatePicker.test.tsx
+++ b/packages/experiments/src/components/Form/inputs/datePicker/FormDatePicker.test.tsx
@@ -23,7 +23,7 @@ describe('FormDatePicker Unit Tests', () => {
     });
 
     it('Null name throws error', () => {
-      let errorFunction = () => {
+      const errorFunction = () => {
         ReactTestUtils.renderIntoDocument(
           <Form
             onSubmit={ undefined }
@@ -60,7 +60,7 @@ describe('FormDatePicker Unit Tests', () => {
 
     it('With initial value', () => {
       let result: any;
-      let now: Date = new Date();
+      const now: Date = new Date();
       renderedForm = ReactTestUtils.renderIntoDocument(
         <Form
           onSubmit={ (value: any) => { result = value; } }
@@ -73,7 +73,7 @@ describe('FormDatePicker Unit Tests', () => {
       ) as Form;
 
       renderedInput = ReactTestUtils.findRenderedDOMComponentWithClass(renderedForm, 'ms-DatePicker') as HTMLElement;
-      let form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
+      const form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
       ReactTestUtils.Simulate.submit(form);
 
       expect(result['name']).toEqual(now);
@@ -96,8 +96,8 @@ describe('FormDatePicker Unit Tests', () => {
     });
 
     it('DatePicker is leading and trailing debounced', () => {
-      let updateStub: sinon.SinonStub = sinon.stub();
-      let renderedForm = ReactTestUtils.renderIntoDocument(
+      const updateStub: sinon.SinonStub = sinon.stub();
+      const renderedForm = ReactTestUtils.renderIntoDocument(
         <Form
           onUpdated={ updateStub }
         >
@@ -108,7 +108,7 @@ describe('FormDatePicker Unit Tests', () => {
         </Form>
       ) as Form;
 
-      let datePicker: ExtendsDatePicker = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsDatePicker);
+      const datePicker: ExtendsDatePicker = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsDatePicker);
       datePicker.setValue(new Date('2015-05-05'));
       expect(updateStub.callCount).toEqual(1);
       datePicker.setValue(new Date('2014-05-05'));
diff --git a/packages/experiments/src/components/Form/inputs/dropdown/FormDropdown.test.tsx b/packages/experiments/src/components/Form/inputs/dropdown/FormDropdown.test.tsx
index 8ac1bbb90ee358..18c21d73de3cd1 100644
--- a/packages/experiments/src/components/Form/inputs/dropdown/FormDropdown.test.tsx
+++ b/packages/experiments/src/components/Form/inputs/dropdown/FormDropdown.test.tsx
@@ -24,7 +24,7 @@ describe('FormDropdown Unit Tests', () => {
     });
 
     it('Null name throws error', () => {
-      let errorFunction = () => {
+      const errorFunction = () => {
         ReactTestUtils.renderIntoDocument(
           <Form
             onSubmit={ undefined }
@@ -79,7 +79,7 @@ describe('FormDropdown Unit Tests', () => {
       ) as Form;
 
       renderedInput = ReactTestUtils.findRenderedDOMComponentWithClass(renderedForm, 'ms-Dropdown') as HTMLElement;
-      let form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
+      const form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
       ReactTestUtils.Simulate.submit(form);
 
       expect(result['name']).toEqual(0);
@@ -103,8 +103,8 @@ describe('FormDropdown Unit Tests', () => {
     });
 
     it('Dropdown is leading and trailing debounced', () => {
-      let updateStub: sinon.SinonStub = sinon.stub();
-      let renderedForm = ReactTestUtils.renderIntoDocument(
+      const updateStub: sinon.SinonStub = sinon.stub();
+      const renderedForm = ReactTestUtils.renderIntoDocument(
         <Form
           onUpdated={ updateStub }
         >
@@ -127,7 +127,7 @@ describe('FormDropdown Unit Tests', () => {
         </Form>
       ) as Form;
 
-      let datePicker: ExtendsDropdown = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsDropdown);
+      const datePicker: ExtendsDropdown = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsDropdown);
       datePicker.setValue(0);
       expect(updateStub.callCount).toEqual(1);
       datePicker.setValue(1);
diff --git a/packages/experiments/src/components/Form/inputs/textInput/FormTextInput.test.tsx b/packages/experiments/src/components/Form/inputs/textInput/FormTextInput.test.tsx
index 8beeb84a76a589..e3a450488290ab 100644
--- a/packages/experiments/src/components/Form/inputs/textInput/FormTextInput.test.tsx
+++ b/packages/experiments/src/components/Form/inputs/textInput/FormTextInput.test.tsx
@@ -40,7 +40,7 @@ describe('FormTextInput Unit Tests', () => {
     });
 
     it('Null name throws error', () => {
-      let errorFunction = () => {
+      const errorFunction = () => {
         ReactTestUtils.renderIntoDocument(
           <Form
             { ...formProps }
@@ -94,7 +94,7 @@ describe('FormTextInput Unit Tests', () => {
     xit('Validators run properly', () => {
       let result: any;
 
-      let renderedForm: Form = ReactTestUtils.renderIntoDocument(
+      const renderedForm: Form = ReactTestUtils.renderIntoDocument(
         <Form
           onSubmit={ (value: any) => { result = value; } }
         >
@@ -108,11 +108,11 @@ describe('FormTextInput Unit Tests', () => {
         </Form>
       ) as Form;
 
-      let form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
+      const form: HTMLFormElement = ReactTestUtils.findRenderedDOMComponentWithTag(renderedForm, 'form') as HTMLFormElement;
       ReactTestUtils.Simulate.submit(form);
 
       // Find the TextField component
-      let field = ReactTestUtils.findRenderedComponentWithType(renderedForm, TextField);
+      const field = ReactTestUtils.findRenderedComponentWithType(renderedForm, TextField);
       expect(field.state.errorMessage).toBeTruthy();
       expect(result).toBeFalsy();
     });
@@ -135,8 +135,8 @@ describe('FormTextInput Unit Tests', () => {
     });
 
     it('TextInput is only trailing debounced', () => {
-      let updateStub: sinon.SinonStub = sinon.stub();
-      let renderedForm = ReactTestUtils.renderIntoDocument(
+      const updateStub: sinon.SinonStub = sinon.stub();
+      const renderedForm = ReactTestUtils.renderIntoDocument(
         <Form
           onUpdated={ updateStub }
         >
@@ -147,7 +147,7 @@ describe('FormTextInput Unit Tests', () => {
         </Form>
       ) as Form;
 
-      let datePicker: ExtendsTextInput = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsTextInput);
+      const datePicker: ExtendsTextInput = ReactTestUtils.findRenderedComponentWithType(renderedForm, ExtendsTextInput);
       datePicker.setValue('0');
       expect(updateStub.callCount).toEqual(0);
       datePicker.setValue('1');
@@ -157,8 +157,8 @@ describe('FormTextInput Unit Tests', () => {
     });
 
     it('TextInput state updates from props value change', () => {
-      let updatedValue = 'updated';
-      let parent = document.createElement('div');
+      const updatedValue = 'updated';
+      const parent = document.createElement('div');
       let renderedForm = ReactDom.render(
         <Form>
           <FormTextInput
@@ -167,8 +167,8 @@ describe('FormTextInput Unit Tests', () => {
             value={ 'old value' }
           />
         </Form>, parent) as Form;
-      let textboxElement: FormTextInput = ReactTestUtils.findRenderedComponentWithType(renderedForm, FormTextInput);
-      let propsUpdateSpy = sinon.spy(textboxElement, 'componentWillReceiveProps');
+      const textboxElement: FormTextInput = ReactTestUtils.findRenderedComponentWithType(renderedForm, FormTextInput);
+      const propsUpdateSpy = sinon.spy(textboxElement, 'componentWillReceiveProps');
       renderedForm = ReactDom.render(
         <Form>
           <FormTextInput
@@ -183,8 +183,8 @@ describe('FormTextInput Unit Tests', () => {
     });
 
     it(`TextInput state doesn't update with no new props value`, () => {
-      let oldValue = 'old value';
-      let parent = document.createElement('div');
+      const oldValue = 'old value';
+      const parent = document.createElement('div');
       let renderedForm = ReactDom.render(
         <Form>
           <FormTextInput
@@ -193,8 +193,8 @@ describe('FormTextInput Unit Tests', () => {
             value={ oldValue }
           />
         </Form>, parent) as Form;
-      let textboxElement: FormTextInput = ReactTestUtils.findRenderedComponentWithType(renderedForm, FormTextInput);
-      let setStateSpy = sinon.spy(textboxElement, 'setState');
+      const textboxElement: FormTextInput = ReactTestUtils.findRenderedComponentWithType(renderedForm, FormTextInput);
+      const setStateSpy = sinon.spy(textboxElement, 'setState');
       renderedForm = ReactDom.render(
         <Form>
           <FormTextInput
diff --git a/packages/experiments/src/components/Form/validators/Validators.test.ts b/packages/experiments/src/components/Form/validators/Validators.test.ts
index 298a1f091aadb7..53d294f8511ced 100644
--- a/packages/experiments/src/components/Form/validators/Validators.test.ts
+++ b/packages/experiments/src/components/Form/validators/Validators.test.ts
@@ -1,7 +1,7 @@
 import { Validators } from './Validators';
 
 describe('Simple form validators test', () => {
-  let customMessage = 'Custom Error Message';
+  const customMessage = 'Custom Error Message';
 
   it('Integer validator', () => {
     expect(Validators.isInteger(customMessage)(null)).toBeFalsy();
diff --git a/packages/experiments/src/components/Form/validators/Validators.ts b/packages/experiments/src/components/Form/validators/Validators.ts
index 095fc79e5e6f22..7f95bbf6830e0b 100644
--- a/packages/experiments/src/components/Form/validators/Validators.ts
+++ b/packages/experiments/src/components/Form/validators/Validators.ts
@@ -69,7 +69,7 @@ export namespace Validators {
     'use strict';
     return (value?: string | null): string | undefined => {
       if (value) {
-        let match = expression.exec(value);
+        const match = expression.exec(value);
         if (match === null || match === undefined) {
           return errorMessage;
         }
@@ -86,7 +86,7 @@ export namespace Validators {
     'use strict';
     return (value?: string | null): string | undefined => {
       if (value) {
-        let intValue: number = Number(value);
+        const intValue: number = Number(value);
         if (!isNaN(intValue) && intValue < bound) {
           return formatError(intValue);
         }
@@ -103,7 +103,7 @@ export namespace Validators {
     'use strict';
     return (value?: string | null): string | undefined => {
       if (value) {
-        let intValue: number = Number(value);
+        const intValue: number = Number(value);
         if (!isNaN(intValue) && intValue > bound) {
           return formatError(intValue);
         }
diff --git a/packages/experiments/src/components/Keytip/KeytipContent.base.tsx b/packages/experiments/src/components/Keytip/KeytipContent.base.tsx
index 2068168345c588..3c24b0db114166 100644
--- a/packages/experiments/src/components/Keytip/KeytipContent.base.tsx
+++ b/packages/experiments/src/components/Keytip/KeytipContent.base.tsx
@@ -14,7 +14,7 @@ import { IKeytipProps, IKeytipStyleProps, IKeytipStyles } from './Keytip.types';
 export class KeytipContentBase extends BaseComponent<IKeytipProps, {}> {
 
   public render(): JSX.Element {
-    let {
+    const {
       content,
       getStyles,
       theme,
@@ -24,7 +24,7 @@ export class KeytipContentBase extends BaseComponent<IKeytipProps, {}> {
       } = this.props;
 
     const getClassNames = classNamesFunction<IKeytipStyleProps, IKeytipStyles>();
-    let classNames = getClassNames(
+    const classNames = getClassNames(
       getStyles!,
       {
         theme: theme!,
diff --git a/packages/experiments/src/components/Keytip/KeytipContent.test.tsx b/packages/experiments/src/components/Keytip/KeytipContent.test.tsx
index 5edcb5e58c62cb..d3ae53c8809536 100644
--- a/packages/experiments/src/components/Keytip/KeytipContent.test.tsx
+++ b/packages/experiments/src/components/Keytip/KeytipContent.test.tsx
@@ -9,7 +9,7 @@ const keyCont = 'A';
 describe('Keytip', () => {
   it('renders visible Keytip correctly', () => {
     const componentContent = renderer.create(<KeytipContent visible={ true } content={ keyCont } keySequences={ sequence } />);
-    let tree = componentContent.toJSON();
+    const tree = componentContent.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -21,13 +21,13 @@ describe('Keytip', () => {
         content={ keyCont }
         keySequences={ sequence }
       />);
-    let tree = componentContent.toJSON();
+    const tree = componentContent.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders invisible Keytip correctly', () => {
     const componentContent = renderer.create(<KeytipContent visible={ false } content={ keyCont } keySequences={ sequence } />);
-    let tree = componentContent.toJSON();
+    const tree = componentContent.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
\ No newline at end of file
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 75f376588ff349..c0856db6b31592 100644
--- a/packages/experiments/src/components/Keytip/examples/Keytip.Basic.Example.tsx
+++ b/packages/experiments/src/components/Keytip/examples/Keytip.Basic.Example.tsx
@@ -13,7 +13,7 @@ export interface IKeytipMap {
 
 export function onKeytipButtonClick(): void {
   this.setState((previousState: IKeytipExampleState) => {
-    let currentKeytipVisible = !previousState.keytipVisible;
+    const currentKeytipVisible = !previousState.keytipVisible;
     return { keytipVisible: currentKeytipVisible };
   });
 }
@@ -37,7 +37,7 @@ export class KeytipBasicExample extends React.Component<{}, IKeytipExampleState>
 
   /* tslint:disable:jsx-ban-props */
   public render(): JSX.Element {
-    let btnClick = onKeytipButtonClick.bind(this);
+    const btnClick = onKeytipButtonClick.bind(this);
 
     return (
       <div>
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 c6be35d58185e9..77bdd0b06f7cc5 100644
--- a/packages/experiments/src/components/Keytip/examples/Keytip.Disabled.Example.tsx
+++ b/packages/experiments/src/components/Keytip/examples/Keytip.Disabled.Example.tsx
@@ -28,7 +28,7 @@ export class KeytipDisabledExample extends React.Component<{}, IKeytipExampleSta
 
   /* tslint:disable:jsx-ban-props */
   public render(): JSX.Element {
-    let btnClick = onKeytipButtonClick.bind(this);
+    const btnClick = onKeytipButtonClick.bind(this);
     return (
       <div>
         <p>A disabled keytip will be displayed when keytips are enabled, but the component will not
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 605d1686d1d520..76a26043453703 100644
--- a/packages/experiments/src/components/Keytip/examples/Keytip.Language.Example.tsx
+++ b/packages/experiments/src/components/Keytip/examples/Keytip.Language.Example.tsx
@@ -27,7 +27,7 @@ export class KeytipLanguageExample extends React.Component<{}, IKeytipExampleSta
 
   /* tslint:disable:jsx-ban-props */
   public render(): JSX.Element {
-    let btnClick = onKeytipButtonClick.bind(this);
+    const btnClick = onKeytipButtonClick.bind(this);
     return (
       <div>
         <p>Keytips can support displaying and processing keys for any unicode language</p>
diff --git a/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx b/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
index 87cbaeb4aa4951..9888e3274769d3 100644
--- a/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
+++ b/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
@@ -83,14 +83,14 @@ export class KeytipLayer extends BaseComponent<IKeytipLayerProps, IKeytipLayerSt
    */
   public addKeytip(keytipProps: IKeytipProps): {} {
     return (previousState: IKeytipLayerState) => {
-      let previousKeytips: IKeytipProps[] = previousState.keytips;
+      const previousKeytips: IKeytipProps[] = previousState.keytips;
 
       // Try to find keytipProps in previousKeytips to update
-      let keytipToUpdateIndex = findIndex(previousKeytips, (previousKeytip: IKeytipProps) => {
+      const keytipToUpdateIndex = findIndex(previousKeytips, (previousKeytip: IKeytipProps) => {
         return fullKeySequencesAreEqual(keytipProps.keySequences, previousKeytip.keySequences);
       });
 
-      let currentKeytips = [...previousState.keytips];
+      const currentKeytips = [...previousState.keytips];
       if (keytipToUpdateIndex >= 0) {
         // Replace the keytip props
         currentKeytips.splice(keytipToUpdateIndex, 1, keytipProps);
@@ -110,9 +110,9 @@ export class KeytipLayer extends BaseComponent<IKeytipLayerProps, IKeytipLayerSt
    */
   public removeKeytip(keytipToRemove: IKeytipProps): {} {
     return (previousState: IKeytipLayerState) => {
-      let currentKeytips = previousState.keytips;
+      const currentKeytips = previousState.keytips;
       // Filter out keytips that don't equal the one to remove
-      let filteredKeytips: IKeytipProps[] = currentKeytips.filter((currentKeytip: IKeytipProps) => {
+      const filteredKeytips: IKeytipProps[] = currentKeytips.filter((currentKeytip: IKeytipProps) => {
         return !fullKeySequencesAreEqual(currentKeytip.keySequences, keytipToRemove.keySequences);
       });
       return { ...previousState, keytips: filteredKeytips };
@@ -128,9 +128,9 @@ export class KeytipLayer extends BaseComponent<IKeytipLayerProps, IKeytipLayerSt
   public setKeytipVisibility(ids: string[], visible: boolean): void {
 
     this.setState((previousState: IKeytipLayerState) => {
-      let currentKeytips: IKeytipProps[] = [...previousState.keytips];
-      for (let keytip of currentKeytips) {
-        let keytipId = convertSequencesToKeytipID(keytip.keySequences);
+      const currentKeytips: IKeytipProps[] = [...previousState.keytips];
+      for (const keytip of currentKeytips) {
+        const keytipId = convertSequencesToKeytipID(keytip.keySequences);
         if (ids.indexOf(keytipId) >= 0) {
           keytip.visible = visible;
         }
@@ -210,7 +210,7 @@ export class KeytipLayer extends BaseComponent<IKeytipLayerProps, IKeytipLayerSt
         this._keytipManager.exitKeytipMode();
         break;
       default:
-        let transitionKey: IKeytipTransitionKey = { key: ev.key };
+        const transitionKey: IKeytipTransitionKey = { key: ev.key };
         transitionKey.modifierKeys = this._getModifierKey(ev);
         this._keytipManager.processTransitionInput(transitionKey);
         break;
@@ -224,7 +224,7 @@ export class KeytipLayer extends BaseComponent<IKeytipLayerProps, IKeytipLayerSt
    * @returns List of ModifierKeyCodes that were pressed
    */
   private _getModifierKey(ev: React.KeyboardEvent<HTMLElement>): KeytipTransitionModifier[] | undefined {
-    let modifierKeys = [];
+    const modifierKeys = [];
     if (ev.altKey) {
       modifierKeys.push(KeytipTransitionModifier.alt);
     }
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 be6851013308be..a42a840c199718 100644
--- a/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx
+++ b/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx
@@ -94,7 +94,7 @@ export class KeytipLayerBasicExample extends React.Component<{}, IKeytipLayerBas
 
   /* tslint:disable:jsx-ban-props jsx-no-lambda */
   public render(): JSX.Element {
-    let divStyle = {
+    const divStyle = {
       width: '50%',
       display: 'inline-block',
       verticalAlign: 'top'
@@ -206,7 +206,7 @@ export class KeytipLayerBasicExample extends React.Component<{}, IKeytipLayerBas
   public componentDidMount(): void {
     // Manually add keytips to the KeytipManager for now
     // This should really be done in each component
-    for (let component of Object.keys(this.keytipMap)) {
+    for (const component of Object.keys(this.keytipMap)) {
       registerKeytip(this.keytipMap[component]);
     }
   }
diff --git a/packages/experiments/src/components/LayoutGroup/LayoutGroup.tsx b/packages/experiments/src/components/LayoutGroup/LayoutGroup.tsx
index 8c68604746cd3a..6b4306cdfd9aab 100644
--- a/packages/experiments/src/components/LayoutGroup/LayoutGroup.tsx
+++ b/packages/experiments/src/components/LayoutGroup/LayoutGroup.tsx
@@ -23,7 +23,7 @@ export class LayoutGroup extends React.Component<ILayoutGroupProps, {}> {
       justify,
     } = this.props;
 
-    let divProps = getNativeProps(this.props, divProperties);
+    const divProps = getNativeProps(this.props, divProperties);
 
     const numberOfChildren = React.Children.count(children);
 
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 af2f78150fb4ff..4491a37d6b0adb 100644
--- a/packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx
+++ b/packages/experiments/src/components/LayoutGroup/examples/LayoutGroup.Basic.Example.tsx
@@ -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/NavPage.tsx b/packages/experiments/src/components/Nav/NavPage.tsx
index ebe06a1bff2e37..5d800379094b87 100644
--- a/packages/experiments/src/components/Nav/NavPage.tsx
+++ b/packages/experiments/src/components/Nav/NavPage.tsx
@@ -7,7 +7,7 @@ import {
 } from '@uifabric/example-app-base';
 import { NavExample } from './examples/Nav.Example';
 const NavExampleCode =
-  require('!raw-loader!experiments/src/components/Nav/examples/Nav.Example.tsx') as string;
+  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 {
@@ -25,7 +25,7 @@ export class NavPage extends React.Component<IComponentDemoPageProps, {}> {
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/Nav/Nav.types.ts')
+              require<string>('!raw-loader!@uifabric/experiments/src/components/Nav/Nav.types.ts')
             ] }
             renderOnly={ ['INavProps', 'INavState'] }
           />
diff --git a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
index a24a6f1549228a..cd4cdcad8511be 100644
--- a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
@@ -66,11 +66,54 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     const { items } = this.state;
     // tslint:disable-next-line:no-any
     if (index > -1) {
+      if (this.props.onItemDeleted) {
+        (this.props.onItemDeleted as (item: T) => void)(items[index]);
+      }
+
       const newItems = items.slice(0, index).concat(items.slice(index + 1));
       this.updateItems(newItems);
     }
   }
 
+  public removeItem = (item: ISelectedItemProps<T>): void => {
+    const { items } = this.state;
+    const index: number = items.indexOf(item);
+
+    this.removeItemAt(index);
+  }
+
+  // tslint:disable-next-line:no-any
+  public removeItems = (itemsToRemove: any[]): void => {
+    const { items } = this.state;
+    // tslint:disable-next-line:no-any
+    const newItems: T[] = items.filter((item: any) => itemsToRemove.indexOf(item) === -1);
+    const firstItemToRemove = itemsToRemove[0];
+    const index: number = items.indexOf(firstItemToRemove);
+
+    if (this.props.onItemDeleted) {
+      itemsToRemove.forEach((item: T) => {
+        (this.props.onItemDeleted as (item: T) => void)(item);
+      });
+    }
+
+    this.updateItems(newItems, index);
+  }
+
+  /**
+   * 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.
+  */
+  public updateItems(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);
+    } else {
+      this.setState({ items: items }, () => {
+        this._onSelectedItemsUpdated(items, focusIndex);
+      });
+    }
+  }
+
   public onCopy = (ev: React.ClipboardEvent<HTMLElement>): void => {
     if (this.props.onCopyItems && this.selection.getSelectedCount() > 0) {
       const selectedItems: T[] = this.selection.getSelection() as T[];
@@ -160,27 +203,6 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     }
   }
 
-  protected removeItem = (item: ISelectedItemProps<T>): void => {
-    const { items } = this.state;
-    const index: number = items.indexOf(item);
-
-    if (index >= 0) {
-      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 => {
-    const { items } = this.state;
-    // tslint:disable-next-line:no-any
-    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);
-  }
-
   // 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>): void {
@@ -193,21 +215,6 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     }
   }
 
-  /**
-   * 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.
-  */
-  protected updateItems(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);
-    } else {
-      this.setState({ items: items }, () => {
-        this._onSelectedItemsUpdated(items, focusIndex);
-      });
-    }
-  }
-
   protected copyItems(items: T[]): void {
     if (this.props.onCopyItems) {
       // tslint:disable-next-line:no-any
diff --git a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.types.ts b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.types.ts
index c737bdf20e4232..06f9a933fd7902 100644
--- a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.types.ts
+++ b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.types.ts
@@ -62,4 +62,9 @@ export interface IBaseSelectedItemsListProps<T> extends React.Props<any> {
   * @default ''
   */
   removeButtonAriaLabel?: string;
+
+  /**
+   * A callback when and item is deleted
+   */
+  onItemDeleted?: (deletedItem: T) => void;
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
index 90175d46014b9f..3f4049867221f3 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
@@ -46,7 +46,7 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
   public componentDidMount(): void {
     const getEditingItemText = this.props.getEditingItemText as (item: IExtendedPersonaProps) => string;
     const itemText = getEditingItemText(this.props.item);
-    this._editingFloatingPicker.value && this._editingFloatingPicker.value.onQueryStringChanged(itemText);
+    this._editingFloatingPicker.current && this._editingFloatingPicker.current.onQueryStringChanged(itemText);
     this._editingInput.value = itemText;
     this._editingInput.focus();
   }
@@ -91,14 +91,14 @@ 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();
     }
   }
 
@@ -110,7 +110,7 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
         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/SelectedItemWithContextMenu.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx
index 76d64899af892a..511abbe04cb386 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/Shimmer/Shimmer.base.tsx b/packages/experiments/src/components/Shimmer/Shimmer.base.tsx
index eae8306ce21ea9..589b7e7bc72df5 100644
--- a/packages/experiments/src/components/Shimmer/Shimmer.base.tsx
+++ b/packages/experiments/src/components/Shimmer/Shimmer.base.tsx
@@ -32,11 +32,22 @@ export class ShimmerBase extends BaseComponent<IShimmerProps, {}> {
   }
 
   public render(): JSX.Element {
-    const { getStyles, width, lineElements, children, isDataLoaded, isBaseStyle } = this.props;
+    const {
+      getStyles,
+      width,
+      lineElements,
+      children,
+      isDataLoaded,
+      isBaseStyle,
+      widthInPercentage,
+      widthInPixel
+    } = this.props;
 
     const rowHeight: number | undefined = lineElements ? findMaxElementHeight(lineElements) : undefined;
 
-    this._classNames = getClassNames(getStyles!, { width, rowHeight, isDataLoaded, isBaseStyle });
+    this._classNames = getClassNames(getStyles!, {
+      width, rowHeight, isDataLoaded, isBaseStyle, widthInPercentage, widthInPixel
+    });
 
     const renderedElements: React.ReactNode = getRenderedElements(lineElements, rowHeight);
 
diff --git a/packages/experiments/src/components/Shimmer/Shimmer.styles.ts b/packages/experiments/src/components/Shimmer/Shimmer.styles.ts
index ff78b19e0442a1..32ef4774beceb6 100644
--- a/packages/experiments/src/components/Shimmer/Shimmer.styles.ts
+++ b/packages/experiments/src/components/Shimmer/Shimmer.styles.ts
@@ -6,11 +6,19 @@ export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
     width,
     rowHeight,
     isDataLoaded,
-    isBaseStyle
+    isBaseStyle,
+    widthInPercentage,
+    widthInPixel
   } = props;
 
   const BACKGROUND_OFF_SCREEN_POSITION = '1000%';
 
+  // TODO reduce the logic after the deprecated value will be removed.
+  const ACTUAL_WIDTH =
+    width ? width + '%' :
+      widthInPercentage ? widthInPercentage + '%' :
+        widthInPixel ? widthInPixel + 'px' : '100%';
+
   const shimmerAnimation: string = keyframes({
     '0%': {
       backgroundPosition: `-${BACKGROUND_OFF_SCREEN_POSITION}`
@@ -48,7 +56,7 @@ export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
         right: '0',
         alignItems: 'center',
         alignContent: 'space-between',
-        width: width ? `${width}%` : '100%',
+        width: ACTUAL_WIDTH,
         height: 'auto',
         boxSizing: 'border-box',
         background: `${DefaultPalette.neutralLighter}
@@ -72,8 +80,7 @@ export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
         visibility: 'hidden'
       },
       isBaseStyle && {
-        position: 'static',
-        width: width ? `${width}px` : 'auto'
+        position: 'static'
       }
     ],
     dataWrapper: [
diff --git a/packages/experiments/src/components/Shimmer/Shimmer.types.ts b/packages/experiments/src/components/Shimmer/Shimmer.types.ts
index d868f5e522338a..8e1f437aaa4298 100644
--- a/packages/experiments/src/components/Shimmer/Shimmer.types.ts
+++ b/packages/experiments/src/components/Shimmer/Shimmer.types.ts
@@ -18,10 +18,24 @@ export interface IShimmerProps extends React.AllHTMLAttributes<HTMLElement> {
 
   /**
    * Sets the width of the shimmer wave wrapper in percentages.
+   * Deprecated, use a more specific width like widthInPixel or widthInPercentage.
    * @default 100%
+   * @deprecated
    */
   width?: number;
 
+  /**
+   * Sets the width of the shimmer wave wrapper in percentages relative to the containig parent element.
+   * @default 100%
+   */
+  widthInPercentage?: number;
+
+  /**
+   * Sets the width of the shimmer wave wrapper to an exact value in pixels.
+   * If none of the widths provided, it defaults to 100%.
+   */
+  widthInPixel?: number;
+
   /**
    * Controls when the shimmer is swapped with actual data through an animated transition.
    * @default false
@@ -52,19 +66,19 @@ export interface IShimmerElement {
   type: ShimmerElementType;
 
   /**
-   * The hight of the element in pixels (ICircle, ILine).
+   * The height of the element (ICircle, ILine) in pixels.
    * Read more details for each specific element.
    */
   height?: number;
 
   /**
-   * The width of the element in pixels (ILine, IGap).
+   * The width of the element (ILine, IGap) in pixels.
    * Read more details for each specific element.
    */
   widthInPixel?: number;
 
   /**
-   * The width of the element in pixels (ILine, IGap).
+   * The width of the element (ILine, IGap) in pixels.
    * Read more details for each specific element.
    */
   widthInPercentage?: number;
@@ -84,13 +98,14 @@ export interface ILine extends IShimmerElement {
   height?: number;
 
   /**
-   * The value provided will represent the width as '%' relative to the shimmer wrapper.
+   * The value provided will represent the width as '%' relative to shimmer wrapper.
+   * @default 100%
    */
   widthInPercentage?: number;
 
   /**
    * Sets the width of the Line to an exact value in pixels.
-   * @default 50px
+   * If none of the widths provided, it defaults to 100%.
    */
   widthInPixel?: number;
 }
@@ -98,6 +113,7 @@ export interface ILine extends IShimmerElement {
 export interface ICircle extends IShimmerElement {
   /**
    * Sets the height of the shimmer circle in pixels.
+   * Minimum supported 10px.
    * @default 24px
    */
   height?: number;
@@ -110,7 +126,8 @@ export interface IGap extends IShimmerElement {
    */
   height?: number;
   /**
-   * The value will be calculated as '%' relative the to shimmer wrapper.
+   * The value provided will represent the width as '%' relative to shimmer wrapper.
+   * If none of the widths provided, it defaults to 10px.
    */
   widthInPercentage?: number;
 
@@ -124,6 +141,8 @@ export interface IGap extends IShimmerElement {
 export interface IShimmerStyleProps {
   width?: number;
   rowHeight?: number;
+  widthInPercentage?: number;
+  widthInPixel?: number;
   isDataLoaded?: boolean;
   isBaseStyle?: boolean;
 }
diff --git a/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx b/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx
index 09eb5e2f5b8c5e..76ec1eb52a549a 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx
+++ b/packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx
@@ -8,7 +8,7 @@ import {
   IShimmerTileStyleProps,
   IShimmerTileStyles
 } from './ShimmerTile.types';
-import { TileLayoutSizes, TileSize } from '../../Tile';
+import { TileLayoutSizes, TileSize } from '../../../Tile';
 import { ShimmerGap } from '../ShimmerGap/ShimmerGap';
 import { getRenderedElements } from '../Shimmer.base';
 import { ShimmerElementType as ElemType } from '../Shimmer.types';
@@ -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/examples/Shimmer.Basic.Example.tsx b/packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx
index 0f98651586fe68..3016cb7e965995 100644
--- a/packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx
@@ -21,10 +21,10 @@ export class ShimmerBasicExample extends React.Component<{}, {}> {
         Generic Shimmer with no elements provided.
         <Shimmer />
         <Shimmer
-          width={ 75 }
+          widthInPercentage={ 75 }
         />
         <Shimmer
-          width={ 50 }
+          widthInPercentage={ 50 }
         />
         Custom Shimmer with elements provided.
         <Shimmer
@@ -49,7 +49,7 @@ export class ShimmerBasicExample extends React.Component<{}, {}> {
           ] }
         />
         <Shimmer
-          width={ 70 }
+          widthInPercentage={ 70 }
           lineElements={ [
             { type: ElemType.circle, height: 24 },
             { type: ElemType.gap, widthInPercentage: 2 },
@@ -82,6 +82,7 @@ export class ShimmerBasicExample extends React.Component<{}, {}> {
         <div className='shimmerBasicExample-wrapper'>
           <Shimmer
             isBaseStyle={ true }
+            widthInPixel={ 350 }
           >
             { getRenderedElements([
               { type: ElemType.line, widthInPixel: 40, height: 40 },
@@ -108,6 +109,7 @@ export class ShimmerBasicExample extends React.Component<{}, {}> {
         <div className='shimmerBasicExample-wrapper'>
           <Shimmer
             isBaseStyle={ true }
+            widthInPixel={ 550 }
           >
             { getRenderedElements([
               { type: ElemType.circle, height: 40 },
diff --git a/packages/experiments/src/components/Tile/Tile.tsx b/packages/experiments/src/components/Tile/Tile.tsx
index 61a0b7252c93da..f5c8526823369c 100644
--- a/packages/experiments/src/components/Tile/Tile.tsx
+++ b/packages/experiments/src/components/Tile/Tile.tsx
@@ -348,7 +348,7 @@ export class Tile extends BaseComponent<ITileProps, ITileState> {
     return (
       <span
         role='checkbox'
-        aria-label={ String(toggleSelectionAriaLabel) }
+        aria-label={ 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 20190f10fc5afc..3a62bccb84768c 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 {string | boolean}
+   * @type {string}
    * @memberof ITileProps
    */
-  toggleSelectionAriaLabel?: string | boolean;
+  toggleSelectionAriaLabel?: string;
 
   /**
    * Link ref
diff --git a/packages/experiments/src/components/TilesList/TilesList.tsx b/packages/experiments/src/components/TilesList/TilesList.tsx
index 72e7a7d3b5bfa1..3f85151a29ecb4 100644
--- a/packages/experiments/src/components/TilesList/TilesList.tsx
+++ b/packages/experiments/src/components/TilesList/TilesList.tsx
@@ -197,7 +197,7 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
 
     const cells: ITileCell<TItem>[] = items || [];
 
-    let grids: React.ReactNode[] = [];
+    const grids: React.ReactNode[] = [];
 
     const previousCell = this.state.cells[page.startIndex - 1];
     const nextCell = this.state.cells[page.startIndex + page.itemCount];
@@ -287,8 +287,8 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
         };
 
         if (cell.isPlaceholder && grid.mode !== TilesGridMode.none) {
-          let cellsPerRow = Math.floor(width / (grid.spacing + finalSize.width));
-          let totalPlaceholderItems = cellsPerRow * ROW_OF_PLACEHOLDER_CELLS;
+          const cellsPerRow = Math.floor(width / (grid.spacing + finalSize.width));
+          const totalPlaceholderItems = cellsPerRow * ROW_OF_PLACEHOLDER_CELLS;
           shimmerWrapperWidth = (cellsPerRow * finalSize.width) + (grid.spacing * (cellsPerRow - 1));
           for (let j = 0; j < totalPlaceholderItems; j++) {
             renderedCells.push(renderedCell(j));
@@ -330,7 +330,7 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
             <Shimmer
               key={ i }
               isBaseStyle={ true }
-              width={ shimmerWrapperWidth }
+              widthInPixel={ shimmerWrapperWidth }
             >
               { finalGrid }
             </Shimmer>
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 c245b495d72676..9b730404d77920 100644
--- a/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx
+++ b/packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx
@@ -194,7 +194,7 @@ export class TilesListDocumentExample extends React.Component<ITilesListDocument
 
   private _onRenderDocumentCell = (item: IExampleItem): JSX.Element => {
     const { tileSize } = this.props;
-    let imgSize = tileSize === 'large' ? 64 : 48;
+    const imgSize = tileSize === 'large' ? 64 : 48;
 
     return (
       <Tile
diff --git a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
index 15817e321616cc..e9684a01d4dcc6 100644
--- a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
+++ b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
@@ -94,7 +94,7 @@ export class VirtualizedList<TItem extends IObjectWithKey> extends BaseComponent
       itemOverdraw = 2
     } = this.props;
 
-    let ranges: IRange[] = [];
+    const ranges: IRange[] = [];
 
     // Calculate visible range
     const startIndex = Math.floor(
@@ -212,8 +212,8 @@ 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) {
-      let indexString = target.getAttribute('data-selection-index');
+    while (target !== this._root.current) {
+      const indexString = target.getAttribute('data-selection-index');
 
       if (indexString) {
         this._focusedIndex = Number(indexString);
diff --git a/packages/experiments/src/demo/index.tsx b/packages/experiments/src/demo/index.tsx
index 1d699c1f688ce4..216b84133f708e 100644
--- a/packages/experiments/src/demo/index.tsx
+++ b/packages/experiments/src/demo/index.tsx
@@ -24,7 +24,7 @@ let rootElement: HTMLElement | null;
 
 // Return the anchor link from the URL without the hash
 function _extractAnchorLink(path: string): string {
-  let index = path.lastIndexOf('#');
+  const index = path.lastIndexOf('#');
   if (index >= 0) {
     path = path.substr(index + 1, path.length - index);
   }
@@ -33,7 +33,7 @@ function _extractAnchorLink(path: string): string {
 
 function _scrollAnchorLink(): void {
   if ((window.location.hash.match(/#/g) || []).length > 1) {
-    let anchor = _extractAnchorLink(window.location.hash);
+    const anchor = _extractAnchorLink(window.location.hash);
     document.getElementById(anchor)!.scrollIntoView();
   }
 }
@@ -51,8 +51,8 @@ function _onLoad(): void {
 }
 
 function _getRoutes(): JSX.Element[] {
-  let routes = AppDefinition.testPages.map((page: IAppLink) => <Route key={ page.key } path={ page.url } component={ page.component } />);
-  let appRoutes: 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: IAppLinkGroup) => {
     group.links
@@ -90,7 +90,7 @@ function _onUnload(): void {
   }
 }
 
-let isReady = document.readyState === 'interactive' || document.readyState === 'complete';
+const isReady = document.readyState === 'interactive' || document.readyState === 'complete';
 
 if (isReady) {
   _onLoad();
diff --git a/packages/experiments/src/utilities/keysequence/IKeySequence.test.ts b/packages/experiments/src/utilities/keysequence/IKeySequence.test.ts
index 0e1c057e9d82a5..f5f14fec87efdb 100644
--- a/packages/experiments/src/utilities/keysequence/IKeySequence.test.ts
+++ b/packages/experiments/src/utilities/keysequence/IKeySequence.test.ts
@@ -12,59 +12,59 @@ describe('IKeySequence', () => {
 
   describe('keySequencesAreEqual', () => {
     it('empty key', () => {
-      let seq1: IKeySequence = { keys: ['a'] };
-      let seq2: IKeySequence = { keys: [] };
+      const seq1: IKeySequence = { keys: ['a'] };
+      const seq2: IKeySequence = { keys: [] };
       expect(keySequencesAreEqual(seq1, seq2)).toEqual(false);
     });
 
     it('single key', () => {
-      let seq1: IKeySequence = { keys: ['a'] };
-      let seq2: IKeySequence = { keys: ['a'] };
-      let seq3: IKeySequence = { keys: ['b'] };
+      const seq1: IKeySequence = { keys: ['a'] };
+      const seq2: IKeySequence = { keys: ['a'] };
+      const seq3: IKeySequence = { keys: ['b'] };
       expect(keySequencesAreEqual(seq1, seq2)).toEqual(true);
       expect(keySequencesAreEqual(seq1, seq3)).toEqual(false);
     });
 
     it('multiple keys', () => {
-      let seq1: IKeySequence = { keys: ['a', 'b'] };
-      let seq2: IKeySequence = { keys: ['a', 'b'] };
-      let seq3: IKeySequence = { keys: ['b', 'a'] };
+      const seq1: IKeySequence = { keys: ['a', 'b'] };
+      const seq2: IKeySequence = { keys: ['a', 'b'] };
+      const seq3: IKeySequence = { keys: ['b', 'a'] };
       expect(keySequencesAreEqual(seq1, seq2)).toEqual(true);
       expect(keySequencesAreEqual(seq1, seq3)).toEqual(false);
     });
 
     it('should be false when sequences are different length', () => {
-      let seq1: IKeySequence = { keys: ['a'] };
-      let seq2: IKeySequence = { keys: ['a', 'b'] };
+      const seq1: IKeySequence = { keys: ['a'] };
+      const seq2: IKeySequence = { keys: ['a', 'b'] };
       expect(keySequencesAreEqual(seq1, seq2)).toEqual(false);
     });
   });
 
   describe('keySequencesContain', () => {
     it('empty sequences', () => {
-      let seq1: IKeySequence = { keys: ['a'] };
-      let sequences: IKeySequence[] = [{ keys: [] }];
+      const seq1: IKeySequence = { keys: ['a'] };
+      const sequences: IKeySequence[] = [{ keys: [] }];
       expect(keySequencesContain(sequences, seq1)).toEqual(false);
     });
 
     it('empty key sequence', () => {
-      let seq1: IKeySequence = { keys: [] };
-      let sequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['b'] }];
+      const seq1: IKeySequence = { keys: [] };
+      const sequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['b'] }];
       expect(keySequencesContain(sequences, seq1)).toEqual(false);
     });
 
     it('single key', () => {
-      let seq1: IKeySequence = { keys: ['a'] };
-      let sequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['b'] }];
-      let sequences2: IKeySequence[] = [{ keys: ['a', 'b'] }];
+      const seq1: IKeySequence = { keys: ['a'] };
+      const sequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['b'] }];
+      const sequences2: IKeySequence[] = [{ keys: ['a', 'b'] }];
       expect(keySequencesContain(sequences, seq1)).toEqual(true);
       expect(keySequencesContain(sequences2, seq1)).toEqual(false);
     });
 
     it('multiple keys', () => {
-      let seq1: IKeySequence = { keys: ['a', 'b'] };
-      let sequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['b'] }];
-      let sequences2: IKeySequence[] = [{ keys: ['a', 'b'] }, { keys: ['c', 'd'] }];
+      const seq1: IKeySequence = { keys: ['a', 'b'] };
+      const sequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['b'] }];
+      const sequences2: IKeySequence[] = [{ keys: ['a', 'b'] }, { keys: ['c', 'd'] }];
       expect(keySequencesContain(sequences, seq1)).toEqual(false);
       expect(keySequencesContain(sequences2, seq1)).toEqual(true);
     });
@@ -72,64 +72,64 @@ describe('IKeySequence', () => {
 
   describe('keySequencesStartsWith', () => {
     it('false when the key sequence for seq1 is zero ', () => {
-      let seq1: IKeySequence = { keys: [] };
-      let seq2: IKeySequence = { keys: ['b'] };
+      const seq1: IKeySequence = { keys: [] };
+      const seq2: IKeySequence = { keys: ['b'] };
       expect(keySequenceStartsWith(seq1, seq2)).toEqual(false);
     });
 
     it('false when the key sequence for seq2 is zero ', () => {
-      let seq1: IKeySequence = { keys: ['a'] };
-      let seq2: IKeySequence = { keys: [] };
+      const seq1: IKeySequence = { keys: ['a'] };
+      const seq2: IKeySequence = { keys: [] };
       expect(keySequenceStartsWith(seq1, seq2)).toEqual(false);
     });
 
     it('false when sequence start is different', () => {
-      let seq1: IKeySequence = { keys: ['a'] };
-      let seq2: IKeySequence = { keys: ['b'] };
+      const seq1: IKeySequence = { keys: ['a'] };
+      const seq2: IKeySequence = { keys: ['b'] };
       expect(keySequenceStartsWith(seq1, seq2)).toEqual(false);
     });
 
     it('true when sequences are equal', () => {
-      let seq1: IKeySequence = { keys: ['a'] };
-      let seq2: IKeySequence = { keys: ['a'] };
+      const seq1: IKeySequence = { keys: ['a'] };
+      const seq2: IKeySequence = { keys: ['a'] };
       expect(keySequenceStartsWith(seq1, seq2)).toEqual(true);
     });
 
     it('true when sequence1 is a subset of sequence 2', () => {
-      let seq1: IKeySequence = { keys: ['a'] };
-      let seq2: IKeySequence = { keys: ['a', 'b'] };
+      const seq1: IKeySequence = { keys: ['a'] };
+      const seq2: IKeySequence = { keys: ['a', 'b'] };
       expect(keySequenceStartsWith(seq1, seq2)).toEqual(true);
     });
 
     it('true when sequence2 is a subset of sequence 1', () => {
-      let seq1: IKeySequence = { keys: ['a', 'b'] };
-      let seq2: IKeySequence = { keys: ['a'] };
+      const seq1: IKeySequence = { keys: ['a', 'b'] };
+      const seq2: IKeySequence = { keys: ['a'] };
       expect(keySequenceStartsWith(seq1, seq2)).toEqual(true);
     });
   });
 
   describe('convertSequencesToKeytipID', () => {
     it('for one singular key sequence', () => {
-      let keySequence: IKeySequence[] = [{ keys: ['a'] }];
-      let keytipID = convertSequencesToKeytipID(keySequence);
+      const keySequence: IKeySequence[] = [{ keys: ['a'] }];
+      const keytipID = convertSequencesToKeytipID(keySequence);
       expect(keytipID).toEqual(ktpFullPrefix + 'a');
     });
 
     it('for one complex key sequence', () => {
-      let complexKeySequence: IKeySequence[] = [{ keys: ['a', 'd'] }];
-      let keytipID = convertSequencesToKeytipID(complexKeySequence);
+      const complexKeySequence: IKeySequence[] = [{ keys: ['a', 'd'] }];
+      const keytipID = convertSequencesToKeytipID(complexKeySequence);
       expect(keytipID).toEqual(ktpFullPrefix + 'a' + ktpSeparator + 'd');
     });
 
     it('for multiple singular key sequences', () => {
-      let keySequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['c'] }];
-      let keytipID = convertSequencesToKeytipID(keySequences);
+      const keySequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['c'] }];
+      const keytipID = convertSequencesToKeytipID(keySequences);
       expect(keytipID).toEqual(ktpFullPrefix + 'a' + ktpSeparator + 'c');
     });
 
     it('for multiple complex key sequences', () => {
-      let complexKeySequences: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
-      let keytipID = convertSequencesToKeytipID(complexKeySequences);
+      const complexKeySequences: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
+      const keytipID = convertSequencesToKeytipID(complexKeySequences);
       expect(keytipID).toEqual(ktpFullPrefix + 'a' +
         ktpSeparator + 'n' + ktpSeparator +
         'c' + ktpSeparator + 'b');
@@ -138,16 +138,16 @@ describe('IKeySequence', () => {
 
   describe('fullKeySequencesAreEqual', () => {
     it('different lengths should not be equal', () => {
-      let keySequences1: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
-      let keySequences2: IKeySequence[] = [{ keys: ['a', 'n'] }];
+      const keySequences1: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
+      const keySequences2: IKeySequence[] = [{ keys: ['a', 'n'] }];
       expect(fullKeySequencesAreEqual(keySequences1, keySequences2)).toEqual(false);
     });
 
     it('should correctly be equal', () => {
-      let keySequences1: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
-      let keySequences2: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
-      let keySequences3: IKeySequence[] = [{ keys: ['n', 'a'] }, { keys: ['c', 'b'] }];
-      let keySequences4: IKeySequence[] = [{ keys: ['a'] }, { keys: ['c', 'b'] }];
+      const keySequences1: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
+      const keySequences2: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
+      const keySequences3: IKeySequence[] = [{ keys: ['n', 'a'] }, { keys: ['c', 'b'] }];
+      const keySequences4: IKeySequence[] = [{ keys: ['a'] }, { keys: ['c', 'b'] }];
 
       expect(fullKeySequencesAreEqual(keySequences1, keySequences2)).toEqual(true);
       expect(fullKeySequencesAreEqual(keySequences1, keySequences3)).toEqual(false);
diff --git a/packages/experiments/src/utilities/keysequence/IKeySequence.ts b/packages/experiments/src/utilities/keysequence/IKeySequence.ts
index f7f6e7a57731e4..9334bacce3ac70 100644
--- a/packages/experiments/src/utilities/keysequence/IKeySequence.ts
+++ b/packages/experiments/src/utilities/keysequence/IKeySequence.ts
@@ -13,8 +13,8 @@ export interface IKeySequence {
  * @returns {boolean} T/F if the two sequences are equal
  */
 export function keySequencesAreEqual(seq1: IKeySequence, seq2: IKeySequence): boolean {
-  let keyCodes1 = seq1.keys.join();
-  let keyCodes2 = seq2.keys.join();
+  const keyCodes1 = seq1.keys.join();
+  const keyCodes2 = seq2.keys.join();
   return keyCodes1 === keyCodes2;
 }
 
@@ -61,8 +61,8 @@ export function keySequencesContain(sequences: IKeySequence[], seq: IKeySequence
  * @returns {boolean} T/F if seq1 starts with seq2, or vice versa
  */
 export function keySequenceStartsWith(seq1: IKeySequence, seq2: IKeySequence): boolean {
-  let keyCodes1 = seq1.keys.join();
-  let keyCodes2 = seq2.keys.join();
+  const keyCodes1 = seq1.keys.join();
+  const keyCodes2 = seq2.keys.join();
   if (keyCodes1.length === 0 || keyCodes2.length === 0) {
     return false;
   }
diff --git a/packages/experiments/src/utilities/keysequence/IKeytipTransitionKey.test.ts b/packages/experiments/src/utilities/keysequence/IKeytipTransitionKey.test.ts
index 0024e7ae231881..6bb01bb1c297c8 100644
--- a/packages/experiments/src/utilities/keysequence/IKeytipTransitionKey.test.ts
+++ b/packages/experiments/src/utilities/keysequence/IKeytipTransitionKey.test.ts
@@ -5,20 +5,20 @@ describe('IKeytipTransitionKey', () => {
 
   describe('transitionKeysAreEqual', () => {
     it('key only equality', () => {
-      let key1: IKeytipTransitionKey = { key: 'a' };
-      let key2: IKeytipTransitionKey = { key: 'b' };
-      let key3: IKeytipTransitionKey = { key: 'a' };
+      const key1: IKeytipTransitionKey = { key: 'a' };
+      const key2: IKeytipTransitionKey = { key: 'b' };
+      const key3: IKeytipTransitionKey = { key: 'a' };
 
       expect(transitionKeysAreEqual(key1, key2)).toEqual(false);
       expect(transitionKeysAreEqual(key1, key3)).toEqual(true);
     });
 
     it('key and modifier equality', () => {
-      let key1: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.alt] };
-      let key2: IKeytipTransitionKey = { key: 'a' };
-      let key3: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.ctrl] };
-      let key4: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.alt, KeytipTransitionModifier.shift] };
-      let key5: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.shift, KeytipTransitionModifier.alt] };
+      const key1: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.alt] };
+      const key2: IKeytipTransitionKey = { key: 'a' };
+      const key3: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.ctrl] };
+      const key4: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.alt, KeytipTransitionModifier.shift] };
+      const key5: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.shift, KeytipTransitionModifier.alt] };
 
       expect(transitionKeysAreEqual(key1, key2)).toEqual(false);
       expect(transitionKeysAreEqual(key1, key3)).toEqual(false);
@@ -30,11 +30,11 @@ describe('IKeytipTransitionKey', () => {
 
   describe('transitionKeySequencesContain', () => {
     it('key only', () => {
-      let key1: IKeytipTransitionKey = { key: 'a' };
+      const key1: IKeytipTransitionKey = { key: 'a' };
 
-      let keys1: IKeytipTransitionKey[] = [{ key: 'a' }];
-      let keys2: IKeytipTransitionKey[] = [{ key: 'a' }, { key: 'b' }];
-      let keys3: IKeytipTransitionKey[] = [{ key: 'c' }, { key: 'b' }];
+      const keys1: IKeytipTransitionKey[] = [{ key: 'a' }];
+      const keys2: IKeytipTransitionKey[] = [{ key: 'a' }, { key: 'b' }];
+      const keys3: IKeytipTransitionKey[] = [{ key: 'c' }, { key: 'b' }];
 
       expect(transitionKeysContain(keys1, key1)).toEqual(true);
       expect(transitionKeysContain(keys2, key1)).toEqual(true);
@@ -42,11 +42,11 @@ describe('IKeytipTransitionKey', () => {
     });
 
     it('key and modifier', () => {
-      let key1: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.alt] };
+      const key1: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.alt] };
 
-      let keys1: IKeytipTransitionKey[] = [{ key: 'a', modifierKeys: [KeytipTransitionModifier.alt] }];
-      let keys2: IKeytipTransitionKey[] = [{ key: 'b', modifierKeys: [KeytipTransitionModifier.alt] }];
-      let keys3: IKeytipTransitionKey[] = [
+      const keys1: IKeytipTransitionKey[] = [{ key: 'a', modifierKeys: [KeytipTransitionModifier.alt] }];
+      const keys2: IKeytipTransitionKey[] = [{ key: 'b', modifierKeys: [KeytipTransitionModifier.alt] }];
+      const keys3: IKeytipTransitionKey[] = [
         { key: 'a', modifierKeys: [KeytipTransitionModifier.alt, KeytipTransitionModifier.ctrl] },
         { key: 'a', modifierKeys: [KeytipTransitionModifier.alt] }
       ];
diff --git a/packages/experiments/src/utilities/keytip/KeytipManager.test.tsx b/packages/experiments/src/utilities/keytip/KeytipManager.test.tsx
index 210b8921341a76..aede92d20473ec 100644
--- a/packages/experiments/src/utilities/keytip/KeytipManager.test.tsx
+++ b/packages/experiments/src/utilities/keytip/KeytipManager.test.tsx
@@ -43,34 +43,34 @@ describe('KeytipManager', () => {
   describe('getAriaDescribedBy', () => {
 
     it('returns just the layer ID when an empty sequence is passed in', () => {
-      let keySequence: IKeySequence[] = [];
-      let ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequence);
+      const keySequence: IKeySequence[] = [];
+      const ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequence);
       expect(ariaDescribedBy).toEqual(layerID);
     });
 
     it('for one singular key sequence', () => {
-      let keySequence: IKeySequence[] = [{ keys: ['b'] }];
-      let ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequence);
+      const keySequence: IKeySequence[] = [{ keys: ['b'] }];
+      const ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequence);
       expect(ariaDescribedBy).toEqual(layerID + ' ' + convertSequencesToKeytipID(keySequence));
     });
 
     it('for one complex key sequence', () => {
-      let keySequence: IKeySequence[] = [{ keys: ['b', 'c'] }];
-      let ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequence);
+      const keySequence: IKeySequence[] = [{ keys: ['b', 'c'] }];
+      const ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequence);
       expect(ariaDescribedBy).toEqual(layerID + ' ' + convertSequencesToKeytipID(keySequence));
     });
 
     it('for multiple singular key sequences', () => {
-      let keySequences: IKeySequence[] = [{ keys: ['b'] }, { keys: ['c'] }];
-      let ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequences);
+      const keySequences: IKeySequence[] = [{ keys: ['b'] }, { keys: ['c'] }];
+      const ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequences);
       expect(ariaDescribedBy).toEqual(layerID +
         ' ' + convertSequencesToKeytipID([keySequences[0]]) +
         ' ' + convertSequencesToKeytipID(keySequences));
     });
 
     it('for multiple complex key sequences', () => {
-      let keySequences: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
-      let ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequences);
+      const keySequences: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
+      const ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequences);
       expect(ariaDescribedBy).toEqual(layerID +
         ' ' + convertSequencesToKeytipID([keySequences[0]]) +
         ' ' + convertSequencesToKeytipID(keySequences));
@@ -147,8 +147,8 @@ describe('KeytipManager', () => {
       // There is no more buffer in the sequence
       expect(keytipManager.currentSequence.keys.length).toEqual(0);
       // Children keytips should be visible
-      let childrenKeytips = getKeytips(defaultKeytipLayer, keytipManager.keytipTree.currentKeytip.children);
-      for (let childrenKeytip of childrenKeytips) {
+      const childrenKeytips = getKeytips(defaultKeytipLayer, keytipManager.keytipTree.currentKeytip.children);
+      for (const childrenKeytip of childrenKeytips) {
         expect(childrenKeytip.visible).toEqual(true);
       }
       // We haven't exited keytip mode (current keytip is not undefined and is set to the matched keytip)
@@ -170,7 +170,7 @@ describe('KeytipManager', () => {
 
     it('Processing a node with with a keytipLink should make currentKeytip its link', () => {
       const onExecuteOM: jest.Mock = jest.fn();
-      let nodeOverflowM = keytipManager.keytipTree.nodeMap[keytipOverflowIdM];
+      const nodeOverflowM = keytipManager.keytipTree.nodeMap[keytipOverflowIdM];
       nodeOverflowM.onExecute = onExecuteOM;
       keytipManager.keytipTree.currentKeytip = keytipManager.keytipTree.root;
       keytipManager.processInput('m');
@@ -203,7 +203,7 @@ describe('KeytipManager', () => {
       keytipManager.registerKeytip(keytipGProps);
 
       // G should now be visible in the layer
-      let keytipG = getKeytips(defaultKeytipLayer, [keytipIdG]);
+      const keytipG = getKeytips(defaultKeytipLayer, [keytipIdG]);
       expect(keytipG).toHaveLength(1);
       expect(keytipG[0].visible).toEqual(true);
     });
@@ -243,7 +243,7 @@ describe('KeytipManager', () => {
 });
 
 function getKeytips(keytipLayer: ReactWrapper, keytipIDs?: string[]): IKeytipProps[] {
-  let currentKeytips: IKeytipProps[] = keytipLayer.state('keytips');
+  const currentKeytips: IKeytipProps[] = keytipLayer.state('keytips');
   if (keytipIDs) {
     return currentKeytips.filter((currentKeytip: IKeytipProps) => {
       return keytipIDs.indexOf(convertSequencesToKeytipID(currentKeytip.keySequences)) !== -1;
@@ -291,15 +291,15 @@ function populateTreeMap(keytipTree: KeytipTree, rootId: string): KeytipTree {
   const keytipIdM = ktpFullPrefix + 'm';
   const keytipSeqM: IKeySequence = { keys: ['m'] };
 
-  let nodeB = createTreeNode(keytipIdB, rootId, [], keytipSequenceB, true /* hasChildrenNodes*/);
-  let nodeC = createTreeNode(keytipIdC, rootId, [], keytipSequenceC);
-  let nodeE1 = createTreeNode(keytipIdE1, rootId, [keytipIdD, keytipIdF], keytipSequenceE1);
-  let nodeE2 = createTreeNode(keytipIdE2, rootId, [keytipIdD, keytipIdF], keytipSequenceE2);
-  let nodeD = createTreeNode(keytipIdD, keytipIdE1, [], keytipSequenceD);
-  let nodeF = createTreeNode(keytipIdF, keytipIdE1, [], keytipSequenceF);
-  let nodeO = createTreeNode(keytipIdO, rootId, [keytipOverflowIdM], keytipOverflowSeq, true);
-  let nodeOM = createTreeNode(keytipOverflowIdM, keytipIdO, [], keytipSeqM);
-  let nodeM = createTreeNode(keytipIdM, rootId, [], keytipSeqM);
+  const nodeB = createTreeNode(keytipIdB, rootId, [], keytipSequenceB, true /* hasChildrenNodes*/);
+  const nodeC = createTreeNode(keytipIdC, rootId, [], keytipSequenceC);
+  const nodeE1 = createTreeNode(keytipIdE1, rootId, [keytipIdD, keytipIdF], keytipSequenceE1);
+  const nodeE2 = createTreeNode(keytipIdE2, rootId, [keytipIdD, keytipIdF], keytipSequenceE2);
+  const nodeD = createTreeNode(keytipIdD, keytipIdE1, [], keytipSequenceD);
+  const nodeF = createTreeNode(keytipIdF, keytipIdE1, [], keytipSequenceF);
+  const nodeO = createTreeNode(keytipIdO, rootId, [keytipOverflowIdM], keytipOverflowSeq, true);
+  const nodeOM = createTreeNode(keytipOverflowIdM, keytipIdO, [], keytipSeqM);
+  const nodeM = createTreeNode(keytipIdM, rootId, [], keytipSeqM);
   nodeM.keytipLink = nodeOM;
   keytipTree.nodeMap[rootId].children.push(keytipIdB, keytipIdC, keytipIdE1, keytipIdE2, keytipIdO, keytipIdM);
   keytipTree.nodeMap[keytipIdB] = nodeB;
diff --git a/packages/experiments/src/utilities/keytip/KeytipManager.ts b/packages/experiments/src/utilities/keytip/KeytipManager.ts
index 74d804118d3715..0004d2f4d83238 100644
--- a/packages/experiments/src/utilities/keytip/KeytipManager.ts
+++ b/packages/experiments/src/utilities/keytip/KeytipManager.ts
@@ -55,7 +55,7 @@ export class KeytipManager {
    * @returns {string} String to use for the aria-describedby property for the element with this Keytip
    */
   public getAriaDescribedBy(keySequences: IKeySequence[]): string {
-    let describedby = this._layer.props.id;
+    const describedby = this._layer.props.id;
     if (!keySequences.length) {
       // Return just the layer ID
       return describedby;
@@ -85,8 +85,8 @@ export class KeytipManager {
     this.keytipTree.addNode(keytipProps);
 
     // Construct aria-describedby and data-ktp-id attributes and return
-    let ariaDescribedBy = this.getAriaDescribedBy(keytipProps.keySequences);
-    let ktpId = convertSequencesToKeytipID(keytipProps.keySequences);
+    const ariaDescribedBy = this.getAriaDescribedBy(keytipProps.keySequences);
+    const ktpId = convertSequencesToKeytipID(keytipProps.keySequences);
 
     return {
       'aria-describedby': ariaDescribedBy,
@@ -121,7 +121,7 @@ export class KeytipManager {
    */
   public hideKeytips(ids?: string[]): void {
     // We can either hide keytips from the supplied array of ids, or all keytips.
-    let keysToHide = ids ? ids : Object.keys(this.keytipTree.nodeMap);
+    const keysToHide = ids ? ids : Object.keys(this.keytipTree.nodeMap);
     this._changeKeytipVisibility(keysToHide, false /* visible */);
   }
 
@@ -157,7 +157,7 @@ export class KeytipManager {
         } else {
           // If this keytip has a onReturn prop, we execute the func.
           if (this.keytipTree.currentKeytip.onReturn) {
-            let domEl = this._getKeytipDOMElement(this.keytipTree.currentKeytip.id);
+            const domEl = this._getKeytipDOMElement(this.keytipTree.currentKeytip.id);
             this.keytipTree.currentKeytip.onReturn(domEl);
           }
 
@@ -189,18 +189,18 @@ export class KeytipManager {
    */
   public processInput(key: string): void {
     // Concat the input key with the current sequence
-    let currentSequence: IKeySequence = { keys: [...this.currentSequence.keys, ...[key]] };
+    const currentSequence: IKeySequence = { keys: [...this.currentSequence.keys, ...[key]] };
 
     // currentKeytip must be defined, otherwise we haven't entered keytip mode yet
     if (this.keytipTree.currentKeytip) {
-      let node = this.keytipTree.getExactMatchedNode(currentSequence, this.keytipTree.currentKeytip);
+      const node = this.keytipTree.getExactMatchedNode(currentSequence, this.keytipTree.currentKeytip);
       if (node) {
         // If this is a persisted keytip, then we use its keytipLink
         this.keytipTree.currentKeytip = node.keytipLink ? node.keytipLink : node;
 
         // Execute this node's onExecute if defined
         if (this.keytipTree.currentKeytip.onExecute) {
-          let domEl = this._getKeytipDOMElement(this.keytipTree.currentKeytip.id);
+          const domEl = this._getKeytipDOMElement(this.keytipTree.currentKeytip.id);
           this.keytipTree.currentKeytip.onExecute(domEl);
         }
 
@@ -219,11 +219,11 @@ export class KeytipManager {
         return;
       }
 
-      let partialNodes = this.keytipTree.getPartiallyMatchedNodes(currentSequence, this.keytipTree.currentKeytip);
+      const partialNodes = this.keytipTree.getPartiallyMatchedNodes(currentSequence, this.keytipTree.currentKeytip);
       if (partialNodes.length > 0) {
         // We found nodes that partially match the sequence, so we show only those.
         this.hideKeytips();
-        let ids = partialNodes.map((partialNode: IKeytipTreeNode) => { return partialNode.id; });
+        const ids = partialNodes.map((partialNode: IKeytipTreeNode) => { return partialNode.id; });
         this.showKeytips(ids);
         // Save currentSequence
         this.currentSequence = currentSequence;
@@ -244,11 +244,11 @@ export class KeytipManager {
    */
   private _isCurrentKeytipParent(keytipProps: IKeytipProps): boolean {
     if (this.keytipTree.currentKeytip) {
-      let fullSequence = [...keytipProps.keySequences];
+      const fullSequence = [...keytipProps.keySequences];
       // Take off the last sequence to calculate the parent ID
       fullSequence.pop();
       // Parent ID is the root if there aren't any more sequences
-      let parentID = fullSequence.length === 0 ? this.keytipTree.root.id : convertSequencesToKeytipID(fullSequence);
+      const parentID = fullSequence.length === 0 ? this.keytipTree.root.id : convertSequencesToKeytipID(fullSequence);
       return this.keytipTree.currentKeytip.id === parentID;
     }
     return false;
@@ -261,7 +261,7 @@ export class KeytipManager {
    * @return {HTMLElement} DOM element of the keytip
    */
   private _getKeytipDOMElement(keytipId: string): HTMLElement {
-    let dataKeytipId = constructKeytipTargetFromId(keytipId);
+    const dataKeytipId = constructKeytipTargetFromId(keytipId);
     return document.querySelector(dataKeytipId) as HTMLElement;
   }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keytip/KeytipTree.test.tsx b/packages/experiments/src/utilities/keytip/KeytipTree.test.tsx
index 99c9d480d3ea09..9b3fbc4054464a 100644
--- a/packages/experiments/src/utilities/keytip/KeytipTree.test.tsx
+++ b/packages/experiments/src/utilities/keytip/KeytipTree.test.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
-
 import * as ReactTestUtils from 'react-dom/test-utils';
+
 import { IKeytipProps, KeytipTransitionModifier } from '../../Keytip';
-import { KeytipTree, IKeytipTreeNode } from './KeytipTree';
-import { KeytipLayer } from '../../KeytipLayer';
-import { KeytipManager } from './KeytipManager';
+import { IKeytipTreeNode, KeytipTree } from './KeytipTree';
+import { ktpFullPrefix, ktpSeparator } from '../../utilities/keytip/KeytipUtils';
+
 import { IKeySequence } from '../../utilities/keysequence/IKeySequence';
 import { IKeytipTransitionKey } from '../../utilities/keysequence/IKeytipTransitionKey';
-import { ktpSeparator, ktpFullPrefix } from '../../utilities/keytip/KeytipUtils';
+import { KeytipLayer } from '../../KeytipLayer';
+import { KeytipManager } from './KeytipManager';
 
 describe('KeytipTree', () => {
   const layerID = 'my-layer-id';
@@ -29,7 +30,7 @@ describe('KeytipTree', () => {
   });
 
   it('constructor creates a root node', () => {
-    let keytipTree = keytipManager.keytipTree;
+    const keytipTree = keytipManager.keytipTree;
 
     // Tree root ID should be the layer's ID
     expect(keytipTree.root.id).toEqual(layerID);
@@ -43,7 +44,7 @@ describe('KeytipTree', () => {
 
   describe('addNode', () => {
     it('directly under root works correctly', () => {
-      let keytipTree = keytipManager.keytipTree;
+      const keytipTree = keytipManager.keytipTree;
 
       // TreeNode C, will be child of root
       const keytipIdC = ktpFullPrefix + 'c';
@@ -57,7 +58,7 @@ describe('KeytipTree', () => {
 
       // Test C was added to nodeMap
       expect(Object.keys(keytipTree.nodeMap)).toHaveLength(2);
-      let keytipNodeC = keytipTree.nodeMap[keytipIdC];
+      const keytipNodeC = keytipTree.nodeMap[keytipIdC];
       expect(keytipNodeC).toBeDefined();
 
       // Test TreeNode C properties
@@ -67,7 +68,7 @@ describe('KeytipTree', () => {
     });
 
     it('two levels from root', () => {
-      let keytipTree = keytipManager.keytipTree;
+      const keytipTree = keytipManager.keytipTree;
 
       // Parent
       const keytipIdC = ktpFullPrefix + 'c';
@@ -84,7 +85,7 @@ describe('KeytipTree', () => {
       expect(keytipTree.nodeMap[keytipIdC].children).toContain(keytipIdB);
 
       // Test B was added to nodeMap
-      let keytipNodeB = keytipTree.nodeMap[keytipIdB];
+      const keytipNodeB = keytipTree.nodeMap[keytipIdB];
       expect(keytipNodeB).toBeDefined();
 
       // Test TreeNode B properties
@@ -94,7 +95,7 @@ describe('KeytipTree', () => {
     });
 
     it('add a child node before its parent', () => {
-      let keytipTree = keytipManager.keytipTree;
+      const keytipTree = keytipManager.keytipTree;
 
       // Parent
       const keytipIdC = ktpFullPrefix + 'c';
@@ -107,7 +108,7 @@ describe('KeytipTree', () => {
       keytipTree.addNode(createKeytipProps(keytipSequenceB));
 
       // Test B was added to nodeMap
-      let keytipNodeB = keytipTree.nodeMap[keytipIdB];
+      const keytipNodeB = keytipTree.nodeMap[keytipIdB];
       expect(keytipNodeB).toBeDefined();
 
       // Test B has C set as parent
@@ -155,7 +156,7 @@ describe('KeytipTree', () => {
        * Nodes will be added in order: F, C, B, D, E
        */
 
-      let keytipTree = keytipManager.keytipTree;
+      const keytipTree = keytipManager.keytipTree;
 
       // Node B
       const keytipIdB = ktpFullPrefix + 'c' + ktpSeparator + 'b';
@@ -184,15 +185,15 @@ describe('KeytipTree', () => {
       keytipTree.addNode(createKeytipProps(keytipSequenceE));
 
       // Test all nodes are in the nodeMap
-      let keytipNodeB = keytipTree.nodeMap[keytipIdB];
+      const keytipNodeB = keytipTree.nodeMap[keytipIdB];
       expect(keytipNodeB).toBeDefined();
-      let keytipNodeC = keytipTree.nodeMap[keytipIdC];
+      const keytipNodeC = keytipTree.nodeMap[keytipIdC];
       expect(keytipNodeC).toBeDefined();
-      let keytipNodeD = keytipTree.nodeMap[keytipIdD];
+      const keytipNodeD = keytipTree.nodeMap[keytipIdD];
       expect(keytipNodeD).toBeDefined();
-      let keytipNodeE = keytipTree.nodeMap[keytipIdE];
+      const keytipNodeE = keytipTree.nodeMap[keytipIdE];
       expect(keytipNodeE).toBeDefined();
-      let keytipNodeF = keytipTree.nodeMap[keytipIdF];
+      const keytipNodeF = keytipTree.nodeMap[keytipIdF];
       expect(keytipNodeF).toBeDefined();
 
       // Test each node's parent and children
@@ -221,8 +222,8 @@ describe('KeytipTree', () => {
     });
 
     it('add a node with overflowsetSequence when overflow node already has been created', () => {
-      let rootId = 'a';
-      let keytipTree = new KeytipTree(rootId);
+      const rootId = 'a';
+      const keytipTree = new KeytipTree(rootId);
       /**
        *   Tree should end up looking like: Where O is overflow menu and d is inside
        *
@@ -241,7 +242,7 @@ describe('KeytipTree', () => {
       const keytipPersistedIdD = ktpFullPrefix + 'd';
       const keytipOverflowIdD = ktpFullPrefix + 'o' + ktpSeparator + 'd';
       const keytipSequenceD: IKeySequence[] = [{ keys: ['d'] }];
-      let keytipProps = createKeytipProps(keytipSequenceD, overflowSequence);
+      const keytipProps = createKeytipProps(keytipSequenceD, overflowSequence);
 
       // Add d node with an overflow sequence
       keytipTree.addNode(keytipProps);
@@ -250,11 +251,11 @@ describe('KeytipTree', () => {
       expect(keytipTree.root.children).toHaveLength(2);
 
       // Test nodes are in the node map
-      let keytipOverflowNode = keytipTree.nodeMap[keytipIdO];
+      const keytipOverflowNode = keytipTree.nodeMap[keytipIdO];
       expect(keytipOverflowNode).toBeDefined();
-      let keytipPersistedD = keytipTree.nodeMap[keytipPersistedIdD];
+      const keytipPersistedD = keytipTree.nodeMap[keytipPersistedIdD];
       expect(keytipPersistedD).toBeDefined();
-      let keytipOverflowD = keytipTree.nodeMap[keytipOverflowIdD];
+      const keytipOverflowD = keytipTree.nodeMap[keytipOverflowIdD];
       expect(keytipOverflowD).toBeDefined();
 
       // Test hierarchy
@@ -267,8 +268,8 @@ describe('KeytipTree', () => {
     });
 
     it('add a node with overflowsetSequence when overflow node has not been created', () => {
-      let rootId = 'a';
-      let keytipTree = new KeytipTree(rootId);
+      const rootId = 'a';
+      const keytipTree = new KeytipTree(rootId);
       /**
        *   Tree should end up looking like: Where O is overflow menu and d is inside
        *
@@ -286,7 +287,7 @@ describe('KeytipTree', () => {
       const keytipPersistedIdD = ktpFullPrefix + 'd';
       const keytipOverflowIdD = ktpFullPrefix + 'o' + ktpSeparator + 'd';
       const keytipSequenceD: IKeySequence[] = [{ keys: ['d'] }];
-      let keytipProps = createKeytipProps(keytipSequenceD, overflowSequence);
+      const keytipProps = createKeytipProps(keytipSequenceD, overflowSequence);
 
       // Add d node with an overflow sequence
       keytipTree.addNode(keytipProps);
@@ -295,11 +296,11 @@ describe('KeytipTree', () => {
       expect(keytipTree.root.children).toHaveLength(2);
 
       // Test nodes are in the node map
-      let keytipOverflowNode = keytipTree.nodeMap[keytipIdO];
+      const keytipOverflowNode = keytipTree.nodeMap[keytipIdO];
       expect(keytipOverflowNode).toBeDefined();
-      let keytipPersistedD = keytipTree.nodeMap[keytipPersistedIdD];
+      const keytipPersistedD = keytipTree.nodeMap[keytipPersistedIdD];
       expect(keytipPersistedD).toBeDefined();
-      let keytipOverflowD = keytipTree.nodeMap[keytipOverflowIdD];
+      const keytipOverflowD = keytipTree.nodeMap[keytipOverflowIdD];
       expect(keytipOverflowD).toBeDefined();
 
       // Test hierarchy
@@ -314,7 +315,7 @@ describe('KeytipTree', () => {
 
   describe('removeNode', () => {
     it('removes a child node of root and has no children', () => {
-      let keytipTree = keytipManager.keytipTree;
+      const keytipTree = keytipManager.keytipTree;
 
       // Node C
       const keytipIdC = ktpFullPrefix + 'c';
@@ -333,7 +334,7 @@ describe('KeytipTree', () => {
     });
 
     it('removes multiple nodes in order correctly', () => {
-      let keytipTree = keytipManager.keytipTree;
+      const keytipTree = keytipManager.keytipTree;
 
       // Node C
       const keytipIdC = ktpFullPrefix + 'c';
@@ -353,7 +354,7 @@ describe('KeytipTree', () => {
       expect(keytipTree.nodeMap[keytipIdB]).toBeUndefined();
 
       // Verify C has no children
-      let nodeC = keytipTree.nodeMap[keytipIdC];
+      const nodeC = keytipTree.nodeMap[keytipIdC];
       expect(nodeC.children).toHaveLength(0);
 
       // Remove C
@@ -367,7 +368,7 @@ describe('KeytipTree', () => {
     });
 
     it('removes children as well when a parent is removed', () => {
-      let keytipTree = keytipManager.keytipTree;
+      const keytipTree = keytipManager.keytipTree;
 
       // Node C
       const keytipIdC = ktpFullPrefix + 'c';
@@ -393,8 +394,8 @@ describe('KeytipTree', () => {
     });
 
     it('Removing persisted keytip also removes overflow link node', () => {
-      let rootId = 'a';
-      let keytipTree = new KeytipTree(rootId);
+      const rootId = 'a';
+      const keytipTree = new KeytipTree(rootId);
       /**
        *   Tree should end up looking like: Where O is overflow menu and d is inside
        *
@@ -411,7 +412,7 @@ describe('KeytipTree', () => {
       keytipTree.addNode({ keySequences: [overflowSequence], content: '' });
 
       const keytipSequenceD: IKeySequence[] = [{ keys: ['d'] }];
-      let keytipProps = createKeytipProps(keytipSequenceD, overflowSequence);
+      const keytipProps = createKeytipProps(keytipSequenceD, overflowSequence);
 
       // Add d node with an overflow sequence
       keytipTree.addNode(keytipProps);
@@ -425,7 +426,7 @@ describe('KeytipTree', () => {
 
   describe('getExactlyMatchedNodes', () => {
     it('get matched node tests ', () => {
-      let keytipTree = new KeytipTree('id1');
+      const keytipTree = new KeytipTree('id1');
 
       /**
        *   Tree should end up looking like:
@@ -462,12 +463,12 @@ describe('KeytipTree', () => {
       const keytipIdA = ktpFullPrefix + 'a';
       const keytipSequenceA: IKeySequence = { keys: ['a'] };
 
-      let nodeA = createTreeNode(keytipIdA, '', [keytipIdC, keytipIdE1, keytipIdE2], keytipSequenceA);
-      let nodeC = createTreeNode(keytipIdC, keytipIdA, [], keytipSequenceC);
-      let nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE1);
-      let nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE2);
-      let nodeD = createTreeNode(keytipIdD, keytipIdE1, [], keytipSequenceD);
-      let nodeF = createTreeNode(keytipIdF, keytipIdE1, [], keytipSequenceF);
+      const nodeA = createTreeNode(keytipIdA, '', [keytipIdC, keytipIdE1, keytipIdE2], keytipSequenceA);
+      const nodeC = createTreeNode(keytipIdC, keytipIdA, [], keytipSequenceC);
+      const nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE1);
+      const nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE2);
+      const nodeD = createTreeNode(keytipIdD, keytipIdE1, [], keytipSequenceD);
+      const nodeF = createTreeNode(keytipIdF, keytipIdE1, [], keytipSequenceF);
 
       keytipTree.nodeMap[keytipIdA] = nodeA;
       keytipTree.nodeMap[keytipIdC] = nodeC;
@@ -477,16 +478,16 @@ describe('KeytipTree', () => {
       keytipTree.nodeMap[keytipIdF] = nodeF;
 
       // node should be undefined because it is not a child of node A.
-      let matchedNode1 = keytipTree.getExactMatchedNode({ keys: ['n'] }, nodeA);
+      const matchedNode1 = keytipTree.getExactMatchedNode({ keys: ['n'] }, nodeA);
       expect(matchedNode1).toBeUndefined();
 
       // node should be equal to node c due to keysequnce.
-      let matchedNode2 = keytipTree.getExactMatchedNode({ keys: ['c'] }, nodeA);
+      const matchedNode2 = keytipTree.getExactMatchedNode({ keys: ['c'] }, nodeA);
       expect(matchedNode2).toEqual(nodeC);
     });
 
     it('should be undefined is matched node is disabled ', () => {
-      let keytipTree = new KeytipTree('id1');
+      const keytipTree = new KeytipTree('id1');
 
       /**
        *   Tree should end up looking like:
@@ -514,11 +515,11 @@ describe('KeytipTree', () => {
       const keytipIdA = ktpFullPrefix + 'a';
       const keytipSequenceA: IKeySequence = { keys: ['a'] };
 
-      let nodeA = createTreeNode(keytipIdA, '', [keytipIdC, keytipIdE1, keytipIdE2], keytipSequenceA);
-      let nodeC = createTreeNode(keytipIdC, keytipIdA, [], keytipSequenceC);
+      const nodeA = createTreeNode(keytipIdA, '', [keytipIdC, keytipIdE1, keytipIdE2], keytipSequenceA);
+      const nodeC = createTreeNode(keytipIdC, keytipIdA, [], keytipSequenceC);
       nodeC.disabled = true;
-      let nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [], keytipSequenceE1);
-      let nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [], keytipSequenceE2);
+      const nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [], keytipSequenceE1);
+      const nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [], keytipSequenceE2);
 
       keytipTree.nodeMap[keytipIdA] = nodeA;
       keytipTree.nodeMap[keytipIdC] = nodeC;
@@ -526,14 +527,14 @@ describe('KeytipTree', () => {
       keytipTree.nodeMap[keytipIdE2] = nodeE2;
 
       // node should be undefined because it is disabled.
-      let matchedNode1 = keytipTree.getExactMatchedNode({ keys: ['c'] }, nodeA);
+      const matchedNode1 = keytipTree.getExactMatchedNode({ keys: ['c'] }, nodeA);
       expect(matchedNode1).toBeUndefined();
     });
   });
 
   describe('getPartiallyMatchedNodes', () => {
     it('get partially matched node tests ', () => {
-      let keytipTree = new KeytipTree('id1');
+      const keytipTree = new KeytipTree('id1');
 
       /**
        *   Tree should end up looking like:
@@ -566,11 +567,11 @@ describe('KeytipTree', () => {
       const keytipIdA = ktpFullPrefix + 'a';
       const keytipSequenceA: IKeySequence = { keys: ['a'] };
 
-      let nodeA = createTreeNode(keytipIdA, '', [keytipIdE1, keytipIdE2], keytipSequenceA);
-      let nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE1);
-      let nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE2);
-      let nodeD = createTreeNode(keytipIdD, keytipIdE1, [], keytipSequenceD);
-      let nodeF = createTreeNode(keytipIdF, keytipIdE1, [], keytipSequenceF);
+      const nodeA = createTreeNode(keytipIdA, '', [keytipIdE1, keytipIdE2], keytipSequenceA);
+      const nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE1);
+      const nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE2);
+      const nodeD = createTreeNode(keytipIdD, keytipIdE1, [], keytipSequenceD);
+      const nodeF = createTreeNode(keytipIdF, keytipIdE1, [], keytipSequenceF);
 
       keytipTree.nodeMap[keytipIdA] = nodeA;
       keytipTree.nodeMap[keytipIdE1] = nodeE1;
@@ -579,20 +580,20 @@ describe('KeytipTree', () => {
       keytipTree.nodeMap[keytipIdF] = nodeF;
 
       // nodes array should be empty.
-      let matchedNodes1 = keytipTree.getPartiallyMatchedNodes({ keys: ['n'] }, nodeA);
+      const matchedNodes1 = keytipTree.getPartiallyMatchedNodes({ keys: ['n'] }, nodeA);
       expect(matchedNodes1.length).toEqual(0);
 
       // nodes array should be empty.
-      let matchedNodes2 = keytipTree.getPartiallyMatchedNodes({ keys: [] }, nodeA);
+      const matchedNodes2 = keytipTree.getPartiallyMatchedNodes({ keys: [] }, nodeA);
       expect(matchedNodes2.length).toEqual(0);
 
       // nodes array should be equal to 2.
-      let matchedNodes3 = keytipTree.getPartiallyMatchedNodes({ keys: ['e'] }, nodeA);
+      const matchedNodes3 = keytipTree.getPartiallyMatchedNodes({ keys: ['e'] }, nodeA);
       expect(matchedNodes3.length).toEqual(2);
     });
 
     it('get partially matched nodes that are not disabled ', () => {
-      let keytipTree = new KeytipTree('id1');
+      const keytipTree = new KeytipTree('id1');
 
       /**
        *   Tree should end up looking like:
@@ -617,9 +618,9 @@ describe('KeytipTree', () => {
       const keytipIdA = ktpFullPrefix + 'a';
       const keytipSequenceA: IKeySequence = { keys: ['a'] };
 
-      let nodeA = createTreeNode(keytipIdA, '', [keytipIdE1, keytipIdE2], keytipSequenceA);
-      let nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [], keytipSequenceE1);
-      let nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [], keytipSequenceE2);
+      const nodeA = createTreeNode(keytipIdA, '', [keytipIdE1, keytipIdE2], keytipSequenceA);
+      const nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [], keytipSequenceE1);
+      const nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [], keytipSequenceE2);
       nodeE2.disabled = true;
 
       keytipTree.nodeMap[keytipIdA] = nodeA;
@@ -627,7 +628,7 @@ describe('KeytipTree', () => {
       keytipTree.nodeMap[keytipIdE2] = nodeE2;
 
       // nodes array should equal 1, for node e2 is disabled.
-      let matchedNodes = keytipTree.getPartiallyMatchedNodes({ keys: ['e'] }, nodeA);
+      const matchedNodes = keytipTree.getPartiallyMatchedNodes({ keys: ['e'] }, nodeA);
       expect(matchedNodes.length).toEqual(1);
     });
   });
diff --git a/packages/experiments/src/utilities/keytip/KeytipTree.ts b/packages/experiments/src/utilities/keytip/KeytipTree.ts
index 064e96fded598f..61790888eb92b6 100644
--- a/packages/experiments/src/utilities/keytip/KeytipTree.ts
+++ b/packages/experiments/src/utilities/keytip/KeytipTree.ts
@@ -90,18 +90,18 @@ export class KeytipTree {
    * @param keytipProps - Keytip to add to the Tree
    */
   public addNode(keytipProps: IKeytipProps): void {
-    let fullSequence = [...keytipProps.keySequences];
-    let nodeID = convertSequencesToKeytipID(fullSequence);
+    const fullSequence = [...keytipProps.keySequences];
+    const nodeID = convertSequencesToKeytipID(fullSequence);
     // This keytip's sequence is the last one defined
-    let keytipSequence = fullSequence.pop();
+    const keytipSequence = fullSequence.pop();
     // Parent ID is the root if there aren't any more sequences
-    let parentID = fullSequence.length === 0 ? this.root.id : convertSequencesToKeytipID(fullSequence);
+    const parentID = fullSequence.length === 0 ? this.root.id : convertSequencesToKeytipID(fullSequence);
 
     let overflowNode = undefined;
     // Account for overflowSetSequence
     if (keytipProps.overflowSetSequence && keytipSequence) {
-      let overflowParentNode = this._getOrCreateOverflowNode(keytipProps.overflowSetSequence, parentID, fullSequence);
-      let overflowNodeID = convertSequencesToKeytipID([...fullSequence, keytipProps.overflowSetSequence, keytipSequence]);
+      const overflowParentNode = this._getOrCreateOverflowNode(keytipProps.overflowSetSequence, parentID, fullSequence);
+      const overflowNodeID = convertSequencesToKeytipID([...fullSequence, keytipProps.overflowSetSequence, keytipSequence]);
       overflowNode = this.nodeMap[overflowNodeID];
 
       // Create or update the persisted keytip
@@ -139,7 +139,7 @@ export class KeytipTree {
     }
 
     // Get parent node given its id.
-    let parent = this._getOrCreateParentNode(parentID);
+    const parent = this._getOrCreateParentNode(parentID);
 
     // Add node to parent's children if not already added
     if (parent.children.indexOf(nodeID) === -1) {
@@ -154,31 +154,31 @@ export class KeytipTree {
    * @param sequence - full IKeySequence of the node to remove
    */
   public removeNode(sequence: IKeySequence[]): void {
-    let fullSequence = [...sequence];
-    let nodeID = convertSequencesToKeytipID(fullSequence);
+    const fullSequence = [...sequence];
+    const nodeID = convertSequencesToKeytipID(fullSequence);
     // Take off the last sequence to calculate the parent ID
     fullSequence.pop();
     // Parent ID is the root if there aren't any more sequences
-    let parentID = fullSequence.length === 0 ? this.root.id : convertSequencesToKeytipID(fullSequence);
+    const parentID = fullSequence.length === 0 ? this.root.id : convertSequencesToKeytipID(fullSequence);
 
-    let parent = this.nodeMap[parentID];
+    const parent = this.nodeMap[parentID];
     if (parent) {
       // Remove node from its parent's children
       parent.children.splice(parent.children.indexOf(nodeID), 1);
     }
 
-    let node = this.nodeMap[nodeID];
+    const node = this.nodeMap[nodeID];
     if (node) {
       // Remove all the node's children from the nodeMap
-      let children = node.children;
-      for (let child of children) {
+      const children = node.children;
+      for (const child of children) {
         delete this.nodeMap[child];
       }
 
       // If node has an overflowLink, delete that node too.
-      let overflowLink = node.keytipLink;
+      const overflowLink = node.keytipLink;
       if (overflowLink) {
-        let parentOverflow = this.nodeMap[overflowLink.parent];
+        const parentOverflow = this.nodeMap[overflowLink.parent];
         parentOverflow.children.splice(parentOverflow.children.indexOf(overflowLink.id, 1));
         delete this.nodeMap[overflowLink.id];
       }
@@ -196,7 +196,7 @@ export class KeytipTree {
    * @returns {IKeytipTreeNode | undefined} The node that exactly matched the keySequence, or undefined if none matched
    */
   public getExactMatchedNode(keySequence: IKeySequence, currentKeytip: IKeytipTreeNode): IKeytipTreeNode | undefined {
-    let possibleNodes = this._getNodes(currentKeytip.children);
+    const possibleNodes = this._getNodes(currentKeytip.children);
 
     return find(possibleNodes, (node: IKeytipTreeNode) => {
       return keySequencesAreEqual(node.keytipSequence, keySequence) && !node.disabled;
@@ -211,7 +211,7 @@ export class KeytipTree {
    * @returns {IKeytipTreeNode[]} List of tree nodes that partially match the given sequence
    */
   public getPartiallyMatchedNodes(keySequence: IKeySequence, currentKeytip: IKeytipTreeNode): IKeytipTreeNode[] {
-    let possibleNodes = this._getNodes(currentKeytip.children);
+    const possibleNodes = this._getNodes(currentKeytip.children);
 
     return possibleNodes.filter((node: IKeytipTreeNode) => {
       return keySequenceStartsWith(node.keytipSequence, keySequence) && !node.disabled;
@@ -276,8 +276,8 @@ export class KeytipTree {
    * @returns {IKeytipTreeNode} - Node for this overflow item
    */
   private _getOrCreateOverflowNode(overflowSequence: IKeySequence, parentId: string, parentSequence: IKeySequence[]): IKeytipTreeNode {
-    let fullOverflowSequence = [...parentSequence, ...[overflowSequence]];
-    let overflowNodeId = convertSequencesToKeytipID(fullOverflowSequence);
+    const fullOverflowSequence = [...parentSequence, ...[overflowSequence]];
+    const overflowNodeId = convertSequencesToKeytipID(fullOverflowSequence);
 
     let node = this.nodeMap[overflowNodeId];
 
@@ -285,7 +285,7 @@ export class KeytipTree {
     if (!node) {
       node = this._createNode(overflowNodeId, overflowSequence, parentId, [], true);
       this.nodeMap[overflowNodeId] = node;
-      let parent = this._getOrCreateParentNode(parentId);
+      const parent = this._getOrCreateParentNode(parentId);
       parent.children.push(overflowNodeId);
     }
 
diff --git a/packages/experiments/src/utilities/keytip/KeytipUtils.ts b/packages/experiments/src/utilities/keytip/KeytipUtils.ts
index 141746cf7c62e4..df81186fb05920 100644
--- a/packages/experiments/src/utilities/keytip/KeytipUtils.ts
+++ b/packages/experiments/src/utilities/keytip/KeytipUtils.ts
@@ -27,7 +27,7 @@ export function addKeytipSequence(sequences: IKeySequence[], seq1: IKeySequence)
  */
 // tslint:disable-next-line:no-any
 export function registerKeytip(keytipProps: IKeytipProps): any {
-  let ktpMgr = KeytipManager.getInstance();
+  const ktpMgr = KeytipManager.getInstance();
   return ktpMgr.registerKeytip(keytipProps);
 }
 
@@ -37,7 +37,7 @@ export function registerKeytip(keytipProps: IKeytipProps): any {
  * @param keytipProps - Keytip to unregister
  */
 export function unregisterKeytip(keytipProps: IKeytipProps): void {
-  let ktpMgr = KeytipManager.getInstance();
+  const ktpMgr = KeytipManager.getInstance();
   ktpMgr.unregisterKeytip(keytipProps);
 }
 
diff --git a/packages/experiments/tslint.json b/packages/experiments/tslint.json
index 672d9eba8927e3..621ee6ba046052 100644
--- a/packages/experiments/tslint.json
+++ b/packages/experiments/tslint.json
@@ -2,7 +2,5 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {
-    "prefer-const": false
-  }
+  "rules": {}
 }
\ No newline at end of file
diff --git a/packages/file-type-icons/CHANGELOG.json b/packages/file-type-icons/CHANGELOG.json
index e1b8ecf4206083..57283ad4c2423c 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 1b3c25d8e0b5dc..20fd399cc6fa94 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 67be8678fc5379..084a18eef8d107 100644
--- a/packages/file-type-icons/package.json
+++ b/packages/file-type-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/file-type-icons",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Office UI Fabric file type icon set.",
   "main": "lib/index.js",
   "typings": "lib-es2015/index.d.ts",
@@ -27,7 +27,7 @@
     "react-dom": "^16.3.1"
   },
   "dependencies": {
-    "@uifabric/styling": ">=5.23.0 <6.0.0",
+    "@uifabric/styling": ">=5.27.0 <6.0.0",
     "tslib": "^1.7.1"
   },
   "peerDependencies": {
diff --git a/packages/icons/CHANGELOG.json b/packages/icons/CHANGELOG.json
index 59545bead55198..6c202a8fc75c02 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 641bd0a6687ec0..2dbe4fc4159b83 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 619936e5818bb3..31875390121cf9 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/icons",
-  "version": "5.7.0",
+  "version": "5.7.1",
   "description": "Office UI Fabric icon set.",
   "main": "lib/index.js",
   "typings": "lib-es2015/index.d.ts",
@@ -23,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.27.0 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/packages/jest-serializer-merge-styles/CHANGELOG.json b/packages/jest-serializer-merge-styles/CHANGELOG.json
index 98bc13f1b76e4d..4d11407038f1c7 100644
--- a/packages/jest-serializer-merge-styles/CHANGELOG.json
+++ b/packages/jest-serializer-merge-styles/CHANGELOG.json
@@ -1,6 +1,25 @@
 {
   "name": "@uifabric/jest-serializer-merge-styles",
   "entries": [
+    {
+      "version": "5.2.0",
+      "tag": "@uifabric/jest-serializer-merge-styles_v5.2.0",
+      "date": "Mon, 23 Apr 2018 10:24:54 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "bf655ceeaf161fd5ee3cc4dc5a4e55a82dea03e5",
+            "comment": "Updating how keyframe classes are serialized in results."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.2 <6.0.0` to `>=5.16.0 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.1.0",
       "tag": "@uifabric/jest-serializer-merge-styles_v5.1.0",
diff --git a/packages/jest-serializer-merge-styles/CHANGELOG.md b/packages/jest-serializer-merge-styles/CHANGELOG.md
index 908118d0926f41..4d363744ebc919 100644
--- a/packages/jest-serializer-merge-styles/CHANGELOG.md
+++ b/packages/jest-serializer-merge-styles/CHANGELOG.md
@@ -1,6 +1,13 @@
 # Change Log - @uifabric/jest-serializer-merge-styles
 
-This log was last generated on Sat, 16 Dec 2017 05:07:22 GMT and should not be manually modified.
+This log was last generated on Mon, 23 Apr 2018 10:24:54 GMT and should not be manually modified.
+
+## 5.2.0
+Mon, 23 Apr 2018 10:24:54 GMT
+
+### Minor changes
+
+- Updating how keyframe classes are serialized in results.
 
 ## 5.1.0
 Sat, 16 Dec 2017 05:07:22 GMT
diff --git a/packages/jest-serializer-merge-styles/package.json b/packages/jest-serializer-merge-styles/package.json
index 3b974a9b93175c..bc8a5dee174d64 100644
--- a/packages/jest-serializer-merge-styles/package.json
+++ b/packages/jest-serializer-merge-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/jest-serializer-merge-styles",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Jest serializer for merge-styles.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -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.16.1 <6.0.0"
   }
 }
\ No newline at end of file
diff --git a/packages/jest-serializer-merge-styles/src/index.test.tsx b/packages/jest-serializer-merge-styles/src/index.test.tsx
index 784fbbaa6207bc..1b2609d150ea98 100644
--- a/packages/jest-serializer-merge-styles/src/index.test.tsx
+++ b/packages/jest-serializer-merge-styles/src/index.test.tsx
@@ -1,5 +1,7 @@
 import { print, test } from './index';
-import { Stylesheet, InjectionMode, mergeStyles } from '@uifabric/merge-styles';
+import { Stylesheet, InjectionMode, mergeStyles, keyframes } from '@uifabric/merge-styles';
+
+const indent = (val: string): string => '    ' + val;
 
 const _stylesheet: Stylesheet = Stylesheet.getInstance();
 _stylesheet.setConfig({ injectionMode: InjectionMode.none });
@@ -24,7 +26,6 @@ describe('print', () => {
 
   it('can format, sort, and indent the class names', () => {
 
-    const indent = (val: string): string => '    ' + val;
     const classNames = mergeStyles(
       'ms-GlobalClassName',
       {
@@ -57,4 +58,29 @@ describe('print', () => {
     ].join('\n'));
   });
 
+  it('can expand animation class names', () => {
+    const fadeInClassName = keyframes({
+      from: { opacity: 0 },
+      to: { opacity: 1 }
+    });
+
+    const className = mergeStyles({
+      animationName: fadeInClassName
+    });
+
+    expect(
+      print(
+        className,
+        () => '',
+        indent
+      )
+    ).toEqual([
+      '',
+      '',
+      indent('{'),
+      indent('  animation-name: keyframes from{opacity:0;}to{opacity:1;};'),
+      indent('}'),
+    ].join('\n'));
+  });
+
 });
\ No newline at end of file
diff --git a/packages/jest-serializer-merge-styles/src/index.ts b/packages/jest-serializer-merge-styles/src/index.ts
index 44c244fca9ab42..916b7347faeb0e 100644
--- a/packages/jest-serializer-merge-styles/src/index.ts
+++ b/packages/jest-serializer-merge-styles/src/index.ts
@@ -40,6 +40,7 @@ export function test(val: string): boolean {
 
 function _serializeRules(rules: string[], indent: (val: string) => string): string {
   const ruleStrings: string[] = [];
+  const stylesheet = Stylesheet.getInstance();
 
   for (let i = 0; i < rules.length; i += 2) {
     const selector = rules[i];
@@ -50,7 +51,21 @@ function _serializeRules(rules: string[], indent: (val: string) => string): stri
 
       insertedRules.split(';').sort().forEach((rule: string) => {
         if (rule) {
-          ruleStrings.push(indent('  ' + rule.replace(':', ': ') + ';'));
+          const [name, value] = rule.split(':');
+          const valueParts = value.split(' ');
+          let result: string[] = [];
+
+          for (const part of valueParts) {
+            const ruleSet = stylesheet.insertedRulesFromClassName(part);
+
+            if (ruleSet) {
+              result = result.concat(ruleSet);
+            } else {
+              result.push(part);
+            }
+          }
+
+          ruleStrings.push(indent(`  ${name}: ${result.join(' ')};`));
         }
       });
 
diff --git a/packages/merge-styles/CHANGELOG.json b/packages/merge-styles/CHANGELOG.json
index f2ec5f548aaa56..54fa23fc0c9be4 100644
--- a/packages/merge-styles/CHANGELOG.json
+++ b/packages/merge-styles/CHANGELOG.json
@@ -1,6 +1,69 @@
 {
   "name": "@uifabric/merge-styles",
   "entries": [
+    {
+      "version": "5.16.1",
+      "tag": "@uifabric/merge-styles_v5.16.1",
+      "date": "Wed, 25 Apr 2018 05:32:09 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "1d305b55114bffaece2841500c8476ba3996d2b2",
+            "comment": "merge-styles: `style` elements which are created on the fly now \"bunch\" together, avoiding unpredictability in specificity."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.16.0",
+      "tag": "@uifabric/merge-styles_v5.16.0",
+      "date": "Mon, 23 Apr 2018 10:24:54 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "bf655ceeaf161fd5ee3cc4dc5a4e55a82dea03e5",
+            "comment": "Updating how keyframe classes are cached to aid with jest snapshot testing."
+          }
+        ],
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "2bbc7950bd9f10ea1e792dcb1155c625aa8e8f4f",
+            "comment": "Updating documentation."
+          }
+        ]
+      }
+    },
+    {
+      "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 4a4c5761757cf9..a457043ec81c30 100644
--- a/packages/merge-styles/CHANGELOG.md
+++ b/packages/merge-styles/CHANGELOG.md
@@ -1,6 +1,38 @@
 # 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 Wed, 25 Apr 2018 05:32:09 GMT and should not be manually modified.
+
+## 5.16.1
+Wed, 25 Apr 2018 05:32:09 GMT
+
+### Patches
+
+- merge-styles: `style` elements which are created on the fly now "bunch" together, avoiding unpredictability in specificity.
+
+## 5.16.0
+Mon, 23 Apr 2018 10:24:54 GMT
+
+### Minor changes
+
+- Updating how keyframe classes are cached to aid with jest snapshot testing.
+
+### Patches
+
+- Updating documentation.
+
+## 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/README.md b/packages/merge-styles/README.md
index e76ef60d0f5c8c..fc32e85be9982f 100644
--- a/packages/merge-styles/README.md
+++ b/packages/merge-styles/README.md
@@ -177,7 +177,7 @@ In some cases, you may need to use parent or child selectors. To do so, you can
 {
   selectors: {
     // selector relative to parent
-    '.ms-Fabric.is-focusVisible &': {
+    '.ms-Fabric--isFocusVisible &': {
       background: 'red'
     }
     // selector for child
@@ -191,7 +191,7 @@ In some cases, you may need to use parent or child selectors. To do so, you can
 This would register the rules:
 
 ```css
-.ms-Fabric.is-focusVisible .css-0 { background: red; }
+.ms-Fabric--isFocusVisible .css-0 { background: red; }
 .css-0 .child { background: green; }
 ```
 
diff --git a/packages/merge-styles/package.json b/packages/merge-styles/package.json
index 463c24c13f34ed..7002a13e6fb453 100644
--- a/packages/merge-styles/package.json
+++ b/packages/merge-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/merge-styles",
-  "version": "5.15.0",
+  "version": "5.16.1",
   "description": "Office UI Fabric style loading utilities.",
   "main": "lib/index.js",
   "typings": "lib-es2015/index.d.ts",
diff --git a/packages/merge-styles/src/IRawStyleBase.ts b/packages/merge-styles/src/IRawStyleBase.ts
index 67952762bdd8b4..b2f7b361051b4b 100644
--- a/packages/merge-styles/src/IRawStyleBase.ts
+++ b/packages/merge-styles/src/IRawStyleBase.ts
@@ -213,6 +213,14 @@ export interface IRawStyleBase extends IRawFontStyle {
    */
   alignmentBaseline?: ICSSRule | string;
 
+  /**
+   * The animation CSS property is a shorthand property for the various animation properties:
+   * `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`,
+   * `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and
+   * `animation-play-state`.
+   */
+  animation?: ICSSRule | string;
+
   /**
    * Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied.
    */
diff --git a/packages/merge-styles/src/Stylesheet.ts b/packages/merge-styles/src/Stylesheet.ts
index 12de4f0d2f5b2c..f86b551edd5c90 100644
--- a/packages/merge-styles/src/Stylesheet.ts
+++ b/packages/merge-styles/src/Stylesheet.ts
@@ -50,6 +50,7 @@ let _stylesheet: Stylesheet;
  * @public
  */
 export class Stylesheet {
+  private _lastStyleElement?: HTMLStyleElement;
   private _styleElement?: HTMLStyleElement;
   private _rules: string[] = [];
   private _config: IStyleSheetConfig;
@@ -158,28 +159,29 @@ export class Stylesheet {
   public insertRule(
     rule: string
   ): void {
-    const element = this._getElement();
-    const injectionMode = element ? this._config.injectionMode : InjectionMode.none;
-
-    switch (injectionMode) {
-      case InjectionMode.insertNode:
-        const { sheet } = element!;
-
-        try {
-          // tslint:disable-next-line:no-any
-          (sheet as any).insertRule(rule, (sheet as any).cssRules.length);
-        } catch (e) {
-          /* no-op on errors */
-        }
-        break;
-
-      case InjectionMode.appendChild:
-        _createStyleElement(rule);
-        break;
-
-      default:
-        this._rules.push(rule);
-        break;
+    const { injectionMode } = this._config;
+    const element = injectionMode !== InjectionMode.none ? this._getStyleElement() : undefined;
+
+    if (element) {
+      switch (this._config.injectionMode) {
+        case InjectionMode.insertNode:
+          const { sheet } = element!;
+
+          try {
+            (sheet as CSSStyleSheet).insertRule(rule, (sheet as CSSStyleSheet).cssRules.length);
+          } catch (e) {
+            // The browser will throw exceptions on unsupported rules (such as a moz prefix in webkit.)
+            // We need to swallow the exceptions for this scenario, otherwise we'd need to filter
+            // which could be slower and bulkier.
+          }
+          break;
+
+        case InjectionMode.appendChild:
+          element.appendChild(document.createTextNode(rule));
+          break;
+      }
+    } else {
+      this._rules.push(rule);
     }
 
     if (this._config.onInsertRule) {
@@ -212,23 +214,32 @@ export class Stylesheet {
     this._keyToClassName = {};
   }
 
-  private _getElement(): HTMLStyleElement | undefined {
+  private _getStyleElement(): HTMLStyleElement | undefined {
     if (!this._styleElement && typeof document !== 'undefined') {
-      this._styleElement = _createStyleElement();
+      this._styleElement = this._createStyleElement();
+
+      // Reset the style element on the next frame.
+      window.requestAnimationFrame(() => {
+        this._styleElement = undefined;
+      });
     }
     return this._styleElement;
   }
-}
 
-function _createStyleElement(content?: string): HTMLStyleElement {
-  const styleElement = document.createElement('style');
+  private _createStyleElement(): HTMLStyleElement {
+    const styleElement = document.createElement('style');
+
+    styleElement.setAttribute('data-merge-styles', 'true');
+    styleElement.type = 'text/css';
+
+    if (this._lastStyleElement && this._lastStyleElement.nextElementSibling) {
+      document.head.insertBefore(styleElement, this._lastStyleElement.nextElementSibling);
+    } else {
+      document.head.appendChild(styleElement);
+    }
+    this._lastStyleElement = styleElement;
 
-  styleElement.setAttribute('data-merge-styles', 'true');
-  styleElement.type = 'text/css';
-  if (content) {
-    styleElement.appendChild(document.createTextNode(content));
+    return styleElement;
   }
-  document.head.appendChild(styleElement);
 
-  return styleElement;
 }
\ No newline at end of file
diff --git a/packages/merge-styles/src/keyframes.ts b/packages/merge-styles/src/keyframes.ts
index fec40daa0e921e..765eb80a90349d 100644
--- a/packages/merge-styles/src/keyframes.ts
+++ b/packages/merge-styles/src/keyframes.ts
@@ -21,7 +21,12 @@ export function keyframes(timeline: { [key: string]: {} }): string {
 
   stylesheet.insertRule(`@keyframes ${name}{${rules}}`);
 
-  // If needed later, we would add vendor prefixes here.
+  stylesheet.cacheClassName(
+    name,
+    rules,
+    [],
+    ['keyframes', rules]
+  );
 
   return name;
 }
diff --git a/packages/office-ui-fabric-react-tslint/tslint.json b/packages/office-ui-fabric-react-tslint/tslint.json
index 0300b096b8ab93..555ffd795a4e02 100644
--- a/packages/office-ui-fabric-react-tslint/tslint.json
+++ b/packages/office-ui-fabric-react-tslint/tslint.json
@@ -145,7 +145,7 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-semicolons": true,
     "no-unused-expression": false,
-    "no-unused-variable": true,
+    "no-unused-variable": false, // defer to typescript's no unused local instead
     "no-use-before-declare": true,
     "no-with-statement": true,
     "no-var-keyword": true,
diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json
index 90298946491365..1de7410964fd23 100644
--- a/packages/office-ui-fabric-react/CHANGELOG.json
+++ b/packages/office-ui-fabric-react/CHANGELOG.json
@@ -1,6 +1,531 @@
 {
   "name": "office-ui-fabric-react",
   "entries": [
+    {
+      "version": "5.89.0",
+      "tag": "office-ui-fabric-react_v5.89.0",
+      "date": "Wed, 25 Apr 2018 05:32:09 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "6bfddc1c44aa7afcdf053467985490027eb5edcd",
+            "comment": "Fabric: the isFocusVisible class is no added to the Fabric component again, to preserve backwards compatibility. Also fixing index file to export the types."
+          },
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "802a2c0847830acfbf47e2dd058da54d9dfb15ae",
+            "comment": "Fix theme slots for DetailsList header colors"
+          },
+          {
+            "author": "Brian Garland <v-brgarl@microsoft.com>",
+            "commit": "127d4d9deeca7e38a4ae6df6bd4d92ea5a978432",
+            "comment": "Enabled native props (aria-* and data-*) on OverflowSet even when the doNotContainWithinFocusZone prop is false"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.16.0 <6.0.0` to `>=5.16.1 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.26.0 <6.0.0` to `>=5.27.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.27.0 <6.0.0` to `>=5.28.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.88.0",
+      "tag": "office-ui-fabric-react_v5.88.0",
+      "date": "Tue, 24 Apr 2018 10:12:58 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "John Lorenz <lorejoh12@gmail.com>",
+            "commit": "829a5263d7ed4e4decb759cfad9cdf32aad5f86e",
+            "comment": "fixing selection bugs in Calendar component, updating styling for new designs"
+          },
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "707e5387e0a469fa6f09b188c27d4c8e73636625",
+            "comment": "Begin converting Pivot to mergeStyles"
+          }
+        ],
+        "patch": [
+          {
+            "author": "Spencer Elliott <me@elliottsj.com>",
+            "commit": "8d297e2a0f7c6cd9bd44a492f313381a0aee40c0",
+            "comment": "Use `data-is-scrollable` attribute on correct ScrollablePane div"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.87.0",
+      "tag": "office-ui-fabric-react_v5.87.0",
+      "date": "Mon, 23 Apr 2018 10:24:54 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "57d14eb7535d07348628c034bff03646c0851bd2",
+            "comment": "ContextualMenu: in item root styling, replaced `font: inherit` with the appropriate font style from the theme."
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "bf655ceeaf161fd5ee3cc4dc5a4e55a82dea03e5",
+            "comment": "Updating a snapshot test."
+          },
+          {
+            "author": "John Lorenz <lorejoh12@gmail.com>",
+            "commit": "af62e60a594673e79f50acd1db0c27c5b7be32a0",
+            "comment": "Adding check to focusTrapZone to only restore focus on close if focus was still inside the focusTrapZone"
+          },
+          {
+            "author": "Kevin Coughlin <kevintcoughlin@gmail.com>",
+            "commit": "6f66dfa52f97226641778eebc2df91ff98c92828",
+            "comment": "Deprecates INavLink.iconClassName in favor of IIconProps.className."
+          }
+        ],
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "2bbc7950bd9f10ea1e792dcb1155c625aa8e8f4f",
+            "comment": "Updating the focus styling to use the generalized `ms-Fabric--isFocusVisible` classname. This is one step closer towards removing the `Fabric` component wrapper requirement."
+          },
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "0a91cdca0f3dddc89d17b581c95cb879a7901a01",
+            "comment": "Plumb ARIA label for picker suggestion remove button"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.2 <6.0.0` to `>=5.16.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.25.0 <6.0.0` to `>=5.26.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.26.0 <6.0.0` to `>=5.27.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/jest-serializer-merge-styles\" from `>=5.1.0 <6.0.0` to `>=5.2.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.10.2 <6.0.0` to `>=5.11.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.86.0",
+      "tag": "office-ui-fabric-react_v5.86.0",
+      "date": "Fri, 20 Apr 2018 23:06:06 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "5ee5b0000642c73ee99110a888360f4b6f99fa56",
+            "comment": "Callout.Basic.Example: Fix example so callout positions properly"
+          },
+          {
+            "author": "Ivan <ivan.dijan@gmail.com>",
+            "commit": "1c60faec279be119ddd0d952958570c81edb8ca5",
+            "comment": "Propagate onRenderInitials correctly from Persona to PersonaCoin"
+          }
+        ],
+        "minor": [
+          {
+            "author": "Brian Garland <v-brgarl@microsoft.com>",
+            "commit": "bcfcbd31d10874a8c560273be82d4a7087d37aa4",
+            "comment": "Added support for zero star situations in the Rating component.  Before it would write out a star for  the number zero showing 6 stars when there should be 5."
+          },
+          {
+            "author": "Yimin Wu <yimwu@microsoft.com>",
+            "commit": "d8c8e6fc0be8766ce6625aefc4a512e0abfe4e7f",
+            "comment": "Add onRenderIcon prop to IContextualMenuItem to allow override icon render for contextualMenuItem."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.25.0 <6.0.0` to `>=5.26.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "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 4e2ec9e59ac13e..d975618fa5140a 100644
--- a/packages/office-ui-fabric-react/CHANGELOG.md
+++ b/packages/office-ui-fabric-react/CHANGELOG.md
@@ -1,6 +1,163 @@
 # 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 Wed, 25 Apr 2018 05:32:09 GMT and should not be manually modified.
+
+## 5.89.0
+Wed, 25 Apr 2018 05:32:09 GMT
+
+### Minor changes
+
+- Fabric: the isFocusVisible class is no added to the Fabric component again, to preserve backwards compatibility. Also fixing index file to export the types.
+- Fix theme slots for DetailsList header colors
+- Enabled native props (aria-* and data-*) on OverflowSet even when the doNotContainWithinFocusZone prop is false
+
+## 5.88.0
+Tue, 24 Apr 2018 10:12:58 GMT
+
+### Minor changes
+
+- fixing selection bugs in Calendar component, updating styling for new designs
+- Begin converting Pivot to mergeStyles
+
+### Patches
+
+- Use `data-is-scrollable` attribute on correct ScrollablePane div
+
+## 5.87.0
+Mon, 23 Apr 2018 10:24:54 GMT
+
+### Minor changes
+
+- Updating the focus styling to use the generalized `ms-Fabric--isFocusVisible` classname. This is one step closer towards removing the `Fabric` component wrapper requirement.
+- Plumb ARIA label for picker suggestion remove button
+
+### Patches
+
+- ContextualMenu: in item root styling, replaced `font: inherit` with the appropriate font style from the theme.
+- Updating a snapshot test.
+- Adding check to focusTrapZone to only restore focus on close if focus was still inside the focusTrapZone
+- Deprecates INavLink.iconClassName in favor of IIconProps.className.
+
+## 5.86.0
+Fri, 20 Apr 2018 23:06:06 GMT
+
+### Minor changes
+
+- Added support for zero star situations in the Rating component.  Before it would write out a star for  the number zero showing 6 stars when there should be 5.
+- Add onRenderIcon prop to IContextualMenuItem to allow override icon render for contextualMenuItem.
+
+### Patches
+
+- Callout.Basic.Example: Fix example so callout positions properly
+- Propagate onRenderInitials correctly from Persona to PersonaCoin
+
+## 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/package.json b/packages/office-ui-fabric-react/package.json
index 7a4a51f94f5700..665c7ec5ebc49c 100644
--- a/packages/office-ui-fabric-react/package.json
+++ b/packages/office-ui-fabric-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "5.81.1",
+  "version": "5.89.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib-es2015/index.d.ts",
@@ -29,8 +29,8 @@
     "@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/jest-serializer-merge-styles": ">=5.2.0 <6.0.0",
+    "@uifabric/example-app-base": ">=5.11.0 <6.0.0",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "es6-promise": "^4.1.0",
@@ -48,10 +48,10 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
-    "@uifabric/icons": ">=5.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.16.1 <6.0.0",
+    "@uifabric/styling": ">=5.27.0 <6.0.0",
+    "@uifabric/utilities": ">=5.28.0 <6.0.0",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"
   },
diff --git a/packages/office-ui-fabric-react/src/common/_focusBorder.scss b/packages/office-ui-fabric-react/src/common/_focusBorder.scss
index 6fbe979ec0302f..3d6e2a5baa273d 100644
--- a/packages/office-ui-fabric-react/src/common/_focusBorder.scss
+++ b/packages/office-ui-fabric-react/src/common/_focusBorder.scss
@@ -14,7 +14,7 @@
 
 @mixin focus($onFocus: true) {
   @if $onFocus {
-    :global(.ms-Fabric.is-focusVisible) &:focus {
+    :global(.ms-Fabric--isFocusVisible) &:focus {
       @content;
     }
   }
@@ -57,7 +57,7 @@
 
 // When focus is set using the keyboard, apply an outline.
 @mixin focus-outline {
-  :global(.ms-Fabric.is-focusVisible) &:focus {
+  :global(.ms-Fabric--isFocusVisible) &:focus {
     outline: 1px solid $focusBorderColor;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
index eddd4e3b345d7e..8adc8814c34cb5 100644
--- a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
+++ b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
@@ -50,8 +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]";
+$listHeaderBackgroundHoveredColor: "[theme:listHeaderBackgroundHovered, default: #f4f4f4]";
+$listHeaderBackgroundPressedColor: "[theme:listHeaderBackgroundPressed, default: #eaeaea]";
 $listItemBackgroundHoveredColor: "[theme:listItemBackgroundHovered, default: #f8f8f8]";
 $listItemBackgroundCheckedColor: "[theme:listItemBackgroundChecked, default: #eaeaea]";
 $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 c736e61c938cc6..3dce4b398b3bcb 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 4bc5f7842f2c65..71344018de9b67 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 4833241cd5c222..e6fe80298c0e98 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 462414f66dd3dc..56359571948d50 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 978f0f9f80461e..7f11a084132768 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 cb9ac03a1c5197..f869598ee9e8c0 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 ad31ba2318ad1f..cb3f0972a38910 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx
@@ -17,12 +17,12 @@ const ActivityItemPersonaExampleCode = require('!raw-loader!office-ui-fabric-rea
 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/blob/master/packages/office-ui-fabric-react/src/components/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 }>
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 080d69cf5cce9d..27e672b04839ed 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: keyframes from{opacity:0;}to{opacity:1;};
+        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: keyframes 0%{border-color:#0078d4;border-width:0px;width:4px;height:4px;}14.2%{opacity:1;border-width:4px;}35.7%{opacity:1;}71.4%{border-width:0;width:28px;height:28px;opacity:0;border-color:#71afe5;}100%{};
+            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: keyframes from{transform:translateX(-10px);}to{transform:translateX(0);};
+          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 838d6fd39bec76..e78e4eac2b92c8 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 a2710443ce2ba0..f7aa6cf9eeb5df 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,7 +72,7 @@ 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 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 204be27e2a29fb..7321d2ab234634 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 3ec42dccafdecb..c1ec0cd713e836 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 61a9fc90f66ada..d79dbe446c12f8 100644
--- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
+++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
@@ -27,15 +27,15 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
 
   constructor(props: IAutofillProps) {
     super(props);
-    this._value = '';
+    this._value = props.defaultVisibleValue || '';
     this.state = {
       displayValue: props.defaultVisibleValue || ''
     };
   }
 
   public get cursorLocation(): number | null {
-    if (this._inputElement.value) {
-      const inputElement = this._inputElement.value;
+    if (this._inputElement.current) {
+      const inputElement = this._inputElement.current;
       if (inputElement.selectionDirection !== SELECTION_FORWARD) {
         return inputElement.selectionEnd;
       } else {
@@ -55,18 +55,18 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
   }
 
   public get selectionStart(): number | null {
-    return this._inputElement.value ? this._inputElement.value.selectionStart : -1;
+    return this._inputElement.current ? this._inputElement.current.selectionStart : -1;
   }
 
   public get selectionEnd(): number | null {
-    return this._inputElement.value ? this._inputElement.value.selectionEnd : -1;
+    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 2d971d8d4f9433..aa48c349e09f44 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
@@ -67,13 +67,16 @@ export interface IAutofillProps extends
   enableAutofillOnKeyPress?: KeyCodes[];
 
   /**
-   * the default value to be visible
+   * The default value to be visible. This is different from placeholder
+   * because it actually sets the current value of the picker
+   * Note: This will only be set upon component creation
+   * and will not update with subsequent prop updates.
    */
   defaultVisibleValue?: string;
 
   /**
    * Handler for checking and updating the value if needed
-   *  in componentWillReceiveProps
+   * in componentWillReceiveProps
    *
    * @param {IAutofillProps} defaultVisibleValue - the defaultVisibleValue that got passed
    *  in to the auto fill's componentWillReceiveProps
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 76befb4c563973..04b58016825d56 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
@@ -29,30 +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);
   }
 
   /**
    * Sets focus to the first breadcrumb link.
    */
   public focus(): void {
-    if (this.focusZone.value) {
-      this.focusZone.value.focus();
+    if (this.focusZone.current) {
+      this.focusZone.current.focus();
     }
   }
 
-  public render() {
-    const { onReduceData = this._onReduceData, maxDisplayedItems, items } = this.props;
+  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 (
@@ -64,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];
 
@@ -82,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;
 
@@ -99,6 +112,40 @@ 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) }
@@ -107,36 +154,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
       >
         <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>
@@ -179,4 +197,17 @@ 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 { maxDisplayedItems, overflowIndex, items } = props;
+    if (overflowIndex! < 0 ||
+      maxDisplayedItems! > 1 && overflowIndex! > maxDisplayedItems! - 1 ||
+      items.length > 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 0e529c524801cf..95047b9a51bfad 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';
@@ -8,7 +6,17 @@ import * as renderer from 'react-test-renderer';
 import { Breadcrumb, IBreadcrumbItem } from './index';
 
 describe('Breadcrumb', () => {
-  it('renders breadcumb correctly', () => {
+  it('renders empty breadcrumb', () => {
+    const component = renderer.create(
+      <Breadcrumb items={ [] } />
+    );
+
+    const tree = component.toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  describe('basic rendering', () => {
     const items: IBreadcrumbItem[] = [
       { text: 'TestText1', key: 'TestKey1' },
       { text: 'TestText2', key: 'TestKey2' },
@@ -18,36 +26,56 @@ describe('Breadcrumb', () => {
 
     const divider = () => <span>*</span>;
 
-    let component = renderer.create(
-      <Breadcrumb
-        items={ items }
-      />
-    );
-
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-
-    // With overflow
-    component = renderer.create(
-      <Breadcrumb
-        items={ items }
-        maxDisplayedItems={ 2 }
-      />
-    );
-
-    tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-
-    // With custom divider
-    component = renderer.create(
-      <Breadcrumb
-        items={ items }
-        dividerAs={ divider }
-      />
-    );
-
-    tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+    it('renders breadcumb correctly 1', () => {
+      const component = renderer.create(
+        <Breadcrumb
+          items={ items }
+        />
+      );
+
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders breadcumb correctly 2', () => {
+      // With overflow
+      const component = renderer.create(
+        <Breadcrumb
+          items={ items }
+          maxDisplayedItems={ 2 }
+        />
+      );
+
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders breadcumb correctly 3', () => {
+      // With custom divider
+      const component = renderer.create(
+        <Breadcrumb
+          items={ items }
+          dividerAs={ divider }
+        />
+      );
+
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders breadcumb correctly 4', () => {
+      // With overflow and overflowIndex
+      const component = renderer.create(
+        <Breadcrumb
+          items={ items }
+          maxDisplayedItems={ 2 }
+          overflowIndex={ 1 }
+        />
+      );
+
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 
   it('can call the callback when an item is clicked', () => {
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 05c0cb7225cd14..ec6a738b6c875a 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,6 +1,4 @@
-/* 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';
@@ -41,6 +39,7 @@ export interface IBreadcrumbProps extends React.Props<Breadcrumb> {
   maxDisplayedItems?: number;
 
   /** Method to call when trying to render an item. */
+
   onRenderItem?: IRenderFunction<IBreadcrumbItem>;
 
   /**
@@ -58,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 ae672f5f559e44..7243b2bdcc3dc0 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 52d3ff04150f14..46ad2f7c5ce807 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
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Breadcrumb renders breadcumb correctly 1`] = `
+exports[`Breadcrumb basic rendering renders breadcumb correctly 1 1`] = `
 <div
   className=
       ms-ResizeGroup
@@ -26,7 +26,7 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
         aria-describedby={undefined}
         aria-labelledby={undefined}
         className="ms-FocusZone"
-        data-focuszone-id="FocusZone0"
+        data-focuszone-id="FocusZone1"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -144,7 +144,7 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
 </div>
 `;
 
-exports[`Breadcrumb renders breadcumb correctly 2`] = `
+exports[`Breadcrumb basic rendering renders breadcumb correctly 2 1`] = `
 <div
   className=
       ms-ResizeGroup
@@ -170,7 +170,7 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
         aria-describedby={undefined}
         aria-labelledby={undefined}
         className="ms-FocusZone"
-        data-focuszone-id="FocusZone5"
+        data-focuszone-id="FocusZone6"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -222,7 +222,7 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-                  .ms-Fabric.is-focusVisible &:focus:after {
+                  .ms-Fabric--isFocusVisible &:focus:after {
                     border: 1px solid #ffffff;
                     bottom: 0px;
                     content: "";
@@ -233,7 +233,7 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
                     top: 0px;
                     z-index: 1;
                   }
-                  @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                  @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                     border: none;
                     bottom: -2px;
                     left: -2px;
@@ -355,7 +355,7 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
 </div>
 `;
 
-exports[`Breadcrumb renders breadcumb correctly 3`] = `
+exports[`Breadcrumb basic rendering renders breadcumb correctly 3 1`] = `
 <div
   className=
       ms-ResizeGroup
@@ -381,7 +381,7 @@ exports[`Breadcrumb renders breadcumb correctly 3`] = `
         aria-describedby={undefined}
         aria-labelledby={undefined}
         className="ms-FocusZone"
-        data-focuszone-id="FocusZone11"
+        data-focuszone-id="FocusZone12"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -477,3 +477,255 @@ exports[`Breadcrumb renders breadcumb correctly 3`] = `
   </div>
 </div>
 `;
+
+exports[`Breadcrumb basic rendering renders breadcumb correctly 4 1`] = `
+<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="FocusZone17"
+        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--isFocusVisible &: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--isFocusVisible &: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>
+`;
+
+exports[`Breadcrumb renders empty breadcrumb 1`] = `
+<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="FocusZone0"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="presentation"
+      >
+        <ol
+          className="ms-Breadcrumb-list"
+        />
+      </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 00000000000000..41d6b2c92cb4ad
--- /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 00000000000000..475b0636fbcd7b
--- /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 00000000000000..78bbf512689e34
--- /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 25cb0874589e02..5ee7499cbed3b4 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 fc283ec4f333fb..fe371bfcee2c40 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 c99913121c9777..da778847a2dd14 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 06c66aee2304b6..5c350017e24df3 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -39,9 +39,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     return !!this.state.menuProps;
   }
 
-  public static defaultProps = {
+  public static defaultProps: Partial<IBaseButtonProps> = {
     baseClassName: 'ms-Button',
-    classNames: {},
     styles: {},
     split: false,
   };
@@ -208,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();
     }
   }
 
@@ -401,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 }
       />
@@ -428,10 +427,10 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   }
 
   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;
     if (this.props.persistMenu) {
       currentMenuProps && currentMenuProps.hidden ? this._openMenu() : this._dismissMenu();
@@ -446,7 +445,6 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       disabled,
       checked,
       getSplitButtonClassNames,
-      onClick,
       primaryDisabled
     } = this.props;
 
@@ -551,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();
       }
@@ -570,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.tsx b/packages/office-ui-fabric-react/src/components/Button/Button.tsx
index 06772743f94dad..17a4c5764e144d 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/ButtonPage.tsx b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
index 37e2643a4a00ca..894e13ef4646c8 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 c5b55c2678e0d3..d2a94188f742ca 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 96cd9e73660a7e..96aaf94ed664da 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 c11510b10f3c9a..08551ced3a3fbd 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 775ecceba5cc6d..6612ed87bfa050 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 c59d000ab98a12..3c5e0345f04230 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 c633f9c4a70317..58ec54fcdb1a7d 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/__snapshots__/Button.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
index d19ca6d1df8183..8675986e8d5cce 100644
--- a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`Button renders ActionButton correctly 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: 0px;
         content: "";
@@ -49,7 +49,7 @@ exports[`Button renders ActionButton correctly 1`] = `
         top: 0px;
         z-index: 1;
       }
-      @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
         border: none;
         bottom: -2px;
         left: -2px;
@@ -150,7 +150,7 @@ exports[`Button renders CommandBarButton correctly 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: 0px;
         content: "";
@@ -161,7 +161,7 @@ exports[`Button renders CommandBarButton correctly 1`] = `
         top: 0px;
         z-index: 1;
       }
-      @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
         border: none;
         bottom: 4px;
         left: 4px;
@@ -309,7 +309,7 @@ exports[`Button renders CompoundButton correctly 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: 0px;
         content: "";
@@ -320,7 +320,7 @@ exports[`Button renders CompoundButton correctly 1`] = `
         top: 0px;
         z-index: 1;
       }
-      @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
         border: none;
         bottom: -2px;
         left: -2px;
@@ -445,7 +445,7 @@ exports[`Button renders DefaultButton correctly 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: 0px;
         content: "";
@@ -456,7 +456,7 @@ exports[`Button renders DefaultButton correctly 1`] = `
         top: 0px;
         z-index: 1;
       }
-      @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
         border: none;
         bottom: -2px;
         left: -2px;
@@ -551,7 +551,7 @@ exports[`Button renders IconButton correctly 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: 0px;
         content: "";
@@ -562,7 +562,7 @@ exports[`Button renders IconButton correctly 1`] = `
         top: 0px;
         z-index: 1;
       }
-      @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+      @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
         border: none;
         bottom: -2px;
         left: -2px;
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 00000000000000..28f24d35ced712
--- /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 00000000000000..e6ad43b773a408
--- /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 00000000000000..07e7c69b1a6868
--- /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 dd8603446821ac..cb59b413995332 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 09a462ec6a6881..5bdbe2a5a8917f 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 4617d5420cb864..acbdf45e089d83 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 c1ba4cf8657597..295b9974150eb4 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 19a42f41c4c630..bd284ccc3d3f57 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 a90f12afb5b428..5675c885040d41 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 (
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 7e145591eefde6..83de1f76fa67fc 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 bcd33745f2ad7e..135731af037726 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 fcc150fa3fd136..253e75f431bc89 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 ceccbf0b51c1df..5cd9502c361f75 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 3ab322885eda6c..63ae1632d8ccf7 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 e91de6bf13f39a..80061d9aa3dee9 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.scss b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
index 5dea7e3f5b3378..cf5b50601cdbbb 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
@@ -60,27 +60,21 @@ $Calendar-dayPicker-margin: 10px;
   display: inline-flex;
   height: $Calendar-day;
   line-height: 44px;
+  width: 100%;
 }
 
 // The month and year labels.
 .monthAndYear,
 .year {
-  display: inline-block;
-  @include ms-font-xl;
+  display: inline-flex;
+  flex-grow: 1;
+  @include ms-font-m;
   color: $ms-color-neutralPrimary;
   margin-top: -1px;
-  font-weight: $ms-font-weight-semilight;
+  font-weight: $ms-font-weight-semibold;
   padding: 0 5px;
 }
 
-.monthAndYear {
-  @include margin-left(5px);
-}
-
-.year {
-  @include margin-left(5px);
-}
-
 // The calendar table of dates.
 .table {
   text-align: center;
@@ -135,7 +129,22 @@ $Calendar-dayPicker-margin: 10px;
 .dayIsFocused:hover,
 .dayIsUnfocused:hover {
   cursor: pointer;
-  background: $ms-color-neutralTertiaryAlt;
+  background: $ms-color-neutralLight;
+}
+
+.weekHover:hover, .monthHover, .monthHover:hover {
+  cursor: pointer;
+  background: $ms-color-neutralLight;
+}
+
+.weekHover:active, .weekHover:active .day, .monthPress, .monthPress:hover {
+  cursor: pointer;
+  font-weight: $ms-font-weight-semibold;
+  background: $ms-color-themeLight;
+
+  .dayIsToday {
+    background: $ms-color-themePrimary;
+  }
 }
 
 .day.dayIsHighlighted.dayIsFocused {
@@ -155,10 +164,16 @@ $Calendar-dayPicker-margin: 10px;
 }
 
 .dayIsUnfocused:active,
+.dayIsFocused:active,
+.dayIsHighlighted {
+  background: $ms-color-themeLight;
+}
+
 .dayIsFocused:active,
 .dayIsHighlighted {
   &.day {
     color: $ms-color-black;
+    font-weight: $ms-font-weight-semibold;
     background: $ms-color-themeLight;
   }
 }
@@ -169,42 +184,29 @@ $Calendar-dayPicker-margin: 10px;
   background: $ms-color-neutralTertiary;
 }
 
-// Today.
-.dayIsToday,
-.pickerIsFocused .dayIsToday {
-  position: relative;
-  color: $ms-color-white;
-  background-color: $ms-color-themePrimary;
-  font-weight: 600;
-}
-
 // Highlighted date squares
 .dayBackground,
 .weekBackground,
 .monthBackground {
-  background: $ms-color-neutralLight;
-}
-
-.dayBackground {
-  // border-radius: 2px;
+  .day {
+    font-weight: $ms-font-weight-semibold;
+    background: $ms-color-themeLight;
+  }
 }
 
-.weekBackground {
-  &:first-child {
-    // border-radius: 2px 0px 0px 2px;
-  }
-  &:last-child {
-    // border-radius: 0px 2px 2px 0px;
-  }
+// Today.
+.dayIsToday, .dayIsToday,
+.pickerIsFocused .dayIsToday, .dayIsToday.day:active {
+  position: relative;
+  color: $ms-color-white;
+  font-weight: $ms-font-weight-semibold;
+  background: $ms-color-themePrimary;
 }
 
 .showWeekNumbers {
   .weekNumbers {
-    position: absolute;
-    margin-top: $Calendar-day;
     border-right: 1px solid $ms-color-neutralLight;
     box-sizing: border-box;
-    width: 30px;
     .day {
       color: $ms-color-neutralSecondary;
       &.weekIsHighlighted {
@@ -213,9 +215,6 @@ $Calendar-dayPicker-margin: 10px;
     }
   }
   .table {
-    &:not(.weekNumbers) {
-      margin-left: 30px;
-    }
     .day,
     .weekday {
       width: 30px;
@@ -226,11 +225,8 @@ $Calendar-dayPicker-margin: 10px;
 // week numbers style in right-to-left view
 .showWeekNumbersRTL {
   .weekNumbers {
-    position: absolute;
-    margin-top: $Calendar-day;
     border-left: 1px solid $ms-color-neutralLight;
     box-sizing: border-box;
-    width: 30px;
     .day {
       color: $ms-color-neutralSecondary;
       &.weekIsHighlighted {
@@ -254,11 +250,11 @@ $Calendar-dayPicker-margin: 10px;
 .yearComponents,
 .decadeComponents {
   display: inline-flex;
-  margin-left: 3px;
+  align-self: flex-end;
 }
 
 .yearComponents {
-  margin-left: 3px;
+  @include margin-right(20px);
 }
 
 .prevMonth,
@@ -306,14 +302,15 @@ $Calendar-dayPicker-margin: 10px;
 // Text showing the currently-selected year.
 .currentYear,
 .currentDecade {
-  display: block;
+  display: inline-flex;
+  flex-grow: 1;
   padding: 0 5px;
-  @include ms-font-xl;
+  @include ms-font-m;
   color: $ms-color-neutralPrimary;
   height: $Calendar-day;
   line-height: $Calendar-day;
   @include margin-left(5px);
-  font-weight: $ms-font-weight-semilight;
+  font-weight: $ms-font-weight-semibold;
 }
 
 // A grid of month or year options, which pushes them over
@@ -342,7 +339,7 @@ $Calendar-dayPicker-margin: 10px;
   background-color: transparent;
   &:hover {
     color: $ms-color-black;
-    background-color: $ms-color-neutralTertiaryAlt;
+    background-color: $ms-color-neutralLight;
     outline: 1px solid transparent;
   }
   &.isHighlighted {
@@ -417,6 +414,7 @@ $Calendar-dayPicker-margin: 10px;
   .header {
     height: $Calendar-day;
     line-height: $Calendar-day;
+    width: 100%;
   } // Calendar day cells are smaller.
   .day,
   .weekday {
@@ -452,15 +450,7 @@ $Calendar-dayPicker-margin: 10px;
     padding: 0 3px;
   }
   .showWeekNumbers {
-    .weekNumbers {
-      margin-top: $Calendar-day;
-      width: 26px;
-      margin-left: -7px
-    }
     .table {
-      &:not(.weekNumbers) {
-        margin-left: 19px;
-      }
       .day,
       .weekday {
         width: 26px;
@@ -468,15 +458,7 @@ $Calendar-dayPicker-margin: 10px;
     }
   } // week numbers style in right-to-left view
   .showWeekNumbersRTL {
-    .weekNumbers {
-      margin-top: $Calendar-day;
-      width: 26px;
-      margin-right: -7px;
-    }
     .table {
-      &:not(.weekNumbers) {
-        margin-right: 19px;
-      }
       .day,
       .weekday {
         width: 26px;
@@ -568,18 +550,23 @@ $Calendar-dayPicker-margin: 10px;
       height: auto;
     }
     .table {
-      margin-right: 12px
+      @include margin-right(12px);
     }
     .dayPicker {
       width: auto;
     }
     .monthPicker {
-      margin-left: 13px;
+      @include margin-left(13px);
     }
     .goToday {
       @include ms-right(13px);
       padding: 0 10px;
     }
+    .monthComponents,
+    .yearComponents,
+    .decadeComponents {
+      @include margin-right(12px);
+    }
   } //when month picker is only visible
   .monthPickerOnly {
     .wrap {
@@ -637,16 +624,21 @@ $Calendar-dayPicker-margin: 10px;
 .prevYear {
   display: inline-block;
   &:hover {
-    background-color: $ms-color-neutralTertiaryAlt;
+    background-color: $ms-color-neutralLight;
+  }
+  &:active {
+    background-color: $ms-color-themeLight;
   }
 }
 
 .nextMonth,
 .nextYear {
   margin-left: 3px;
+  margin-right: 2px;
 }
 
 .monthIsHighlighted {
+  font-weight: $ms-font-weight-semibold;
   background-color: $ms-color-themeLight;
   &.monthOption:hover {
     background-color: $ms-color-themeLight;
@@ -654,11 +646,11 @@ $Calendar-dayPicker-margin: 10px;
 }
 
 .monthIsCurrentMonth {
-  font-weight: 600;
+  font-weight: $ms-font-weight-semibold;
   color: $ms-color-white;
   background-color: $ms-color-themePrimary;
   &.monthOption:hover {
-    font-weight: 600;
+    font-weight: $ms-font-weight-semibold;
     color: $ms-color-white;
     background-color: $ms-color-themePrimary;
   }
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 6616d450c70a45..cf50e4755bc670 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';
@@ -173,6 +171,7 @@ describe('Calendar', () => {
           dateRangeType={ DateRangeType.Week }
           autoNavigateOnSelection={ true }
           onSelectDate={ onSelectDate() }
+          className='CalendarTestClass'
         />) as Calendar;
     });
 
@@ -246,6 +245,17 @@ describe('Calendar', () => {
       expect(lastSelectedDateRange!.length).toEqual(7);
       lastSelectedDateRange!.forEach((val, i) => expect(compareDates(val, addDays(firstDate, i))).toEqual(true));
     });
+
+    it('Verify class name', () => {
+      const calendarRoot = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'CalendarTestClass');
+      expect(calendarRoot).toBeDefined();
+      expect(calendarRoot.length).toEqual(1);
+      const root = calendarRoot[0];
+      expect(root.classList).toBeDefined();
+      expect(root.classList.length).toEqual(2);
+      expect(root.classList[0]).toEqual('ms-DatePicker');
+      expect(root.classList[1]).toEqual('CalendarTestClass');
+    });
   });
 
   describe('render with date boundaries', () => {
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 6d999bf54e92f6..a79e89f50895ce 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
@@ -63,6 +63,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     showGoToToday: true,
     strings: null,
     highlightCurrentMonth: false,
+    highlightSelectedMonth: false,
     navigationIcons: iconStrings,
     showWeekNumbers: false,
     firstWeekOfYear: FirstWeekOfYear.FirstDay,
@@ -92,7 +93,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,28 +110,28 @@ 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 { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, highlightSelectedMonth, navigationIcons, minDate, maxDate, className } = this.props;
     const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state;
     const onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined;
     const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;
     const overlayedWithButton = showMonthPickerAsOverlay && showGoToToday;
 
     return (
-      <div className={ css(rootClass, styles.root) } role='application'>
+      <div className={ css(rootClass, styles.root, className) } role='application'>
         <div
           className={ css(
             'ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused',
@@ -172,10 +173,12 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
 
                 { isMonthPickerVisible && <CalendarMonth
                   navigatedDate={ navigatedDate! }
+                  selectedDate={ selectedDate! }
                   strings={ strings! }
                   onNavigateDate={ this._onNavigateDate }
                   today={ this.props.today }
                   highlightCurrentMonth={ highlightCurrentMonth! }
+                  highlightSelectedMonth={ highlightSelectedMonth! }
                   onHeaderSelect={ onHeaderSelect }
                   navigationIcons={ navigationIcons! }
                   dateTimeFormatter={ this.props.dateTimeFormatter! }
@@ -204,8 +207,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();
     }
   }
 
@@ -257,7 +260,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
   }
 
   private _onGotoTodayKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {
+    if (ev.which === KeyCodes.enter) {
       ev.preventDefault();
       this._onGotoToday();
     } else if (ev.which === KeyCodes.tab && !ev.shiftKey) {
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts
index e3f731dcea3fb7..d6401d66e5f613 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts
@@ -16,6 +16,11 @@ export interface ICalendarProps extends React.Props<Calendar> {
    */
   componentRef?: (component: ICalendar | null) => void;
 
+  /**
+   * Optional class name to add to the root element.
+   */
+  className?: string;
+
   /**
   * Callback issued when a date is selected
   * @param date - The date the user selected
@@ -100,6 +105,12 @@ export interface ICalendarProps extends React.Props<Calendar> {
   */
   highlightCurrentMonth?: boolean;
 
+  /**
+  * Whether the month picker should highlight the selected month
+  * @defaultvalue false
+  */
+  highlightSelectedMonth?: boolean;
+
   /**
   * Customize navigation icons using ICalendarIconStrings
   */
@@ -196,6 +207,11 @@ export interface ICalendarStrings {
    */
   nextYearAriaLabel?: string;
 
+  /**
+   * Aria-label format string for the week number header. Should have 1 string param e.g. "week number {0}"
+   */
+  weekNumberFormatString?: string;
+
 }
 
 export interface ICalendarIconStrings {
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 7907ad60de58e5..e0493c4cd2f01d 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
@@ -5,7 +5,8 @@ import {
   css,
   getId,
   getRTL,
-  getRTLSafeKeyCode
+  getRTLSafeKeyCode,
+  format
 } from '../../Utilities';
 import { ICalendarStrings, ICalendarIconStrings, ICalendarFormatDateCallbacks } from './Calendar.types';
 import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
@@ -78,10 +79,8 @@ interface IWeekCorners {
 }
 
 export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDayState> {
-  public refs: {
-    [key: string]: React.ReactInstance;
-    navigatedDay: HTMLElement;
-  };
+  private navigatedDay: HTMLElement | null;
+  private days: { [key: string]: HTMLElement | null } = {};
 
   public constructor(props: ICalendarDayProps) {
     super(props);
@@ -95,13 +94,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');
@@ -130,44 +129,11 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
         ) }
         id={ dayPickerId }
       >
-        <div className={ css('ms-DatePicker-monthComponents', styles.monthComponents) }>
-          <div className={ css('ms-DatePicker-navContainer', styles.navContainer) }>
-            <button
-              className={ css('ms-DatePicker-prevMonth js-prevMonth', styles.prevMonth,
-                {
-                  ['ms-DatePicker-prevMonth--disabled ' + styles.prevMonthIsDisabled]: !prevMonthInBounds
-                }
-              ) }
-              onClick={ this._onSelectPrevMonth }
-              onKeyDown={ this._onPrevMonthKeyDown }
-              aria-controls={ dayPickerId }
-              aria-label={ strings.prevMonthAriaLabel ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()] : undefined }
-              role='button'
-              tabIndex={ 0 }
-            >
-              <Icon iconName={ leftNavigationIcon } />
-            </button >
-            <button
-              className={ css('ms-DatePicker-nextMonth js-nextMonth', styles.nextMonth,
-                {
-                  ['ms-DatePicker-nextMonth--disabled ' + styles.nextMonthIsDisabled]: !nextMonthInBounds
-                }) }
-              onClick={ this._onSelectNextMonth }
-              onKeyDown={ this._onNextMonthKeyDown }
-              aria-controls={ dayPickerId }
-              aria-label={ strings.nextMonthAriaLabel ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()] : undefined }
-              role='button'
-              tabIndex={ 0 }
-            >
-              <Icon iconName={ rightNavigationIcon } />
-            </button >
-          </div >
-        </div >
         <div className={ css('ms-DatePicker-header', styles.header) } >
-          <div aria-live='polite' aria-relevant='text' aria-atomic='true' id={ monthAndYearId }>
+          <div aria-live='polite' aria-relevant='text' aria-atomic='true' id={ monthAndYearId } className={ styles.monthAndYear } >
             { this.props.onHeaderSelect ?
               <div
-                className={ css('ms-DatePicker-monthAndYear js-showMonthPicker', styles.monthAndYear, styles.headerToggleView) }
+                className={ css('ms-DatePicker-monthAndYear js-showMonthPicker', styles.headerToggleView) }
                 onClick={ this._onHeaderSelect }
                 onKeyDown={ this._onHeaderKeyDown }
                 aria-label={ dateTimeFormatter.formatMonthYear(navigatedDate, strings) }
@@ -182,35 +148,41 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
               </div>
             }
           </div>
+          <div className={ css('ms-DatePicker-monthComponents', styles.monthComponents) }>
+            <div className={ css('ms-DatePicker-navContainer', styles.navContainer) }>
+              <button
+                className={ css('ms-DatePicker-prevMonth js-prevMonth', styles.prevMonth,
+                  {
+                    ['ms-DatePicker-prevMonth--disabled ' + styles.prevMonthIsDisabled]: !prevMonthInBounds
+                  }
+                ) }
+                onClick={ this._onSelectPrevMonth }
+                onKeyDown={ this._onPrevMonthKeyDown }
+                aria-controls={ dayPickerId }
+                aria-label={ strings.prevMonthAriaLabel ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()] : undefined }
+                role='button'
+                tabIndex={ 0 }
+              >
+                <Icon iconName={ leftNavigationIcon } />
+              </button >
+              <button
+                className={ css('ms-DatePicker-nextMonth js-nextMonth', styles.nextMonth,
+                  {
+                    ['ms-DatePicker-nextMonth--disabled ' + styles.nextMonthIsDisabled]: !nextMonthInBounds
+                  }) }
+                onClick={ this._onSelectNextMonth }
+                onKeyDown={ this._onNextMonthKeyDown }
+                aria-controls={ dayPickerId }
+                aria-label={ strings.nextMonthAriaLabel ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()] : undefined }
+                role='button'
+                tabIndex={ 0 }
+              >
+                <Icon iconName={ rightNavigationIcon } />
+              </button >
+            </div >
+          </div >
         </div>
         <FocusZone>
-          {
-            showWeekNumbers ?
-              <table
-                className={ css('ms-DatePicker-weekNumbers', styles.weekNumbers, 'ms-DatePicker-table', styles.table) }
-              >
-                <tbody>
-                  { weekNumbers!.map((weekNumber, index) =>
-                    <tr key={ index }>
-                      <td>
-                        <div
-                          className={ css(
-                            'ms-DatePicker-day',
-                            styles.day,
-                            {
-                              ['ms-DatePicker-week--highlighted ' + styles.weekIsHighlighted]: selectedDateWeekNumber === weekNumber
-                            }
-                          ) }
-                        >
-                          <span>{ weekNumber }</span>
-                        </div>
-                      </td>
-                    </tr>
-                  ) }
-                </tbody>
-              </table>
-              : null
-          }
           <table
             className={ css('ms-DatePicker-table', styles.table) }
             aria-readonly='true'
@@ -220,6 +192,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
           >
             <thead>
               <tr>
+                { showWeekNumbers && <th /> }
                 { strings.shortDays.map((val, index) =>
                   <th
                     className={ css('ms-DatePicker-weekday', styles.weekday) }
@@ -233,9 +206,37 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
                   </th>) }
               </tr>
             </thead>
-            <tbody>
+            <tbody
+              onMouseLeave={ dateRangeType === DateRangeType.Month ? this._onTableMouseLeave : undefined }
+              onMouseUp={ dateRangeType === DateRangeType.Month ? this._onTableMouseUp : undefined }
+            >
               { weeks!.map((week, weekIndex) =>
-                <tr key={ weekIndex } role='row'>
+                <tr
+                  key={ weekNumbers ? weekNumbers[weekIndex] : weekIndex }
+                  role='row'
+                  className={ (dateRangeType === DateRangeType.Week || dateRangeType === DateRangeType.WorkWeek) ? styles.weekHover : undefined }
+                >
+                  { showWeekNumbers && weekNumbers &&
+                    <th
+                      className={ css('ms-DatePicker-weekNumbers', styles.weekNumbers) }
+                      key={ weekIndex }
+                      title={ weekNumbers && strings.weekNumberFormatString && format(strings.weekNumberFormatString, weekNumbers[weekIndex]) }
+                      aria-label={ weekNumbers && strings.weekNumberFormatString && format(strings.weekNumberFormatString, weekNumbers[weekIndex]) }
+                      scope='row'
+                    >
+                      <div
+                        className={ css(
+                          'ms-DatePicker-day',
+                          styles.day,
+                          {
+                            ['ms-DatePicker-week--highlighted ' + styles.weekIsHighlighted]: selectedDateWeekNumber === weekNumbers[weekIndex]
+                          }
+                        ) }
+                      >
+                        <span>{ weekNumbers[weekIndex] }</span>
+                      </div>
+                    </th>
+                  }
                   { week.map((day, dayIndex) => {
                     const isNavigatedDate = compareDates(navigatedDate, day.originalDate);
                     return <td
@@ -248,6 +249,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
                         }) }
                     >
                       <div
+                        key={ day.key + 'div' }
                         className={ css(
                           'ms-DatePicker-day',
                           styles.day,
@@ -256,7 +258,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
                             ['ms-DatePicker-day--infocus ' + styles.dayIsFocused]: day.isInBounds && day.isInMonth,
                             ['ms-DatePicker-day--outfocus ' + styles.dayIsUnfocused]: day.isInBounds && !day.isInMonth,
                             ['ms-DatePicker-day--today ' + styles.dayIsToday]: day.isToday,
-                            ['ms-DatePicker-day--highlighted ' + styles.dayIsHighlighted]: day.isSelected && dateRangeType === DateRangeType.Day
+                            ['ms-DatePicker-day--highlighted ' + styles.dayIsHighlighted]: day.isSelected && dateRangeType === DateRangeType.Day,
                           }) }
                         role={ 'gridcell' }
                         onClick={ day.isInBounds ? day.onSelected : undefined }
@@ -265,8 +267,11 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
                         id={ isNavigatedDate ? activeDescendantId : undefined }
                         aria-selected={ day.isInBounds ? day.isSelected : undefined }
                         data-is-focusable={ day.isInBounds ? true : undefined }
-                        ref={ isNavigatedDate ? 'navigatedDay' : undefined }
-                        key={ isNavigatedDate ? 'navigatedDay' : undefined }
+                        ref={ element => this._setDayRef(element, day, isNavigatedDate) }
+                        onMouseOver={ dateRangeType === DateRangeType.Month ? this._onDayMouseOver(day.originalDate, weekIndex, dayIndex) : undefined }
+                        onMouseLeave={ dateRangeType === DateRangeType.Month ? this._onDayMouseLeave(day.originalDate, weekIndex, dayIndex) : undefined }
+                        onMouseDown={ dateRangeType === DateRangeType.Month ? this._onDayMouseDown(day.originalDate, weekIndex, dayIndex) : undefined }
+                        onMouseUp={ dateRangeType === DateRangeType.Month ? this._onDayMouseUp(day.originalDate, weekIndex, dayIndex) : undefined }
                       >
                         <span aria-hidden='true'>{ dateTimeFormatter.formatDay(day.originalDate) }</span>
                       </div>
@@ -282,14 +287,21 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
   }
 
   public focus() {
-    if (this.refs.navigatedDay) {
-      this.refs.navigatedDay.tabIndex = 0;
-      this.refs.navigatedDay.focus();
+    if (this.navigatedDay) {
+      this.navigatedDay.tabIndex = 0;
+      this.navigatedDay.focus();
     }
   }
 
-  private _findCornerIndexes(week: IDayInfo[]) {
+  private _setDayRef(element: HTMLElement | null, day: IDayInfo, isNavigatedDate: boolean): void {
+    if (isNavigatedDate) {
+      this.navigatedDay = element;
+    }
+
+    this.days[day.key] = element;
+  }
 
+  private _findCornerIndexes(week: IDayInfo[]): number[] {
     const cornerIndexes = [];
 
     for (let i = 0, length = week.length; i < length; i++) {
@@ -314,7 +326,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 +359,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 +387,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;
 
@@ -415,6 +427,90 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     };
   }
 
+  private _onDayMouseDown = (originalDate: Date, weekIndex: number, dayIndex: number)
+    : (ev: React.MouseEvent<HTMLElement>) => void => {
+    return (ev: React.MouseEvent<HTMLElement>): void => {
+      // set the press styling
+      this._applyFunctionToDayRefs((ref, day) => {
+        if (ref && day.originalDate.getMonth() === originalDate.getMonth()) {
+          ref.classList.add(styles.monthPress);
+        }
+      });
+    };
+  }
+
+  private _onDayMouseUp = (originalDate: Date, weekIndex: number, dayIndex: number)
+    : (ev: React.MouseEvent<HTMLElement>) => void => {
+    return (ev: React.MouseEvent<HTMLElement>): void => {
+      // remove press styling
+      this._applyFunctionToDayRefs((ref, day) => {
+        if (ref && day.originalDate.getMonth() === originalDate.getMonth()) {
+          ref.classList.remove(styles.monthPress);
+        }
+      });
+    };
+  }
+
+  private _onDayMouseOver = (originalDate: Date, weekIndex: number, dayIndex: number)
+    : (ev: React.MouseEvent<HTMLElement>) => void => {
+    return (ev: React.MouseEvent<HTMLElement>): void => {
+      // set the hover styling on every day in the same month
+      this._applyFunctionToDayRefs((ref, day) => {
+        if (ref && day.originalDate.getMonth() === originalDate.getMonth()) {
+          ref.classList.add(styles.monthHover);
+        }
+      });
+    };
+  }
+
+  private _onDayMouseLeave = (originalDate: Date, weekIndex: number, dayIndex: number)
+    : (ev: React.MouseEvent<HTMLElement>) => void => {
+    return (ev: React.MouseEvent<HTMLElement>): void => {
+      // remove the hover and pressed styling
+      this._applyFunctionToDayRefs((ref, day) => {
+        if (ref && day.originalDate.getMonth() === originalDate.getMonth()) {
+          ref.classList.remove(styles.monthHover);
+        }
+      });
+    };
+  }
+
+  private _onTableMouseLeave = (ev: React.MouseEvent<HTMLElement>): void => {
+    if ((ev.target as HTMLElement).contains && (ev.target as HTMLElement).contains(ev.relatedTarget as HTMLElement)) {
+      return;
+    }
+
+    this._applyFunctionToDayRefs((ref, day) => {
+      if (ref) {
+        ref.classList.remove(styles.monthHover);
+        ref.classList.remove(styles.monthPress);
+      }
+    });
+  }
+
+  private _onTableMouseUp = (ev: React.MouseEvent<HTMLElement>): void => {
+    if ((ev.target as HTMLElement).contains && (ev.target as HTMLElement).contains(ev.relatedTarget as HTMLElement)) {
+      return;
+    }
+
+    this._applyFunctionToDayRefs((ref, day) => {
+      if (ref) {
+        ref.classList.remove(styles.monthPress);
+      }
+    });
+  }
+
+  private _applyFunctionToDayRefs(func: (ref: HTMLElement | null, day: IDayInfo) => void) {
+    if (this.state.weeks && this.props.dateRangeType === DateRangeType.Month) {
+      this.state.weeks.map(week => {
+        week.map(day => {
+          const ref = this.days[day.key];
+          func(ref, day);
+        });
+      });
+    }
+  }
+
   private _onSelectDate = (selectedDate: Date): void => {
     const {
       onSelectDate,
@@ -470,11 +566,15 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
   }
 
   private _onPrevMonthKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    this._onKeyDown(this._onSelectPrevMonth, ev);
+    if (ev.which === KeyCodes.enter) {
+      this._onKeyDown(this._onSelectPrevMonth, ev);
+    }
   }
 
   private _onNextMonthKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    this._onKeyDown(this._onSelectNextMonth, ev);
+    if (ev.which === KeyCodes.enter) {
+      this._onKeyDown(this._onSelectNextMonth, ev);
+    }
   }
 
   private _getWeeks(propsToUse: ICalendarDayProps): IDayInfo[][] {
@@ -501,7 +601,9 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     // a flag to indicate whether all days of the week are in the month
     let isAllDaysOfWeekOutOfMonth = false;
 
-    let selectedDates = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays);
+    // in work week view we want to select the whole week
+    const selectedDateRangeType = dateRangeType === DateRangeType.WorkWeek ? DateRangeType.Week : dateRangeType;
+    let selectedDates = getDateRangeArray(selectedDate, selectedDateRangeType, firstDayOfWeek, workWeekDays);
     if (dateRangeType !== DateRangeType.Day) {
       selectedDates = this._getBoundedDateRange(selectedDates, minDate, maxDate);
     }
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 c8058f76f7898c..24997e311c92f4 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
@@ -19,10 +19,12 @@ export interface ICalendarMonth {
 export interface ICalendarMonthProps extends React.Props<CalendarMonth> {
   componentRef?: (c: ICalendarMonth) => void;
   navigatedDate: Date;
+  selectedDate: Date;
   strings: ICalendarStrings;
   onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;
   today?: Date;
   highlightCurrentMonth: boolean;
+  highlightSelectedMonth: boolean;
   onHeaderSelect?: (focus: boolean) => void;
   navigationIcons: ICalendarIconStrings;
   dateTimeFormatter: ICalendarFormatDateCallbacks;
@@ -52,9 +54,9 @@ 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 { navigatedDate, selectedDate, strings, today, highlightCurrentMonth, highlightSelectedMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props;
     const leftNavigationIcon = navigationIcons.leftNavigation;
     const rightNavigationIcon = navigationIcons.rightNavigation;
 
@@ -64,34 +66,6 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
 
     return (
       <div className={ css('ms-DatePicker-monthPicker', styles.monthPicker) }>
-        <div className={ css('ms-DatePicker-yearComponents', styles.yearComponents) }>
-          <div className={ css('ms-DatePicker-navContainer', styles.navContainer) }>
-            <button
-              className={ css('ms-DatePicker-prevYear js-prevYear', styles.prevYear, {
-                ['ms-DatePicker-prevYear--disabled ' + styles.prevYearIsDisabled]: !isPrevYearInBounds
-              }) }
-              onClick={ this._onSelectPrevYear }
-              onKeyDown={ this._onSelectPrevYearKeyDown }
-              aria-label={ strings.prevYearAriaLabel ? strings.prevYearAriaLabel + ' ' + dateTimeFormatter.formatYear(addYears(navigatedDate, -1)) : undefined }
-              role='button'
-              tabIndex={ 0 }
-            >
-              <Icon iconName={ getRTL() ? rightNavigationIcon : leftNavigationIcon } />
-            </button>
-            <button
-              className={ css('ms-DatePicker-nextYear js-nextYear', styles.nextYear, {
-                ['ms-DatePicker-nextYear--disabled ' + styles.nextYearIsDisabled]: !isNextYearInBounds
-              }) }
-              onClick={ this._onSelectNextYear }
-              onKeyDown={ this._onSelectNextYearKeyDown }
-              aria-label={ strings.nextYearAriaLabel ? strings.nextYearAriaLabel + ' ' + dateTimeFormatter.formatYear(addYears(navigatedDate, 1)) : undefined }
-              role='button'
-              tabIndex={ 0 }
-            >
-              <Icon iconName={ getRTL() ? leftNavigationIcon : rightNavigationIcon } />
-            </button>
-          </div>
-        </div>
         <div className={ css('ms-DatePicker-header', styles.header) }>
           { this.props.onHeaderSelect ?
             <div
@@ -109,6 +83,34 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
               { dateTimeFormatter.formatYear(navigatedDate) }
             </div>
           }
+          <div className={ css('ms-DatePicker-yearComponents', styles.yearComponents) }>
+            <div className={ css('ms-DatePicker-navContainer', styles.navContainer) }>
+              <button
+                className={ css('ms-DatePicker-prevYear js-prevYear', styles.prevYear, {
+                  ['ms-DatePicker-prevYear--disabled ' + styles.prevYearIsDisabled]: !isPrevYearInBounds
+                }) }
+                onClick={ this._onSelectPrevYear }
+                onKeyDown={ this._onSelectPrevYearKeyDown }
+                aria-label={ strings.prevYearAriaLabel ? strings.prevYearAriaLabel + ' ' + dateTimeFormatter.formatYear(addYears(navigatedDate, -1)) : undefined }
+                role='button'
+                tabIndex={ 0 }
+              >
+                <Icon iconName={ getRTL() ? rightNavigationIcon : leftNavigationIcon } />
+              </button>
+              <button
+                className={ css('ms-DatePicker-nextYear js-nextYear', styles.nextYear, {
+                  ['ms-DatePicker-nextYear--disabled ' + styles.nextYearIsDisabled]: !isNextYearInBounds
+                }) }
+                onClick={ this._onSelectNextYear }
+                onKeyDown={ this._onSelectNextYearKeyDown }
+                aria-label={ strings.nextYearAriaLabel ? strings.nextYearAriaLabel + ' ' + dateTimeFormatter.formatYear(addYears(navigatedDate, 1)) : undefined }
+                role='button'
+                tabIndex={ 0 }
+              >
+                <Icon iconName={ getRTL() ? leftNavigationIcon : rightNavigationIcon } />
+              </button>
+            </div>
+          </div>
         </div>
         <FocusZone>
           <div
@@ -120,6 +122,8 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
               const indexedMonth = setMonth(navigatedDate, index);
               const isCurrentMonth = this._isCurrentMonth(index, navigatedDate.getFullYear(), today!);
               const isNavigatedMonth = navigatedDate.getMonth() === index;
+              const isSelectedMonth = selectedDate.getMonth() === index;
+              const isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();
               const isInBounds = (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&
                 (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);
 
@@ -129,7 +133,8 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
                   css('ms-DatePicker-monthOption', styles.monthOption,
                     {
                       ['ms-DatePicker-day--today ' + styles.monthIsCurrentMonth]: highlightCurrentMonth && isCurrentMonth!,
-                      ['ms-DatePicker-day--highlighted ' + styles.monthIsHighlighted]: highlightCurrentMonth && isNavigatedMonth,
+                      ['ms-DatePicker-day--highlighted ' + styles.monthIsHighlighted]: (highlightCurrentMonth && isNavigatedMonth) ||
+                        (highlightSelectedMonth && isSelectedMonth && isSelectedYear),
                       ['ms-DatePicker-monthOption--disabled ' + styles.monthOptionIsDisabled]: !isInBounds
                     })
                 }
@@ -157,7 +162,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;
   }
 
@@ -173,7 +178,9 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
   }
 
   private _onSelectNextYearKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    this._onKeyDown(this._onSelectNextYear, ev);
+    if (ev.which === KeyCodes.enter) {
+      this._onKeyDown(this._onSelectNextYear, ev);
+    }
   }
 
   private _onSelectPrevYear = (): void => {
@@ -182,7 +189,9 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
   }
 
   private _onSelectPrevYearKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    this._onKeyDown(this._onSelectPrevYear, ev);
+    if (ev.which === KeyCodes.enter) {
+      this._onKeyDown(this._onSelectPrevYear, ev);
+    }
   }
 
   private _onSelectMonth = (newMonth: number): void => {
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 b3609024692755..485a312fa0e01b 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 }>
@@ -38,7 +40,8 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
             >
               <CalendarInlineExample
                 showMonthPickerAsOverlay={ true }
-                highlightCurrentMonth={ true }
+                highlightCurrentMonth={ false }
+                highlightSelectedMonth={ true }
                 dateRangeType={ DateRangeType.Day }
                 autoNavigateOnSelection={ false }
                 showGoToToday={ false }
@@ -51,7 +54,8 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
               <CalendarInlineExample
                 dateRangeType={ DateRangeType.Day }
                 autoNavigateOnSelection={ false }
-                highlightCurrentMonth={ true }
+                highlightCurrentMonth={ false }
+                highlightSelectedMonth={ true }
                 showGoToToday={ true }
               />
             </ExampleCard>
@@ -62,6 +66,8 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
               <CalendarInlineExample
                 dateRangeType={ DateRangeType.Week }
                 autoNavigateOnSelection={ true }
+                highlightCurrentMonth={ false }
+                highlightSelectedMonth={ true }
                 showGoToToday={ true }
                 showNavigateButtons={ true }
               />
@@ -73,6 +79,8 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
               <CalendarInlineExample
                 dateRangeType={ DateRangeType.Month }
                 autoNavigateOnSelection={ true }
+                highlightCurrentMonth={ false }
+                highlightSelectedMonth={ true }
                 showGoToToday={ true }
                 showNavigateButtons={ true }
               />
@@ -100,7 +108,8 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
                 dateRangeType={ DateRangeType.Month }
                 autoNavigateOnSelection={ false }
                 showGoToToday={ true }
-                highlightCurrentMonth={ true }
+                highlightCurrentMonth={ false }
+                highlightSelectedMonth={ true }
                 isDayPickerVisible={ false }
               />
             </ExampleCard>
@@ -111,7 +120,8 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
               <CalendarInlineExample
                 dateRangeType={ DateRangeType.Day }
                 autoNavigateOnSelection={ true }
-                highlightCurrentMonth={ true }
+                highlightCurrentMonth={ false }
+                highlightSelectedMonth={ true }
                 showGoToToday={ false }
                 minDate={ addMonths(today, -1) }
                 maxDate={ addYears(today, 1) }
@@ -125,7 +135,8 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
                 dateRangeType={ DateRangeType.WorkWeek }
                 firstDayOfWeek={ DayOfWeek.Monday }
                 autoNavigateOnSelection={ true }
-                highlightCurrentMonth={ true }
+                highlightCurrentMonth={ false }
+                highlightSelectedMonth={ true }
                 showGoToToday={ true }
                 workWeekDays={ [DayOfWeek.Tuesday, DayOfWeek.Saturday, DayOfWeek.Wednesday, DayOfWeek.Friday] }
               />
@@ -143,7 +154,8 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
             >
               <CalendarButtonExample
                 isDayPickerVisible={ false }
-                highlightCurrentMonth={ true }
+                highlightCurrentMonth={ false }
+                highlightSelectedMonth={ true }
                 buttonString={ 'Click for Month Picker' }
               />
             </ExampleCard>
@@ -153,7 +165,8 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
             >
               <CalendarButtonExample
                 showMonthPickerAsOverlay={ true }
-                highlightCurrentMonth={ true }
+                highlightCurrentMonth={ false }
+                highlightSelectedMonth={ true }
                 buttonString={ 'Click for Overlayed Day Picker and Month Picker' }
               />
             </ExampleCard>
@@ -167,40 +180,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 507065a96d6f5d..7d08d9ef31f465 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
@@ -22,54 +22,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
             className="ms-DatePicker-dayPicker"
             id="DatePickerDay-dayPicker10"
           >
-            <div
-              className="ms-DatePicker-monthComponents"
-            >
-              <div
-                className="ms-DatePicker-navContainer"
-              >
-                <button
-                  aria-controls="DatePickerDay-dayPicker10"
-                  aria-label={undefined}
-                  className="ms-DatePicker-prevMonth js-prevMonth"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  tabIndex={0}
-                >
-                  <i
-                    aria-hidden={true}
-                    className=
-
-                        {
-                          display: inline-block;
-                        }
-                    data-icon-name="Up"
-                    role="presentation"
-                  />
-                </button>
-                <button
-                  aria-controls="DatePickerDay-dayPicker10"
-                  aria-label={undefined}
-                  className="ms-DatePicker-nextMonth js-nextMonth"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  tabIndex={0}
-                >
-                  <i
-                    aria-hidden={true}
-                    className=
-
-                        {
-                          display: inline-block;
-                        }
-                    data-icon-name="Down"
-                    role="presentation"
-                  />
-                </button>
-              </div>
-            </div>
             <div
               className="ms-DatePicker-header"
             >
@@ -77,6 +29,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                 aria-atomic="true"
                 aria-live="polite"
                 aria-relevant="text"
+                className={undefined}
                 id="DatePickerDay-monthAndYear11"
               >
                 <div
@@ -85,6 +38,54 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   February 2000
                 </div>
               </div>
+              <div
+                className="ms-DatePicker-monthComponents"
+              >
+                <div
+                  className="ms-DatePicker-navContainer"
+                >
+                  <button
+                    aria-controls="DatePickerDay-dayPicker10"
+                    aria-label={undefined}
+                    className="ms-DatePicker-prevMonth js-prevMonth"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <i
+                      aria-hidden={true}
+                      className=
+
+                          {
+                            display: inline-block;
+                          }
+                      data-icon-name="Up"
+                      role="presentation"
+                    />
+                  </button>
+                  <button
+                    aria-controls="DatePickerDay-dayPicker10"
+                    aria-label={undefined}
+                    className="ms-DatePicker-nextMonth js-nextMonth"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <i
+                      aria-hidden={true}
+                      className=
+
+                          {
+                            display: inline-block;
+                          }
+                      data-icon-name="Down"
+                      role="presentation"
+                    />
+                  </button>
+                </div>
+              </div>
             </div>
             <div
               aria-describedby={undefined}
@@ -170,8 +171,12 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                     </th>
                   </tr>
                 </thead>
-                <tbody>
+                <tbody
+                  onMouseLeave={undefined}
+                  onMouseUp={undefined}
+                >
                   <tr
+                    className={undefined}
                     role="row"
                   >
                     <td
@@ -185,6 +190,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -205,6 +214,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -225,6 +238,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id="DatePickerDay-active9"
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -245,6 +262,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -265,6 +286,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -285,6 +310,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -305,6 +334,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -316,6 +349,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                     </td>
                   </tr>
                   <tr
+                    className={undefined}
                     role="row"
                   >
                     <td
@@ -329,6 +363,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -349,6 +387,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -369,6 +411,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -389,6 +435,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -409,6 +459,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -429,6 +483,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -449,6 +507,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -460,6 +522,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                     </td>
                   </tr>
                   <tr
+                    className={undefined}
                     role="row"
                   >
                     <td
@@ -473,6 +536,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -493,6 +560,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -513,6 +584,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -533,6 +608,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -553,6 +632,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -573,6 +656,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -593,6 +680,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -604,6 +695,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                     </td>
                   </tr>
                   <tr
+                    className={undefined}
                     role="row"
                   >
                     <td
@@ -617,6 +709,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -637,6 +733,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -657,6 +757,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -677,6 +781,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -697,6 +805,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -717,6 +829,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -737,6 +853,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -748,6 +868,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                     </td>
                   </tr>
                   <tr
+                    className={undefined}
                     role="row"
                   >
                     <td
@@ -761,6 +882,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -781,6 +906,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -801,6 +930,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -821,6 +954,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -841,6 +978,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -861,6 +1002,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -881,6 +1026,10 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                         id={undefined}
                         onClick={[Function]}
                         onKeyDown={[Function]}
+                        onMouseDown={undefined}
+                        onMouseLeave={undefined}
+                        onMouseOver={undefined}
+                        onMouseUp={undefined}
                         role="gridcell"
                       >
                         <span
@@ -898,52 +1047,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
           <div
             className="ms-DatePicker-monthPicker"
           >
-            <div
-              className="ms-DatePicker-yearComponents"
-            >
-              <div
-                className="ms-DatePicker-navContainer"
-              >
-                <button
-                  aria-label={undefined}
-                  className="ms-DatePicker-prevYear js-prevYear"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  tabIndex={0}
-                >
-                  <i
-                    aria-hidden={true}
-                    className=
-
-                        {
-                          display: inline-block;
-                        }
-                    data-icon-name="Up"
-                    role="presentation"
-                  />
-                </button>
-                <button
-                  aria-label={undefined}
-                  className="ms-DatePicker-nextYear js-nextYear"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  tabIndex={0}
-                >
-                  <i
-                    aria-hidden={true}
-                    className=
-
-                        {
-                          display: inline-block;
-                        }
-                    data-icon-name="Down"
-                    role="presentation"
-                  />
-                </button>
-              </div>
-            </div>
             <div
               className="ms-DatePicker-header"
             >
@@ -952,6 +1055,52 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
               >
                 2000
               </div>
+              <div
+                className="ms-DatePicker-yearComponents"
+              >
+                <div
+                  className="ms-DatePicker-navContainer"
+                >
+                  <button
+                    aria-label={undefined}
+                    className="ms-DatePicker-prevYear js-prevYear"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <i
+                      aria-hidden={true}
+                      className=
+
+                          {
+                            display: inline-block;
+                          }
+                      data-icon-name="Up"
+                      role="presentation"
+                    />
+                  </button>
+                  <button
+                    aria-label={undefined}
+                    className="ms-DatePicker-nextYear js-nextYear"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <i
+                      aria-hidden={true}
+                      className=
+
+                          {
+                            display: inline-block;
+                          }
+                      data-icon-name="Down"
+                      role="presentation"
+                    />
+                  </button>
+                </div>
+              </div>
             </div>
             <div
               aria-describedby={undefined}
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 00000000000000..85f2b8d6247079
--- /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 00000000000000..1ce606e7118c01
--- /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 00000000000000..9cf4fbf40ffa9f
--- /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 0bfa49659fd2d0..b9fc9d8776f5b6 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
@@ -69,6 +69,7 @@ export interface ICalendarButtonExampleProps {
   isDayPickerVisible?: boolean;
   isMonthPickerVisible?: boolean;
   highlightCurrentMonth?: boolean;
+  highlightSelectedMonth?: boolean;
   buttonString?: string;
   showMonthPickerAsOverlay?: boolean;
 }
@@ -96,7 +97,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! }>
@@ -125,6 +126,7 @@ export class CalendarButtonExample extends React.Component<ICalendarButtonExampl
               strings={ DayPickerStrings }
               isDayPickerVisible={ this.props.isDayPickerVisible }
               highlightCurrentMonth={ this.props.highlightCurrentMonth }
+              highlightSelectedMonth={ this.props.highlightSelectedMonth }
               showMonthPickerAsOverlay={ this.props.showMonthPickerAsOverlay }
             />
           </Callout>
@@ -134,21 +136,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 d6819cbc42f4c7..59b966a8142add 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
@@ -58,7 +58,8 @@ const DayPickerStrings = {
     'S'
   ],
 
-  goToToday: 'Go to today'
+  goToToday: 'Go to today',
+  weekNumberFormatString: 'Week number {0}',
 };
 
 export interface ICalendarInlineExampleState {
@@ -73,6 +74,7 @@ export interface ICalendarInlineExampleProps {
   showGoToToday: boolean;
   showNavigateButtons?: boolean;
   highlightCurrentMonth?: boolean;
+  highlightSelectedMonth?: boolean;
   isDayPickerVisible?: boolean;
   showMonthPickerAsOverlay?: boolean;
   showWeekNumbers?: boolean;
@@ -98,7 +100,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'
     };
@@ -140,6 +142,7 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
           firstDayOfWeek={ this.props.firstDayOfWeek ? this.props.firstDayOfWeek : DayOfWeek.Sunday }
           strings={ DayPickerStrings }
           highlightCurrentMonth={ this.props.highlightCurrentMonth }
+          highlightSelectedMonth={ this.props.highlightSelectedMonth }
           isDayPickerVisible={ this.props.isDayPickerVisible }
           showMonthPickerAsOverlay={ this.props.showMonthPickerAsOverlay }
           showWeekNumbers={ this.props.showWeekNumbers }
@@ -158,13 +161,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);
@@ -185,7 +188,7 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
     });
   }
 
-  private _goNext() {
+  private _goNext(): void {
     this.setState((prevState: ICalendarInlineExampleState) => {
       const selectedDate = prevState.selectedDate || new Date();
       const dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday);
@@ -197,7 +200,7 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
     });
   }
 
-  private _onSelectDate(date: Date, dateRangeArray: Date[]) {
+  private _onSelectDate(date: Date, dateRangeArray: Date[]): void {
     this.setState((prevState: ICalendarInlineExampleState) => {
       return {
         selectedDate: date,
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 07bf90be3eb67b..737428170c92b7 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/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
index aad6f3163b7162..807243c1ca152d 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,
@@ -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();
@@ -139,13 +137,13 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
 
   }
 
-  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;
@@ -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;
@@ -399,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)) {
@@ -447,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/CalloutContent.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
index bab78ae1af389e..ace32b65844106 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
@@ -1,5 +1,3 @@
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
 import {
   styled
 } from '../../Utilities';
@@ -7,7 +5,7 @@ import { ICalloutProps } from './Callout.types';
 import { CalloutContentBase } from './CalloutContent.base';
 import { getStyles } from './CalloutContent.styles';
 
-export const CalloutContent = styled(
+export const CalloutContent: (props: ICalloutProps) => JSX.Element = styled(
   CalloutContentBase,
   getStyles
 );
\ No newline at end of file
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 1ad35f6e42f521..3da6221681baf6 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/docs/CalloutDonts.md b/packages/office-ui-fabric-react/src/components/Callout/docs/CalloutDonts.md
new file mode 100644
index 00000000000000..6520cbea8d16c0
--- /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 00000000000000..865bc50ab5309b
--- /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 00000000000000..87e096317a2b53
--- /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 2e1e81f02ac389..45043738e3ba49 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,6 +2,9 @@ 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 {
+  createRef
+} from 'office-ui-fabric-react/lib/Utilities';
 import { getTheme, FontWeights, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
 
 export interface ICalloutBasicExampleState {
@@ -50,7 +53,7 @@ const styles = mergeStyleSets({
 
 // Example code
 export class CalloutBasicExample extends React.Component<{}, ICalloutBasicExampleState> {
-  private _menuButtonElement: HTMLElement | null;
+  private _menuButtonElement = createRef<HTMLElement>();
 
   public constructor(props: {}) {
     super(props);
@@ -60,12 +63,15 @@ export class CalloutBasicExample extends React.Component<{}, ICalloutBasicExampl
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { isCalloutVisible } = this.state;
 
     return (
       <div>
-        <div className={ styles.buttonArea }>
+        <div
+          className={ styles.buttonArea }
+          ref={ this._menuButtonElement }
+        >
           <DefaultButton
             id='toggleCallout'
             onClick={ this._onShowMenuClicked }
@@ -78,7 +84,7 @@ export class CalloutBasicExample extends React.Component<{}, ICalloutBasicExampl
           ariaDescribedBy={ 'callout-description-1' }
           role={ 'alertdialog' }
           gapSpace={ 0 }
-          target={ this._menuButtonElement }
+          target={ this._menuButtonElement.value }
           onDismiss={ this._onCalloutDismiss }
           setInitialFocus={ true }
           hidden={ !this.state.isCalloutVisible }
@@ -103,13 +109,13 @@ export class CalloutBasicExample extends React.Component<{}, ICalloutBasicExampl
     );
   }
 
-  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 7ab156a067e62d..9766fe9c334e9f 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 d919a218c33834..3b15711380102c 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 f314cac7c8e3eb..ab4ab4ba1bee5b 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 98086779c03fd3..67f990ae9512aa 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 ba1d80ad79e0bf..30888e2f88819e 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
@@ -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,8 +131,8 @@ 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();
     }
   }
 
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 dad989bd8097fd..c9062e45d831bf 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 4a61e21ac50772..4a75535621cfcb 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
@@ -36,7 +36,7 @@ exports[`Checkbox renders Checkbox correctly 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: -1px;
         content: "";
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 00000000000000..e99215b63aee3d
--- /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 00000000000000..8d33482977d339
--- /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 00000000000000..74e2b405f59c81
--- /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 b92e108a7b1c13..4251dac6863706 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 16c81e39d6bf7e..63356f64380672 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 62bc6086d1d6ee..995efecd1ef249 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;
         }
@@ -356,7 +369,7 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
   }
 }
 
-:global(.ms-Fabric.is-focusVisible) .choiceFieldIsInFocus .choiceFieldWrapper {
+:global(.ms-Fabric--isFocusVisible) .choiceFieldIsInFocus .choiceFieldWrapper {
   @include focus-border(-2px, $ms-color-neutralPrimary, 1px, false);
 
   @include high-contrast {
@@ -364,13 +377,13 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
   }
 }
 
-:global(.ms-Fabric.is-focusVisible) .choiceFieldIsInFocus {
+:global(.ms-Fabric--isFocusVisible) .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.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
index ecc83d3b3cf3e8..d08aa2d6fcaead 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 d1c26163ae1215..4c02dc4057ab0a 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 00000000000000..7378ea3aeab40e
--- /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 00000000000000..1d665916a1165b
--- /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 00000000000000..5a1e8d0e3bf9b5
--- /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 cf5b0418f466b7..543890406cb91a 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 d4920a214f5f98..623cd42c49cc8f 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 08374d695f52ed..97c163d1a661a8 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 0500dd656c5f73..795f7e374a41a1 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 458642ae39327c..7be1558913add9 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 0a31984b9cfb20..9123fe2b073981 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 00000000000000..8e3f583b0ce98f
--- /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 00000000000000..e633c88b6505b0
--- /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 00000000000000..c498d3cc459ceb
--- /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 34cf5c556d1715..65bbb98b80f669 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.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
index ef8869b4ddd808..190d570f0490d5 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 (
@@ -170,7 +170,7 @@ export class ColorPicker extends BaseComponent<IColorPickerProps, IColorPickerSt
     }));
   }
 
-  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 f03942c79b580f..452a84ec84455a 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 2a40276926f1b3..0a3f784eccb18f 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 73b4ca591adc53..442568c66999cd 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/docs/ColorPickerOverview.md b/packages/office-ui-fabric-react/src/components/ColorPicker/docs/ColorPickerOverview.md
new file mode 100644
index 00000000000000..1bb98d4569d95c
--- /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 3976d0c44620e8..3440f19c328799 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.test.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx
index 2f7cf431240420..3b8edfd6c72588 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx
@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import * as ReactTestUtils from 'react-dom/test-utils';
 import { mount, ReactWrapper } from 'enzyme';
 import * as renderer from 'react-test-renderer';
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 a7986b1c5657d0..2b9ee9a83491b6 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
@@ -6,7 +6,8 @@ import { Label } from '../../Label';
 import { Checkbox } from '../../Checkbox';
 import {
   CommandButton,
-  IconButton
+  IconButton,
+  IButtonStyles
 } from '../../Button';
 import { IAutofill, Autofill } from '../Autofill/index';
 import {
@@ -87,11 +88,11 @@ interface IComboBoxOptionWrapperProps extends IComboBoxOption {
 // 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() {
+  public render(): React.ReactNode {
     return this.props.children;
   }
 
-  public shouldComponentUpdate(newProps: IComboBoxOptionWrapperProps) {
+  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 });
   }
@@ -187,12 +188,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 ||
@@ -238,8 +239,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         !isOpen &&
         this._focusInputAfterClose &&
         focused &&
-        this._autofill.value &&
-        document.activeElement !== this._autofill.value.inputElement)) {
+        this._autofill.current &&
+        document.activeElement !== this._autofill.current.inputElement)) {
       this.focus();
     }
 
@@ -269,15 +270,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,
@@ -297,7 +298,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);
@@ -405,8 +406,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Set focus on the input
    */
   public focus = (shouldOpenOnFocus?: boolean): void => {
-    if (this._autofill.value) {
-      this._autofill.value.focus();
+    if (this._autofill.current) {
+      this._autofill.current.focus();
       if (shouldOpenOnFocus) {
         this.setState({
           isOpen: true
@@ -431,7 +432,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @returns {string} - the updated value to set, if needed
    */
   private _onUpdateValueInAutofillWillReceiveProps = (): string | null => {
-    const comboBox = this._autofill.value;
+    const comboBox = this._autofill.current;
 
     if (!comboBox) {
       return null;
@@ -581,7 +582,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;
@@ -638,12 +639,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') {
@@ -750,7 +750,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;
@@ -798,7 +798,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,
@@ -812,8 +812,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * and set the focused state
    */
   private _select = (): void => {
-    if (this._autofill.value && this._autofill.value.inputElement) {
-      this._autofill.value.inputElement.select();
+    if (this._autofill.current && this._autofill.current.inputElement) {
+      this._autofill.current.inputElement.select();
     }
 
     if (!this.state.focused) {
@@ -864,8 +864,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;
@@ -874,7 +874,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);
       }
     }
   }
@@ -882,7 +882,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,
@@ -910,18 +910,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._autofill.value && this._autofill.value.isValueSelected &&
-              currentPendingValue.length + (this._autofill.value.selectionEnd! - this._autofill.value.selectionStart!) === pendingOptionText.length) ||
-            (this._autofill.value && this._autofill.value.inputElement && this._autofill.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 };
@@ -940,10 +940,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
@@ -969,13 +969,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 }>
@@ -1158,7 +1158,6 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       currentPendingValueValidIndexOnHover,
       currentPendingValueValidIndex,
       currentPendingValue,
-      selectedIndices
     } = this.state;
 
     return (
@@ -1188,7 +1187,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   /**
    * Scroll the selected element into view
    */
-  private _scrollIntoView() {
+  private _scrollIntoView(): void {
     const {
       onScrollToItem,
       scrollSelectedToTop
@@ -1197,22 +1196,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 &&
@@ -1226,7 +1224,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
           }
         }
 
-        this._selectedElement.value.offsetParent.scrollIntoView(alignToTop);
+        this._selectedElement.current.offsetParent.scrollIntoView(alignToTop);
       }
     }
   }
@@ -1241,9 +1239,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({
@@ -1265,8 +1263,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     // close the menu and focus the input
     this.setState({ isOpen: false });
 
-    if (this._autofill.value && this._focusInputAfterClose) {
-      this._autofill.value.focus();
+    if (this._autofill.current && this._focusInputAfterClose) {
+      this._autofill.current.focus();
     }
   }
 
@@ -1297,13 +1295,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._autofill.value) {
-      this._autofill.value.clear();
+    if (this._autofill.current) {
+      this._autofill.current.clear();
     }
     this._clearPendingInfo();
 
@@ -1323,7 +1320,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   /**
    * Clears the pending info state
    */
-  private _clearPendingInfo() {
+  private _clearPendingInfo(): void {
     this._setPendingInfo('' /* suggestedDisplayValue */, -1 /* currentPendingValueValidIndex */, '' /* currentPendingValue */);
   }
 
@@ -1333,7 +1330,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,
@@ -1346,7 +1343,7 @@ 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;
@@ -1365,9 +1362,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;
 
@@ -1400,7 +1396,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     }
   }
 
-  private _notifyPendingValueChanged(prevState: IComboBoxState) {
+  private _notifyPendingValueChanged(prevState: IComboBoxState): void {
     const { onPendingValueChanged } = this.props;
 
     if (!onPendingValueChanged) {
@@ -1438,7 +1434,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
@@ -1458,8 +1454,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     const {
       isOpen,
       currentOptions,
-      currentPendingValueValidIndexOnHover,
-      selectedIndices
+      currentPendingValueValidIndexOnHover
     } = this.state;
 
     if (disabled) {
@@ -1471,7 +1466,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
@@ -1499,7 +1494,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
@@ -1650,7 +1645,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     ev.preventDefault();
   }
 
-  private _onOptionMouseEnter(index: number) {
+  private _onOptionMouseEnter(index: number): void {
     if (!this._isScrollIdle) {
       return;
     }
@@ -1660,7 +1655,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;
     }
@@ -1685,7 +1680,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) {
@@ -1734,7 +1729,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);
   }
@@ -1743,7 +1738,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;
 
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 636e96c4f96fe0..af659255ea9afa 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
@@ -53,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 5ef42f2043090c..264a0698ee632e 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 fc855b7ed0bde2..cd78735bf8aed4 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 211b3f2f3ca293..434183163a36f9 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
@@ -194,7 +194,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
           &::-moz-focus-inner {
             border: 0;
           }
-          .ms-Fabric.is-focusVisible &:focus:after {
+          .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #ffffff;
             bottom: 0px;
             content: "";
@@ -205,7 +205,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
             top: 0px;
             z-index: 1;
           }
-          @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
             border: none;
             bottom: -2px;
             left: -2px;
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 00000000000000..a36e5f39639a4d
--- /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 00000000000000..f610e8facabd7d
--- /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 00000000000000..447c617239e24f
--- /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 f66f68146c860e..6bcecaf358a839 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 6f1ae3b4568995..134d4fecc1978f 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 2f769b022acee9..f6de37f1b487b4 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';
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 223dc0968e366e..3456b7e577bf4e 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 e8ec7b2d848022..04b10847c7cd20 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/docs/CommandBarDonts.md b/packages/office-ui-fabric-react/src/components/CommandBar/docs/CommandBarDonts.md
new file mode 100644
index 00000000000000..f955732f340005
--- /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 00000000000000..d78a921b03f729
--- /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 00000000000000..7ee4004822b8f8
--- /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 85e85d209c54a6..43d2d538c1abe5 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 0567f01908c54c..d13168457c96e3 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 47ede9e27af466..49c7bab72c934e 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 621eb6a619ebad..5463c487adb105 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
@@ -116,8 +116,8 @@ export const getItemClassNames = memoizeFunction((
         selectors: {
           ':hover': styles.rootHovered,
           ':active': styles.rootPressed,
-          '.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
-          '.ms-Fabric.is-focusVisible &:hover': { background: 'inherit;' }
+          '.ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus:hover': styles.rootFocused,
+          '.ms-Fabric--isFocusVisible &:hover': { background: 'inherit;' }
         }
       }],
     ],
@@ -135,8 +135,8 @@ export const getItemClassNames = memoizeFunction((
         selectors: {
           ':hover': styles.rootHovered,
           ':active': styles.rootPressed,
-          '.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
-          '.ms-Fabric.is-focusVisible &:hover': { background: 'inherit;' }
+          '.ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus:hover': styles.rootFocused,
+          '.ms-Fabric--isFocusVisible &:hover': { background: 'inherit;' }
         }
       }]
     ],
@@ -157,8 +157,8 @@ export const getItemClassNames = memoizeFunction((
         selectors: {
           ':hover': styles.rootHovered,
           ':active': styles.rootPressed,
-          '.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
-          '.ms-Fabric.is-focusVisible &:hover': { background: 'inherit;' }
+          '.ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus:hover': styles.rootFocused,
+          '.ms-Fabric--isFocusVisible &:hover': { background: 'inherit;' }
         }
       }]
     ],
@@ -202,7 +202,7 @@ export const getItemClassNames = memoizeFunction((
       styles.splitButtonFlexContainer,
       !disabled && !checked && [{
         selectors: {
-          '.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
+          '.ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &: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 90244c543cde17..424bcd7e8c7507 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
@@ -50,8 +50,8 @@ export const getMenuItemStyles = memoizeFunction((
     },
     root: [
       getFocusStyle(theme),
+      fonts.medium,
       {
-        font: 'inherit',
         color: 'inherit',
         backgroundColor: 'transparent',
         border: 'none',
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 e4d912aa78495a..48505643659b01 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 80f200115260ee..447d4f49ecd82d 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -125,7 +125,7 @@ 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!);
@@ -150,7 +150,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   }
 
   // Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
-  public componentDidMount() {
+  public componentDidMount(): void {
     if (!this.props.hidden) {
       this._onMenuOpened();
     }
@@ -793,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;
     }
 
@@ -858,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 7960f87d042ef8..962cf17290b675 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
@@ -271,6 +271,11 @@ export interface IContextualMenuItem {
    */
   iconProps?: IIconProps;
 
+  /**
+   * Custom render function for the menu item icon
+   */
+  onRenderIcon?: IRenderFunction<IContextualMenuItemProps>;
+
   /**
    * Props that go to the IconComponent used for the chevron.
    */
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 667d14bae15407..49171cbb873839 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
@@ -1,12 +1,16 @@
 import * as React from 'react';
 import { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';
-import { IContextualMenuItem } from './ContextualMenu.types';
-import { IMenuItemClassNames } from './ContextualMenu.classNames';
 import { getRTL } from '../../Utilities';
 import { Icon } from '../../Icon';
 import { IContextualMenuItemProps } from './ContextualMenuItem.types';
 
-const renderItemIcon = ({ hasIcons, item, classNames }: IContextualMenuItemProps) => {
+const renderItemIcon = (props: IContextualMenuItemProps) => {
+  const {
+    item,
+    hasIcons,
+    classNames
+  } = props;
+
   // Only present to allow continued use of item.icon which is deprecated.
   const { iconProps, icon } = item;
 
@@ -14,6 +18,12 @@ const renderItemIcon = ({ hasIcons, item, classNames }: IContextualMenuItemProps
     return null;
   }
 
+  if (item.onRenderIcon) {
+    return (
+      item.onRenderIcon(props)
+    );
+  }
+
   if (iconProps) {
     return <Icon { ...iconProps } className={ classNames.icon } />;
   }
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 eee454bb403db5..1307bd2ae58f95 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/docs/ContextualMenuDonts.md b/packages/office-ui-fabric-react/src/components/ContextualMenu/docs/ContextualMenuDonts.md
new file mode 100644
index 00000000000000..20c116b591dcea
--- /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 00000000000000..bd79da4125bfa5
--- /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 00000000000000..5fe6dc43f8b9a6
--- /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 11eb5e116fa9ed..b3f9ac39554ac3 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 1eed388377c904..3c0e11b2f977fb 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 583e6a1b07f03f..0bfb64cf8baad0 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 68773429a0d2f2..956d8b2677db82 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 d41009e19f630b..5d00adf7062e89 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 648b0603fec524..f39a3420d171ff 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 779121c596699a..5d0b3f390c4ff1 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 159d6f6a4922f8..56930d22e7f638 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
@@ -1,8 +1,12 @@
 import * as React from 'react';
-import { ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { ContextualMenuItemType, IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { Callout } from 'office-ui-fabric-react/lib/Callout';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import './ContextualMenuExample.scss';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import * as stylesImport from './ContextualMenuExample.scss';
+
+// tslint:disable-next-line:no-any
+const styles: any = stylesImport;
 
 export class ContextualMenuIconExample extends React.Component<{}, { showCallout: boolean }> {
 
@@ -13,7 +17,7 @@ export class ContextualMenuIconExample extends React.Component<{}, { showCallout
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { showCallout } = this.state;
 
     return (
@@ -24,6 +28,18 @@ export class ContextualMenuIconExample extends React.Component<{}, { showCallout
           menuProps={ {
             shouldFocusOnMount: true,
             items: [
+              {
+                key: 'openInWord',
+                name: 'Open in Word',
+                onRenderIcon: (props: IContextualMenuItemProps) => {
+                  return (
+                    <span className={ styles.iconContainer }>
+                      <Icon iconName={ 'WordLogoFill16' } className={ styles.logoFillIcon } />
+                      <Icon iconName={ 'WordLogo16' } className={ styles.logoIcon } />
+                    </span>
+                  );
+                }
+              },
               {
                 key: 'newItem',
                 iconProps: {
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 c78318860195d5..5459e9e4fd2623 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 696a02cce5a650..46074f77c25e63 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 957b11706bcddc..53477392d2102c 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/ContextualMenu/examples/ContextualMenuExample.scss b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenuExample.scss
index 10e6739218cce7..84e279f3888bbd 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenuExample.scss
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenuExample.scss
@@ -72,3 +72,21 @@
     max-width: 50%;
   }
 }
+
+.iconContainer {
+  position: relative;
+  margin: 0 4px;
+  height: 32px;
+  width: 14px;
+}
+
+.logoFillIcon, .logoIcon {
+  position: absolute;
+  left: 0;
+  right: 0;
+  color: $ms-color-themeDarkAlt;
+}
+
+.logoFillIcon {
+  color: #FFFFFF;
+}
\ No newline at end of file
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 ea2d0cde4d7aca..e2e5e35d7074c7 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
@@ -112,6 +112,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     showMonthPickerAsOverlay: false,
     strings: DEFAULT_STRINGS,
     highlightCurrentMonth: false,
+    highlightSelectedMonth: false,
     borderless: false,
     pickerAriaLabel: 'Calender',
     showWeekNumbers: false,
@@ -140,7 +141,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 +184,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const {
       firstDayOfWeek,
       strings,
@@ -234,7 +235,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
             readOnly={ !allowTextInput }
             value={ formattedDate }
             componentRef={ this._textField }
-            role={ allowTextInput ? 'combobox' : 'menu' }
+            role={ 'button' }
           />
         </div>
         { isDatePickerShown && (
@@ -245,7 +246,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 }
@@ -261,6 +262,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
               firstDayOfWeek={ firstDayOfWeek }
               strings={ strings! }
               highlightCurrentMonth={ this.props.highlightCurrentMonth }
+              highlightSelectedMonth={ this.props.highlightSelectedMonth }
               showWeekNumbers={ this.props.showWeekNumbers }
               firstWeekOfYear={ this.props.firstWeekOfYear }
               showGoToToday={ this.props.showGoToToday }
@@ -276,8 +278,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 +303,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 +383,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 +410,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/DatePicker.types.ts b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts
index e9f3528982bc44..1145fea10a1132 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts
@@ -122,6 +122,12 @@ export interface IDatePickerProps extends React.Props<DatePicker> {
   */
   highlightCurrentMonth?: boolean;
 
+  /**
+  * Whether the month picker should highlight the selected month
+  * @defaultvalue false
+  */
+  highlightSelectedMonth?: boolean;
+
   /**
   * Whether the calendar should show the week number (weeks 1 to 53) before each week row
   * @defaultvalue false
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 a0fff0cacf66a0..588670c193b617 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 889c76539f9c30..7e99f740e15d86 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
@@ -32,7 +32,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
             placeholder={undefined}
             readOnly={true}
             required={false}
-            role="menu"
+            role="button"
             type="text"
             value=""
           />
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 00000000000000..85f2b8d6247079
--- /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 00000000000000..171ad514160e0d
--- /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 00000000000000..4a3478a0cfe812
--- /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 32123e505eefca..463b9dc6794247 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 b47e2b3af5962a..546c205a45713e 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 b9d7a52ada4eee..e9e69fc06ebd13 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 266741888f34f0..b0b420abaaad69 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 393ae9ed5224ad..2e3c68fa5a52a0 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 4927094cbd7b25..9d2e4137ded603 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: $listItemHeaderHoveredColor;
+      background: $listHeaderBackgroundHoveredColor;
     }
 
     &:active {
-      background: $listItemHeaderActivatedColor;
+      background: $listHeaderBackgroundPressedColor;
     }
   }
 
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 472d33546005ed..57ccecef075c92 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 d1ce5425fac5fc..25a76aa132e933 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;
 
@@ -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 33137cbe29fcf3..acd4fd42ca8c01 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 2dad5a197e3a6c..bd7d0addb188ee 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 262aa48d3da731..92f1c6a7249494 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 65e476bff50460..a0364df78a7653 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,
@@ -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 49428fe9b3feca..907e5617571989 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 90f4e7dbc763f1..7a92d08978315d 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/docs/DetailsListDonts.md b/packages/office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md
new file mode 100644
index 00000000000000..ed191105f1ba01
--- /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 00000000000000..6aceae28160a1f
--- /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 00000000000000..0cac7623ae5283
--- /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 ad7dbb40be1165..f3be1c518bf80c 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,
@@ -144,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) {
@@ -442,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)
@@ -450,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)
@@ -458,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({
@@ -483,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;
 
@@ -565,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)
     });
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 5d4ce186686a89..fabb597bd6c338 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 a35388a1e229b2..75b098dd73fc79 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 8eb95497aa6c0a..207d013e2653c1 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 e7552c5374c471..494c5596fd2957 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 c1481847de2ffb..11559d08f54282 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 67bf30c6857983..2bf18feaa202d6 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 {
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 7b60397e17cc53..dfc6dc79749a5b 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 9db03c9fe80666..59ffbeab088a26 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 c1b19c2ef52e24..1e29b2179402b3 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 54e5220ea7ddb3..7cc3cfd92d632c 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 21b58689ced00f..4f45ee0719d27a 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 a956ee6dec9490..0290dd13f80112 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 ca9db4ff5bafa4..773fe5a8b1dcb5 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 a7fd2c7b80515e..9bd06d6c592229 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 00000000000000..23820e70744aab
--- /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 00000000000000..6d594c3a4f855b
--- /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 00000000000000..1ab5ac6894b767
--- /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 01f777e885cc61..484033cc672211 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 00000000000000..7adf00e231ba11
--- /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 00000000000000..93d2dfb5889d07
--- /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 00000000000000..a5d8dd0e7a369a
--- /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 00000000000000..556c7e711f1913
--- /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 a12b5c06da64f2..a580578c24d966 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 999660bb2130e5..f61066a58cbdb3 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 045fb0fd3a660d..e21331929fb347 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 73957cd5537eb6..71e3a2623324c4 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 a39d134b7c1587..9c97de8423c4c9 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 bc6fff48f1906c..8fabd691477f01 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 11dd49b7b1862f..99d143bd28340f 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 704d3fed94dd94..5c9349dfebbaf1 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 127222419f41fe..61b57069757899 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
index 3aac5f51d60d99..8117005e9a70fd 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.test.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
-
-import { DocumentCard } from './DocumentCard';
 import { DocumentCardTitle } from './DocumentCardTitle';
-import { DocumentCardPreview } from './DocumentCardPreview';
-import { DocumentCardActivity } from './DocumentCardActivity';
 
 const veryLongTitle = 'This is obviously a very very very very very very very very very very loooooooooooooooooooooooooooooooooooooooooooooooong title that will need to be truncated';
 
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 1db79e315b5b3a..44ce6f3341f5a7 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 00000000000000..91e89379f28c2b
--- /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 00000000000000..78f202920bc2be
--- /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 00000000000000..938cdc0ee0b819
--- /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 64216d54d58d23..a6b84455568610 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 dd04ff54c3fac8..6597182098baea 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 494caa0a604a9a..dcaf4ed424db32 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 265e0effa99e10..66cba6b8feecd4 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 616e10c581c366..66c9ff5658536f 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
@@ -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 f7ffc94d031b4b..f273176f4c8213 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/docs/DropdownDonts.md b/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownDonts.md
new file mode 100644
index 00000000000000..b08d6752b763d2
--- /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 00000000000000..77e8c0749db6bb
--- /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 00000000000000..c88e66c0bce7ec
--- /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 100ec542237505..d6ef8866243fee 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 49cd32f927c90a..c61bd363d35cd5 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 1801d9b39959c1..3ba1e2b031a01b 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.styles.ts b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
index 746a7facdcbc9d..68c9e588f8e205 100644
--- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts
@@ -1,8 +1,3 @@
-
-import {
-  ITheme,
-  mergeStyles
-} from '../../Styling';
 import { IFabricStyleProps, IFabricStyles } from './Fabric.types';
 
 const inheritFont = { fontFamily: 'inherit' };
@@ -15,11 +10,13 @@ export const getStyles = (props: IFabricStyleProps): IFabricStyles => {
   const {
     theme,
     className,
+    isFocusVisible
   } = props;
 
   return {
     root: [
       'ms-Fabric',
+      isFocusVisible && 'is-focusVisible',
       theme.fonts.medium,
       {
         color: theme.palette.neutralPrimary,
diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx
new file mode 100644
index 00000000000000..5aaebd7e9c05c3
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { Fabric } from './Fabric';
+
+describe('Fabric', () => {
+  it('renders correctly', () => {
+    const component = renderer.create(
+      <Fabric>test</Fabric>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+});
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 6590c9d0054559..9f4a1de1b5d667 100644
--- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx
+++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx
@@ -1,31 +1,63 @@
 import * as React from 'react';
 import {
   BaseComponent,
+  createRef,
   customizable,
   getNativeProps,
   divProperties,
-  createRef,
-  classNamesFunction
+  classNamesFunction,
+  getWindow,
+  isDirectionalKeyCode
 } from '../../Utilities';
-import {
-  ITheme,
-} from '../../Styling';
 import { getStyles } from './Fabric.styles';
 import { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types';
 
 const getClassNames = classNamesFunction<IFabricStyleProps, IFabricStyles>();
 
 @customizable('Fabric', ['theme'])
-export class Fabric extends BaseComponent<IFabricProps, {}> {
+export class Fabric extends BaseComponent<IFabricProps, {
+  isFocusVisible: boolean;
+}> {
+  private _rootElement = createRef<HTMLDivElement>();
+
+  constructor(props: IFabricProps) {
+    super(props);
+    this.state = { isFocusVisible: false };
+  }
+
   public render() {
-    const classNames = getClassNames(getStyles, this.props as IFabricStyleProps);
+    const classNames = getClassNames(getStyles,
+      {
+        ...this.props as IFabricStyleProps,
+        ...this.state
+      });
     const divProps = getNativeProps(this.props, divProperties);
 
     return (
       <div
         { ...divProps }
         className={ classNames.root }
+        ref={ this._rootElement }
       />
     );
   }
+
+  public componentDidMount(): void {
+    const win = getWindow(this._rootElement.value);
+
+    if (win) {
+      this._events.on(win, 'mousedown', this._onMouseDown, true);
+      this._events.on(win, 'keydown', this._onKeyDown, true);
+    }
+  }
+
+  private _onMouseDown = (ev: MouseEvent): void => {
+    this.setState({ isFocusVisible: false });
+  }
+
+  private _onKeyDown = (ev: KeyboardEvent): void => {
+    if (isDirectionalKeyCode(ev.which)) {
+      this.setState({ isFocusVisible: 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
index 7a521e18e5bad3..9949f90bb89a15 100644
--- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.types.ts
@@ -7,6 +7,7 @@ export interface IFabricProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export interface IFabricStyleProps extends IFabricProps {
   theme: ITheme;
+  isFocusVisible: boolean;
 }
 
 export interface IFabricStyles {
diff --git a/packages/office-ui-fabric-react/src/components/Fabric/__snapshots__/Fabric.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Fabric/__snapshots__/Fabric.test.tsx.snap
new file mode 100644
index 00000000000000..12987076b58890
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Fabric/__snapshots__/Fabric.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fabric renders correctly 1`] = `
+<div
+  className=
+      ms-Fabric
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        color: #333333;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+      }
+      & button {
+        font-family: inherit;
+      }
+      & input {
+        font-family: inherit;
+      }
+      & textarea {
+        font-family: inherit;
+      }
+      button {
+        overflow: visible;
+      }
+>
+  test
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/Fabric/index.ts b/packages/office-ui-fabric-react/src/components/Fabric/index.ts
index 3852b24a3fb89d..5ada46526bbabc 100644
--- a/packages/office-ui-fabric-react/src/components/Fabric/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Fabric/index.ts
@@ -1 +1,2 @@
 export * from './Fabric';
+export * from './Fabric.types';
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
index 3fc6b70cf06a37..5793d9986cfaa4 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import * as renderer from 'react-test-renderer';
 import { mount, shallow } from 'enzyme';
 import { setRTL } from '../../Utilities';
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 4552419f566528..7b06adfae94ae6 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 383c0282f2e09e..3e48b87d7959ad 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 816ddf578e3f7f..d6808fa52e1065 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 a75223fb0d25fa..a0fe083dbe4566 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
@@ -207,7 +207,7 @@ exports[`Facepile renders Facepile correctly 1`] = `
             &::-moz-focus-inner {
               border: 0;
             }
-            .ms-Fabric.is-focusVisible &:focus:after {
+            .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #ffffff;
               bottom: 0px;
               content: "";
@@ -218,7 +218,7 @@ exports[`Facepile renders Facepile correctly 1`] = `
               top: 0px;
               z-index: 1;
             }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
               border: none;
               bottom: -2px;
               left: -2px;
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 00000000000000..3b134de7609698
--- /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 00000000000000..450077a4d2a137
--- /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 00000000000000..0a6d45d803c7b4
--- /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 c153c8538b4020..4a86170129ff3b 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 691190302c099e..6449710eaa22f3 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 4b5ee203e29e48..e7161c36f80fd1 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 2fac102b5b5a36..ce617e2f6437a5 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 3319557f02d336..1c3317f5dd9e0a 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();
@@ -75,12 +75,16 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
       }
     }
 
-    if (!ignoreExternalFocusing && this._previouslyFocusedElement && typeof this._previouslyFocusedElement.focus === 'function') {
+    const activeElement = document.activeElement as HTMLElement;
+    if (!ignoreExternalFocusing &&
+      this._previouslyFocusedElement &&
+      typeof this._previouslyFocusedElement.focus === 'function' &&
+      elementContains(this._root.value, activeElement)) {
       focusAsync(this._previouslyFocusedElement);
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { className, ariaLabelledBy } = this.props;
     const divProps = getNativeProps(this.props, divProperties);
 
@@ -108,11 +112,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 +138,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 +156,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 +168,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 3eaa6ec90c340a..3d63fb232441db 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 00000000000000..33b632403e555e
--- /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 c235864294499d..82dba91bf0b8ab 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 6f3531818f0877..80cf5a5fd0152b 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 0eee480b8cb7af..60b46d16b903ae 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 4c726df79e49e2..9d744081c97619 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 5392191efeafaa..b4c426aa1d69d1 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;
   }
 
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 37c220e477b261..ede76728ed76be 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 &&
@@ -159,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;
@@ -218,7 +218,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     } else {
       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;
           break;
@@ -250,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;
     }
@@ -301,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;
@@ -395,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;
@@ -408,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;
@@ -433,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;
     }
 
@@ -452,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;
   }
@@ -461,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;
@@ -501,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;
     }
 
@@ -514,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) {
@@ -548,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);
       }
     }
 
@@ -718,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;
       }
@@ -732,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;
       }
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 7443be6a2b82c0..023a052c508171 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 00000000000000..f622f7eafcb24b
--- /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 d5f93fdae9cc4b..fb63dd475f8b17 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 c26277b33bc58c..c41477de97a2f6 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 1ceaf2e425ea82..c4d2126105c1a5 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 2fb2a8a02e843f..1810dc9a2b8cfb 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 f30a12023f9582..c4464105cfbdd4 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 8f9e61fef19c29..a3dea1d7c1eff8 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 b42da1572c0e1f..840b951897b312 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 df8228539ddb0a..f746b33c0faddd 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 26a4f75f7cb402..ba57b6c882b68c 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 00000000000000..3fe7044a88a779
--- /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 4f4073aa848422..7220c30af50af1 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 ab54727668f33e..ae4042579def4d 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 05e07d1c3bff19..7652fb732e2dfb 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 7e04bc43247259..ea92999f58a99a 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,
@@ -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,7 +136,7 @@ export class HoverCard extends BaseComponent<IHoverCardProps, IHoverCardState> {
         return target as HTMLElement;
 
       default:
-        return this._hoverCard.value || undefined;
+        return this._hoverCard.current || undefined;
     }
   }
 
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 20eff65a396328..ea75ee0b8ae95f 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 00000000000000..b68e2622fee7c2
--- /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 2968e13027b82a..c26c02f5d6ff89 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/HoverCard/examples/HoverCard.Target.Example.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx
index 671e238b8d6c98..b77345d6100d55 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx
@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* 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 278e099688bf6f..d2ff9a2ee6a1c3 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 c107523257b8ec..64f96cfa828188 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 00000000000000..6bd5aeb9603c0f
--- /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 00000000000000..6b47d1a010ea1c
--- /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 00000000000000..3b1789c9c78023
--- /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 f05b207a3ab45b..c8e6ca72f401b3 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 d4f9bf420b22d1..0164d815d7d226 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 24d3e04bb266c1..337081fbc16c0d 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 8303d934b47c66..4e6735f1e2d6b5 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 5d13ac2caf02a3..44404536221d30 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 5c68075f7286a2..14f2ea779f394a 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';
@@ -11,8 +9,6 @@ import { ImageFit } from './Image.types';
 
 /* tslint:disable:no-unused-variable */
 const testImage1x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=';
-const testImage1x2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWP4////fyYGBgYGAB32A/+PRyXoAAAAAElFTkSuQmCC';
-const testImage2x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQImWP8////fwYGBgYAGfgD/hEzDhoAAAAASUVORK5CYII=';
 const brokenImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=';
 
 describe('Image', () => {
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 d09b82965ceb22..4c6f7188beffa4 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 00000000000000..81f37145e1ee60
--- /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 00000000000000..0a42ddaf626b4b
--- /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 00000000000000..33c14c2dd74deb
--- /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 cd578c92bf63d4..b7b8d562b2ce81 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 4205b03e12b5eb..f09c7cab84078a 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 cc7413420b627f..d0bd820c33d78e 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 12f31376505f8d..271b5a138c68d3 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 d16f5779de52f2..592272df632e82 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 288bdfaadbda05..5663ca0222611d 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 ffad9139703d76..5618c9bb7d2275 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 32aa491fbbc1c8..73cbe8c6bcce54 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';
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 6df484a69cb705..4189663243207d 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 0a4a56da9b28e2..11f948210ffae4 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 00000000000000..33370b8e68f5d0
--- /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 00000000000000..7269633705a337
--- /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 00000000000000..7cbdb2ed43e853
--- /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 791fa98d0f960c..8d0f66c54b5446 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 b20038037b429d..fa98fab4fde761 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
@@ -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) {
@@ -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 c749b94e1ed7c0..9794524990eec4 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 054c08096c93d1..7a8f81aa60af24 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 e36eb289ae95fd..4aa50f53da49c6 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/LayerPage.tsx
@@ -4,6 +4,7 @@ import {
   ExampleCard,
   IComponentDemoPageProps,
   ComponentPage,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { LayerBasicExample } from './examples/Layer.Basic.Example';
@@ -17,11 +18,12 @@ const LayerHostedExampleCode = require('!raw-loader!office-ui-fabric-react/src/c
 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 }>
@@ -30,7 +32,7 @@ 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={ LayerHostedExampleCode }>
+            <ExampleCard title='Using Customizer to control the default layer behavior' code={ LayerCustomizedExampleCode }>
               <LayerCustomizedExample />
             </ExampleCard>
           </div>
@@ -43,37 +45,22 @@ 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={
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 00000000000000..ddf4a091d5b6d4
--- /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 00000000000000..e0e00837259504
--- /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 00000000000000..cb8eb333474891
--- /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 535c03f86259ae..8e2fffbd32cc0d 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.Hosted.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx
index 3844df57722294..abab0b9ad46f2c 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 255adf0716bb47..d770b1a17d940f 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 109783f3195f69..afa26bd42905b0 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 86e45618b070be..caecfff31d25a1 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/__snapshots__/Link.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap
index 8f42c3fe0446fc..9ff9a394be772c 100644
--- a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Link renders Link correctly 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: 1px;
         content: "";
@@ -54,7 +54,7 @@ exports[`Link renders Link with a custom class name 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: 1px;
         content: "";
@@ -109,7 +109,7 @@ exports[`Link renders Link with no href as a button 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: 1px;
         content: "";
@@ -148,7 +148,7 @@ exports[`Link renders disabled Link correctly 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: 1px;
         content: "";
@@ -201,7 +201,7 @@ exports[`Link renders disabled Link with no href as a button correctly 1`] = `
       &::-moz-focus-inner {
         border: 0;
       }
-      .ms-Fabric.is-focusVisible &:focus:after {
+      .ms-Fabric--isFocusVisible &:focus:after {
         border: 1px solid #ffffff;
         bottom: 1px;
         content: "";
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 00000000000000..8209bbe334a41e
--- /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 00000000000000..d868102317df76
--- /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 00000000000000..405f318bc8740d
--- /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 50df2c37b25edd..d3073e4c2a9a23 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 9e8a2749e7cab9..49581283a9479e 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 8f9ba43d51e08f..941d82a209724a 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 00000000000000..8ddcc1743928c3
--- /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 a55ce1d62f3091..fae71f294ce3b4 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 bff85a17d7a2c8..eb8ba99f3c6d44 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.scss b/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.scss
index bcad7c45fd5c3b..91e69d8fe1fc45 100644
--- a/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.scss
+++ b/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.scss
@@ -30,7 +30,7 @@
     bottom: 2px;
   }
 
-  .ms-Fabric.is-focusVisible .ms-ListGridExample-tile:focus:after {
+  .ms-Fabric--isFocusVisible .ms-ListGridExample-tile:focus:after {
     content: '';
     position: absolute;
     left: 2px;
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 0d735d05bca597..184a1ba77606e2 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 1a5abcb5578c12..5c509796ffcb51 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 d1e497e7ba5cbc..652663238ce532 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 00000000000000..2a3b08b9fe6199
--- /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 4396c07dabcf4f..3e256ae89093c0 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 f64f3663324f86..ed70283be509ab 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';
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 c8ad8e9461a731..9f3b92774bcdcc 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 00000000000000..c6395569d1846e
--- /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 00000000000000..e81210d598b05b
--- /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 00000000000000..b7ecf68c232b5c
--- /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 635a65ff412c4b..41d21eb32b3dea 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 99cdb11f5a5ac1..548a195cc62b45 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 2e9c33c7742fe2..9650fdf89cf591 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 00000000000000..55106e03d7405f
--- /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 00000000000000..45af682a258336
--- /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 00000000000000..c83f71cbf1a210
--- /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 89520fea9692b2..8806ec82f70ebc 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 1501432da5fccd..5edfd2c966d486 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/Nav.types.ts b/packages/office-ui-fabric-react/src/components/Nav/Nav.types.ts
index ff4b7897c4b517..cc269620a9eee9 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.types.ts
@@ -155,7 +155,8 @@ export interface INavLink {
   icon?: string;
 
   /**
-   * Classname to apply to the icon link.
+   * Deprecated. Use iconProps.className instead.
+   * @deprecated
    */
   iconClassName?: string;
 
@@ -346,4 +347,4 @@ export interface INavStyles {
    * Style set for the group content div inside group.
    */
   groupContent: IStyle;
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/Nav/NavPage.tsx b/packages/office-ui-fabric-react/src/components/Nav/NavPage.tsx
index 92bd70d1a9d991..ee9fa4554740ec 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 b1e5e6fd2fb617..3122c60f6a9aac 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
@@ -117,7 +117,7 @@ exports[`Nav renders Nav correctly 1`] = `
                     &::-moz-focus-inner {
                       border: 0;
                     }
-                    .ms-Fabric.is-focusVisible &:focus:after {
+                    .ms-Fabric--isFocusVisible &:focus:after {
                       border: 1px solid #ffffff;
                       bottom: 1px;
                       content: "";
@@ -128,7 +128,7 @@ exports[`Nav renders Nav correctly 1`] = `
                       top: 1px;
                       z-index: 1;
                     }
-                    @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                    @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                       border: none;
                       bottom: -2px;
                       left: -2px;
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 00000000000000..11c5e84cb4a8d2
--- /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 00000000000000..f78fdfc189c63f
--- /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 00000000000000..ff696fb9a20187
--- /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 28155264782779..19afa0f9554f23 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 ef575a17e1182a..7d570bfad55e0e 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 1990227e0adc26..f9504949347211 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 08bf29c79d3b78..b961f7efb369c6 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 ea1d653ad93d8f..29804e41645880 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,
@@ -54,6 +53,7 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
     } else {
       Tag = FocusZone;
       uniqueComponentProps = {
+        ...getNativeProps(this.props, divProperties),
         ...focusZoneProps,
         componentRef: this._focusZone,
         direction: vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal
@@ -87,11 +87,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 +110,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 c003673055fb11..08c7b3415f1780 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,19 +18,18 @@ 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>
         }
+        allowNativeProps={ true }
         exampleCards={
           <LayerHost>
             <ExampleCard title='OverflowSet Basic Example' code={ OverflowSetBasicExampleCode }>
@@ -52,7 +52,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 00000000000000..e1c3374a3e46b5
--- /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 0e6fdeacb756f4..2a6cfc49372ab0 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 470d5d9501620d..721cf36584ed05 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 a8d6b8571bf4ea..0cdee0a8c9607b 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';
@@ -9,12 +7,10 @@ import {
   IOverflowSetItemProps,
   OverflowSet
 } from 'office-ui-fabric-react/lib/OverflowSet';
-/* tslint:disable-next-line:no-unused-variable */
-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 baa25fc6f8f536..0b5e62c45b5307 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 56b3d0c1ffaf65..8569317e569c04 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 00000000000000..ea35603f5308a8
--- /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 00000000000000..aa2ae083c7b7ec
--- /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 00000000000000..c20c1418e663a2
--- /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 cba3b6f29748b4..072d33413af5d0 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 f44d9952d98f19..ad4310de7e077e 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 342b065e1f3979..1ed46a5d3c04e4 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 00184ce657ec4b..08ee0f55276c0d 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',
@@ -286,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>
     );
@@ -308,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 11921546e8e4d8..3b2921bd5a5787 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 00000000000000..ff26f72a43a527
--- /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 00000000000000..5772bada9a91dd
--- /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 00000000000000..b658e5f59ec849
--- /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 8a715860124344..f81b117564ec3f 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 9269f6e81f9c1f..56f6b13cbd043a 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 ebae074445ab29..6a055c4f3cba68 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 e9f81fc3b292c6..380dbb0fbbd8af 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 8f1b57da41804c..4fd8e436d6d0df 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 afa1b898d6f7f0..25ce479dcef15f 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 2c23cb51c71624..1a95503f54fb46 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 0ecb89095af436..ea8b4aeda8c96a 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 68c5573a2ca411..f24e59ef2ace2a 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 23fa0bec46f29a..481527a87312aa 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 34559332f43948..5ee7c48bc003ae 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 078c52927564bc..698d477fb0ee50 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 c51e9dbacd31e9..554b785647ada3 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 b723aa4a152ac9..2f7b99c2ea72b5 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 c9baa333da78e3..6d6de2f2bc90dd 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 c466e9233e2776..c411c653ec4735 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 19b2042deccb02..b8c491b9226433 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 b318f55c8012ad..83eb6062817ac5 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 4118f8b14044ad..4c7dbe713b3f7d 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 1c042712ee459f..4322c5dd53f9e0 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 00000000000000..ca3763b7b1e261
--- /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 00000000000000..d062adb79ed5f2
--- /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 00000000000000..10ba58c6958d54
--- /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 ad08d5d1851fc0..b2fe15f2fd5352 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 b7cdd24779170f..bec1d243e181b0 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 9aaf14c66b3eda..16d2acf42edd98 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 dacf8cc58ee085..11651e807cfd61 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 58f851002fd71e..aaa122aec6398b 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 c10c0f10b7b519..174942d4a4cd77 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.base.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.base.tsx
new file mode 100644
index 00000000000000..62302ac165387c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.base.tsx
@@ -0,0 +1,291 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  KeyCodes,
+  css,
+  getId,
+  createRef
+} from '../../Utilities';
+import { CommandButton } from '../../Button';
+import { IPivotProps } from './Pivot.types';
+import { IPivotItemProps } from './PivotItem.types';
+import { FocusZone, FocusZoneDirection } from '../../FocusZone';
+import { PivotItem } from './PivotItem';
+import { PivotLinkFormat } from './Pivot.types';
+import { PivotLinkSize } from './Pivot.types';
+import { Icon } from '../../Icon';
+import * as stylesImport from './Pivot.scss';
+const styles: any = stylesImport;
+
+/**
+ *  Usage:
+ *
+ *   <Pivot>
+ *     <PivotItem linkText="Foo">
+ *       <Label>Pivot #1</Label>
+ *     </PivotItem>
+ *     <PivotItem linkText="Bar">
+ *       <Label>Pivot #2</Label>
+ *     </PivotItem>
+ *     <PivotItem linkText="Bas">
+ *       <Label>Pivot #3</Label>
+ *     </PivotItem>
+ *   </Pivot>
+ */
+
+export interface IPivotState {
+  links: IPivotItemProps[];
+  selectedKey: string;
+  selectedTabId: string;
+}
+
+export class PivotBase 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);
+    this._pivotId = getId('Pivot');
+    const links: IPivotItemProps[] = this._getPivotLinks(this.props);
+    let selectedKey: string | undefined;
+
+    if (props.initialSelectedKey) {
+      selectedKey = props.initialSelectedKey;
+    } else if (props.initialSelectedIndex) {
+      selectedKey = links[props.initialSelectedIndex].itemKey as string;
+    } else if (props.selectedKey) {
+      selectedKey = props.selectedKey;
+    } else if (links.length) {
+      selectedKey = links[0].itemKey as string;
+    }
+
+    this.state = {
+      links,
+      selectedKey: selectedKey!,
+      selectedTabId: this._keyToTabIds[selectedKey!],
+    } as IPivotState;
+
+    this._renderPivotLink = this._renderPivotLink.bind(this);
+  }
+
+  public componentWillReceiveProps(nextProps: IPivotProps): void {
+    const links: IPivotItemProps[] = this._getPivotLinks(nextProps);
+
+    this.setState((prevState, props) => {
+      let selectedKey: string | undefined;
+      if (this._isKeyValid(nextProps.selectedKey)) {
+        selectedKey = nextProps.selectedKey;
+      } else if (this._isKeyValid(prevState.selectedKey)) {
+        selectedKey = prevState.selectedKey;
+      } else if (links.length) {
+        selectedKey = links[0].itemKey;
+      }
+
+      return {
+        links: links,
+        selectedKey,
+        selectedTabId: this._keyToTabIds[selectedKey as string],
+      } as IPivotState;
+    });
+  }
+
+  /**
+   * 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() }
+        { this._renderPivotItem() }
+      </div>
+    );
+  }
+
+  /**
+   * Renders the set of links to route between pivots
+   */
+  private _renderPivotLinks(): JSX.Element {
+    return (
+      <FocusZone componentRef={ this.focusZone } direction={ FocusZoneDirection.horizontal }>
+        <ul
+          className={ css('ms-Pivot', styles.root,
+            { ['ms-Pivot--large ' + styles.rootIsLarge]: this.props.linkSize === PivotLinkSize.large },
+            { ['ms-Pivot--tabs ' + styles.rootIsTabs]: this.props.linkFormat === PivotLinkFormat.tabs }) }
+          role='tablist'
+        >
+          { this.state.links.map(this._renderPivotLink) }
+        </ul>
+      </FocusZone>
+    );
+  }
+
+  private _renderPivotLink = (link: IPivotItemProps): JSX.Element => {
+    const { itemKey, headerButtonProps } = link;
+    const tabId = this._keyToTabIds[itemKey as string];
+    const { onRenderItemLink } = link;
+    let linkContent: JSX.Element | null;
+
+    if (onRenderItemLink) {
+      linkContent = onRenderItemLink(link, this._renderLinkContent);
+    } else {
+      linkContent = this._renderLinkContent(link);
+    }
+
+    return (
+      <CommandButton
+        { ...headerButtonProps }
+        id={ tabId }
+        key={ itemKey }
+        className={ css(
+          'ms-Pivot-link',
+          styles.link,
+          {
+            ['is-selected ' + styles.linkIsSelected]: this.state.selectedKey === itemKey
+          }
+        ) }
+        onClick={ this._onLinkClick.bind(this, itemKey) }
+        onKeyPress={ this._onKeyPress.bind(this, itemKey) }
+        ariaLabel={ link.ariaLabel }
+        role='tab'
+        aria-selected={ this.state.selectedKey === itemKey }
+        name={ link.headerText }
+      >
+        { linkContent }
+      </CommandButton>
+    );
+  }
+
+  private _renderLinkContent = (link: IPivotItemProps): JSX.Element => {
+    const { itemCount, itemIcon, headerText } = link;
+
+    return (
+      <span className={ css('ms-Pivot-link-content') }>
+        { itemIcon !== undefined && (
+          <span className={ css('ms-Pivot-icon', styles.icon) }>
+            <Icon iconName={ itemIcon } />
+          </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>
+    );
+  }
+
+  /**
+   * Renders the current Pivot Item
+   */
+  private _renderPivotItem(): JSX.Element | null {
+    if (this.props.headersOnly) {
+      return null;
+    }
+
+    const itemKey: string = this.state.selectedKey;
+    const index = this._keyToIndexMapping[itemKey];
+    const { selectedTabId } = this.state;
+
+    return (
+      <div
+        role='tabpanel'
+        aria-labelledby={ selectedTabId }
+      >
+        { React.Children.toArray(this.props.children)[index] }
+      </div>
+    );
+  }
+
+  /**
+   * Gets the set of PivotLinks as arrary of IPivotItemProps
+   * The set of Links is determined by child components of type PivotItem
+   */
+  private _getPivotLinks(props: IPivotProps): IPivotItemProps[] {
+    const links: IPivotItemProps[] = [];
+    this._keyToIndexMapping = {};
+    this._keyToTabIds = {};
+
+    React.Children.map(props.children, (child: any, index: number) => {
+      if (typeof child === 'object' && child.type === PivotItem) {
+        const pivotItem = child as PivotItem;
+        const itemKey = pivotItem.props.itemKey || index.toString();
+
+        links.push({
+          headerText: pivotItem.props.headerText || pivotItem.props.linkText,
+          headerButtonProps: pivotItem.props.headerButtonProps,
+          ariaLabel: pivotItem.props.ariaLabel,
+          itemKey: itemKey,
+          itemCount: pivotItem.props.itemCount,
+          itemIcon: pivotItem.props.itemIcon,
+          onRenderItemLink: pivotItem.props.onRenderItemLink
+        });
+        this._keyToIndexMapping[itemKey] = index;
+        this._keyToTabIds[itemKey] = this._getTabId(itemKey, index);
+      }
+    });
+
+    return links;
+  }
+
+  /**
+   * Generates the Id for the tab button.
+   */
+  private _getTabId(itemKey: string, index: number): string {
+    if (this.props.getTabId) {
+      return this.props.getTabId(itemKey, index);
+    }
+
+    return this._pivotId + `-Tab${index}`;
+  }
+
+  /**
+   * whether the key exists in the pivot items.
+   */
+  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>): void {
+    ev.preventDefault();
+    this._updateSelectedItem(itemKey, ev);
+  }
+
+  /**
+   * Handle the onKeyPress eventon the PivotLinks
+   */
+  private _onKeyPress(itemKey: string, ev: React.KeyboardEvent<HTMLElement>): void {
+    ev.preventDefault();
+    if (ev.which === KeyCodes.enter) {
+      this._updateSelectedItem(itemKey);
+    }
+  }
+
+  /**
+   * Updates the state with the new selected index
+   */
+  private _updateSelectedItem(itemKey: string, ev?: React.MouseEvent<HTMLElement>): void {
+    this.setState({
+      selectedKey: itemKey,
+      selectedTabId: this._keyToTabIds[itemKey]
+    } as IPivotState);
+
+    if (this.props.onLinkClick && this._keyToIndexMapping[itemKey] >= 0) {
+      const index = this._keyToIndexMapping[itemKey];
+
+      // React.Element<any> cannot directly convert to PivotItem.
+      const item = React.Children.toArray(this.props.children)[index] as any;
+
+      if (typeof item === 'object' && item.type === PivotItem) {
+        this.props.onLinkClick(item as PivotItem, ev);
+      }
+    }
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss
index a71d1f50eb1d80..2f9028eafc4661 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss
@@ -107,7 +107,7 @@
   }
 }
 
-:global(.ms-Fabric.is-focusVisible) .link {
+:global(.ms-Fabric--isFocusVisible) .link {
   &:focus {
     outline: 1px solid $ms-color-neutralSecondaryAlt;
   }
@@ -216,7 +216,7 @@
   }
 }
 
-:global(.ms-Fabric.is-focusVisible) .root.rootIsTabs .link:focus {
+:global(.ms-Fabric--isFocusVisible) .root.rootIsTabs .link:focus {
   &:before {
     height: auto;
     background: transparent;
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.styles.ts b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.styles.ts
new file mode 100644
index 00000000000000..2850c2c7743ac9
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.styles.ts
@@ -0,0 +1,63 @@
+import { IPivotStyleProps, IPivotStyles } from './Pivot.types';
+import {
+  normalize,
+  FontSizes,
+  FontWeights,
+} from '../../Styling';
+
+export const getStyles = (
+  props: IPivotStyleProps
+): IPivotStyles => {
+  const {
+    className,
+    theme,
+  } = props;
+
+  const { palette } = theme;
+
+  return ({
+    root: [
+      'ms-Pivot',
+      normalize,
+      {
+        fontSize: FontSizes.medium,
+        fontWeight: FontWeights.regular,
+        position: 'relative',
+        color: palette.themePrimary,
+        whiteSpace: 'nowrap',
+      },
+      className
+    ],
+
+    links: [
+      'ms-Pivot-links',
+      {}
+    ],
+
+    link: [
+      'ms-Pivot-link',
+      {}
+    ],
+
+    text: [
+      'ms-Pivot-text',
+      {}
+    ],
+
+    count: [
+      'ms-Pivot-count',
+      {}
+    ],
+
+    icon: [
+      'ms-Pivot-icon',
+      {}
+    ],
+
+    ellipsis: [
+      'ms-Pivot-ellipsis',
+      {}
+    ],
+
+  });
+};
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
index 0d48ff850ad039..8bb22e4f3eb595 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
@@ -1,289 +1,18 @@
-import * as React from 'react';
+import { styled } from '../../Utilities';
 import {
-  BaseComponent,
-  KeyCodes,
-  css,
-  getId,
-  createRef
-} from '../../Utilities';
-import { CommandButton } from '../../Button';
-import { IPivotProps } from './Pivot.types';
-import { IPivotItemProps } from './PivotItem.types';
-import { FocusZone, FocusZoneDirection } from '../../FocusZone';
-import { PivotItem } from './PivotItem';
-import { PivotLinkFormat } from './Pivot.types';
-import { PivotLinkSize } from './Pivot.types';
-import { Icon } from '../../Icon';
-import * as stylesImport from './Pivot.scss';
-const styles: any = stylesImport;
+  IPivotProps,
+  IPivotStyleProps,
+  IPivotStyles
+} from './Pivot.types';
+import { PivotBase } from './Pivot.base';
+import { getStyles } from './Pivot.styles';
 
 /**
- *  Usage:
- *
- *   <Pivot>
- *     <PivotItem linkText="Foo">
- *       <Label>Pivot #1</Label>
- *     </PivotItem>
- *     <PivotItem linkText="Bar">
- *       <Label>Pivot #2</Label>
- *     </PivotItem>
- *     <PivotItem linkText="Bas">
- *       <Label>Pivot #3</Label>
- *     </PivotItem>
- *   </Pivot>
+ * 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.
  */
-
-export interface IPivotState {
-  links: IPivotItemProps[];
-  selectedKey: string;
-  selectedTabId: string;
-}
-
-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);
-    this._pivotId = getId('Pivot');
-    const links: IPivotItemProps[] = this._getPivotLinks(this.props);
-    let selectedKey: string | undefined;
-
-    if (props.initialSelectedKey) {
-      selectedKey = props.initialSelectedKey;
-    } else if (props.initialSelectedIndex) {
-      selectedKey = links[props.initialSelectedIndex].itemKey as string;
-    } else if (props.selectedKey) {
-      selectedKey = props.selectedKey;
-    } else if (links.length) {
-      selectedKey = links[0].itemKey as string;
-    }
-
-    this.state = {
-      links,
-      selectedKey: selectedKey!,
-      selectedTabId: this._keyToTabIds[selectedKey!],
-    } as IPivotState;
-
-    this._renderPivotLink = this._renderPivotLink.bind(this);
-  }
-
-  public componentWillReceiveProps(nextProps: IPivotProps) {
-    const links: IPivotItemProps[] = this._getPivotLinks(nextProps);
-
-    this.setState((prevState, props) => {
-      let selectedKey: string | undefined;
-      if (this._isKeyValid(nextProps.selectedKey)) {
-        selectedKey = nextProps.selectedKey;
-      } else if (this._isKeyValid(prevState.selectedKey)) {
-        selectedKey = prevState.selectedKey;
-      } else if (links.length) {
-        selectedKey = links[0].itemKey;
-      }
-
-      return {
-        links: links,
-        selectedKey,
-        selectedTabId: this._keyToTabIds[selectedKey as string],
-      } as IPivotState;
-    });
-  }
-
-  /**
-   * Sets focus to the first pivot tab.
-   */
-  public focus(): void {
-    if (this.focusZone.value) {
-      this.focusZone.value.focus();
-    }
-  }
-
-  public render() {
-    return (
-      <div>
-        { this._renderPivotLinks() }
-        { this._renderPivotItem() }
-      </div>
-    );
-  }
-
-  /**
-   * Renders the set of links to route between pivots
-   */
-  private _renderPivotLinks() {
-    return (
-      <FocusZone componentRef={ this.focusZone } direction={ FocusZoneDirection.horizontal }>
-        <ul
-          className={ css('ms-Pivot', styles.root,
-            { ['ms-Pivot--large ' + styles.rootIsLarge]: this.props.linkSize === PivotLinkSize.large },
-            { ['ms-Pivot--tabs ' + styles.rootIsTabs]: this.props.linkFormat === PivotLinkFormat.tabs }) }
-          role='tablist'
-        >
-          { this.state.links.map(this._renderPivotLink) }
-        </ul>
-      </FocusZone>
-    );
-  }
-
-  private _renderPivotLink = (link: IPivotItemProps): JSX.Element => {
-    const { itemKey } = link;
-    const tabId = this._keyToTabIds[itemKey as string];
-    const { onRenderItemLink } = link;
-    let linkContent: JSX.Element | null;
-
-    if (onRenderItemLink) {
-      linkContent = onRenderItemLink(link, this._renderLinkContent);
-    } else {
-      linkContent = this._renderLinkContent(link);
-    }
-
-    return (
-      <CommandButton
-        id={ tabId }
-        key={ itemKey }
-        className={ css(
-          'ms-Pivot-link',
-          styles.link,
-          {
-            ['is-selected ' + styles.linkIsSelected]: this.state.selectedKey === itemKey
-          }
-        ) }
-        onClick={ this._onLinkClick.bind(this, itemKey) }
-        onKeyPress={ this._onKeyPress.bind(this, itemKey) }
-        ariaLabel={ link.ariaLabel }
-        role='tab'
-        aria-selected={ this.state.selectedKey === itemKey }
-        name={ link.linkText }
-      >
-        { linkContent }
-      </CommandButton>
-    );
-  }
-
-  private _renderLinkContent = (link: IPivotItemProps): JSX.Element => {
-    const { itemCount, itemIcon, linkText } = link;
-
-    return (
-      <span className={ css('ms-Pivot-link-content') }>
-        { itemIcon !== undefined && (
-          <span className={ css('ms-Pivot-icon', styles.icon) }>
-            <Icon iconName={ itemIcon } />
-          </span>
-        ) }
-        { linkText !== undefined && <span className={ css('ms-Pivot-text', styles.text) }> { link.linkText }</span> }
-        { itemCount !== undefined && <span className={ css('ms-Pivot-count', styles.count) } > ({ itemCount })</span> }
-      </span>
-    );
-  }
-
-  /**
-   * Renders the current Pivot Item
-   */
-  private _renderPivotItem() {
-    if (this.props.headersOnly) {
-      return null;
-    }
-
-    const itemKey: string = this.state.selectedKey;
-    const index = this._keyToIndexMapping[itemKey];
-    const { selectedTabId } = this.state;
-
-    return (
-      <div
-        role='tabpanel'
-        aria-labelledby={ selectedTabId }
-      >
-        { React.Children.toArray(this.props.children)[index] }
-      </div>
-    );
-  }
-
-  /**
-   * Gets the set of PivotLinks as arrary of IPivotItemProps
-   * The set of Links is determined by child components of type PivotItem
-   */
-  private _getPivotLinks(props: IPivotProps): IPivotItemProps[] {
-    const links: IPivotItemProps[] = [];
-    this._keyToIndexMapping = {};
-    this._keyToTabIds = {};
-
-    React.Children.map(props.children, (child: any, index: number) => {
-      if (typeof child === 'object' && child.type === PivotItem) {
-        const pivotItem = child as PivotItem;
-        const itemKey = pivotItem.props.itemKey || index.toString();
-
-        links.push({
-          linkText: pivotItem.props.linkText,
-          ariaLabel: pivotItem.props.ariaLabel,
-          itemKey: itemKey,
-          itemCount: pivotItem.props.itemCount,
-          itemIcon: pivotItem.props.itemIcon,
-          onRenderItemLink: pivotItem.props.onRenderItemLink
-        });
-        this._keyToIndexMapping[itemKey] = index;
-        this._keyToTabIds[itemKey] = this._getTabId(itemKey, index);
-      }
-    });
-
-    return links;
-  }
-
-  /**
-   * Generates the Id for the tab button.
-   */
-  private _getTabId(itemKey: string, index: number): string {
-    if (this.props.getTabId) {
-      return this.props.getTabId(itemKey, index);
-    }
-
-    return this._pivotId + `-Tab${index}`;
-  }
-
-  /**
-   * whether the key exists in the pivot items.
-   */
-  private _isKeyValid(itemKey: string | undefined) {
-    return itemKey !== undefined && this._keyToIndexMapping[itemKey] !== undefined;
-  }
-
-  /**
-   * Handles the onClick event on PivotLinks
-   */
-  private _onLinkClick(itemKey: string, ev: React.MouseEvent<HTMLElement>) {
-    ev.preventDefault();
-    this._updateSelectedItem(itemKey, ev);
-  }
-
-  /**
-   * Handle the onKeyPress eventon the PivotLinks
-   */
-  private _onKeyPress(itemKey: string, ev: React.KeyboardEvent<HTMLElement>) {
-    ev.preventDefault();
-    if (ev.which === KeyCodes.enter) {
-      this._updateSelectedItem(itemKey);
-    }
-  }
-
-  /**
-   * Updates the state with the new selected index
-   */
-  private _updateSelectedItem(itemKey: string, ev?: React.MouseEvent<HTMLElement>) {
-    this.setState({
-      selectedKey: itemKey,
-      selectedTabId: this._keyToTabIds[itemKey]
-    } as IPivotState);
-
-    if (this.props.onLinkClick && this._keyToIndexMapping[itemKey] >= 0) {
-      const index = this._keyToIndexMapping[itemKey];
-
-      // React.Element<any> cannot directly convert to PivotItem.
-      const item = React.Children.toArray(this.props.children)[index] as any;
-
-      if (typeof item === 'object' && item.type === PivotItem) {
-        this.props.onLinkClick(item as PivotItem, ev);
-      }
-    }
-  }
-}
+export const Pivot = styled<IPivotProps, IPivotStyleProps, IPivotStyles>(
+  PivotBase,
+  getStyles
+);
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 594dabd61284c8..45f9286e8fb416 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
@@ -1,6 +1,7 @@
 import * as React from 'react';
-
-import { Pivot } from './Pivot';
+import { PivotBase } from './Pivot.base';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 import { PivotItem } from './PivotItem';
 
 export interface IPivot {
@@ -10,13 +11,29 @@ export interface IPivot {
   focus(): void;
 }
 
-export interface IPivotProps extends React.Props<Pivot> {
+export interface IPivotProps extends React.Props<PivotBase> {
   /**
    * Optional callback to access the IPivot interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
   componentRef?: (component: IPivot | null) => void;
 
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
+  getStyles?: IStyleFunction<IPivotStyleProps, IPivotStyles>;
+
+  /**
+   * Theme provided by High-Order Component.
+   */
+  theme?: ITheme;
+
+  /**
+   * Additional css class to apply to the Pivot
+   * @defaultvalue undefined
+   */
+  className?: string;
+
   /**
    * The index of the pivot item initially selected.
    *
@@ -67,6 +84,36 @@ export interface IPivotProps extends React.Props<Pivot> {
   getTabId?: (itemKey: string, index: number) => string;
 }
 
+export interface IPivotStyleProps {
+  /**
+   * Theme provided by High-Order Component.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+  linkIsSelected?: boolean;
+  linkIsDisabled?: boolean;
+  linkIsOverflow?: boolean;
+  rootIsLarge?: boolean;
+  rootIsTabs?: boolean;
+}
+
+export interface IPivotStyles {
+  /**
+   * Style for the root element.
+   */
+  root: IStyle;
+  links: IStyle;
+  link: IStyle;
+  text: IStyle;
+  count: IStyle;
+  icon: IStyle;
+  ellipsis: IStyle;
+}
+
 export enum PivotLinkFormat {
   /**
    * Display Pivot Links as links
@@ -90,4 +137,4 @@ export enum PivotLinkSize {
    * Display links using large font size
    */
   large = 1
-}
+}
\ No newline at end of file
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 ed5c5ea8a10f42..bba693d1e17e88 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 616ca5f694a8fc..8eabb6604e1708 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 37c8c6a06ad37b..73e92bcc0c26b7 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 225f07e583fc7f..9f0cef951246a8 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
@@ -57,7 +57,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
             &::-moz-focus-inner {
               border: 0;
             }
-            .ms-Fabric.is-focusVisible &:focus:after {
+            .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #ffffff;
               bottom: 0px;
               content: "";
@@ -68,7 +68,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
               top: 0px;
               z-index: 1;
             }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
               border: none;
               bottom: -2px;
               left: -2px;
@@ -159,7 +159,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
             &::-moz-focus-inner {
               border: 0;
             }
-            .ms-Fabric.is-focusVisible &:focus:after {
+            .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #ffffff;
               bottom: 0px;
               content: "";
@@ -170,7 +170,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
               top: 0px;
               z-index: 1;
             }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
               border: none;
               bottom: -2px;
               left: -2px;
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 00000000000000..6915a809d8159c
--- /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 00000000000000..759f4498948c6c
--- /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 00000000000000..71d82f61121f20
--- /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 4b1efa1d9964aa..dfb8328f592342 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 2cfb209adb4894..98b848cadff908 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 bd8be4a772a45d..d816af332de773 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 bb7e624ad32901..bd3a043e9de499 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 703c04d967d07d..5c9a6c9eef00f1 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 4ca343dbc228ee..ddc0df5f76c2d7 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 c00203e74239ce..58efcb12f2d891 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 7a8bdbf4b0c1f5..bc2255d70bb38a 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 ca110537dcef50..c860644c79e328 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 3a756c6d001c3d..15396e2d5ef9ba 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/Pivot/index.ts b/packages/office-ui-fabric-react/src/components/Pivot/index.ts
index 666c1856e32a48..99040588b37c6a 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Pivot/index.ts
@@ -1,4 +1,5 @@
 export * from './Pivot';
+export * from './Pivot.base';
 export { PivotItem as PivotItem } from './PivotItem';
 export * from './Pivot.types';
 export * from './PivotItem.types';
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 7834e89b4a948d..5c265313fb493a 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,15 +106,15 @@ 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) {
+    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
@@ -124,8 +124,8 @@ export class Popup extends BaseComponent<IPopupProps, IPopupState> {
       // 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.value.clientHeight;
-      const firstChildHeight = this._root.value.firstElementChild.clientHeight;
+      const rootHeight = this._root.current.clientHeight;
+      const firstChildHeight = this._root.current.firstElementChild.clientHeight;
       if (rootHeight > 0 && firstChildHeight > rootHeight) {
         needsVerticalScrollBar = (firstChildHeight - rootHeight) > 1;
       }
@@ -137,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 d49339eb57e6ae..b00993fa7f612e 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 00000000000000..7cec1918ea7c90
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+} from '../../Utilities';
+import {
+  IProgressIndicatorProps,
+  IProgressIndicatorStyleProps,
+  IProgressIndicatorStyles,
+} from './ProgressIndicator.types';
+
+const getClassNames = classNamesFunction<IProgressIndicatorStyleProps, IProgressIndicatorStyles>();
+
+// if the percentComplete is near 0, don't animate it.
+// This prevents animations on reset to 0 scenarios
+const ZERO_THRESHOLD = 0.01;
+
+/**
+* ProgressIndicator with no default styles.
+* [Use the `getStyles` API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling)
+*/
+@customizable('ProgressIndicator', ['theme'])
+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 {
+      ariaValueText,
+      barHeight,
+      className,
+      description,
+      getStyles,
+      theme,
+      title,
+    } = this.props;
+
+    let { label, percentComplete } = this.props;
+
+    const classNames = getClassNames(getStyles, {
+      theme: theme!,
+      className,
+      barHeight,
+      indeterminate: percentComplete === undefined ? true : false,
+    });
+
+    // Handle deprecated value.
+    if (title) {
+      label = title;
+    }
+
+    if (this.props.percentComplete !== undefined) {
+      percentComplete = Math.min(100, Math.max(0, percentComplete! * 100));
+    }
+
+    const progressBarStyles = {
+      width: percentComplete !== undefined ? percentComplete + '%' : undefined,
+      transition: (percentComplete !== undefined && percentComplete < ZERO_THRESHOLD) ? 'none' : undefined,
+    };
+
+    return (
+      <div className={ classNames.root }>
+        <div className={ classNames.itemName }>{ label }</div>
+        <div className={ classNames.itemProgress }>
+          <div className={ classNames.progressTrack } />
+          <div
+            className={ classNames.progressBar }
+            style={ progressBarStyles }
+            role='progressbar'
+            aria-valuemin={ 0 }
+            aria-valuemax={ 100 }
+            aria-valuenow={ Math.floor(percentComplete!) }
+            aria-valuetext={ ariaValueText }
+          />
+        </div>
+        <div className={ classNames.itemDescription }>{ description }</div>
+      </div>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss
deleted file mode 100644
index c44a4f88888d61..00000000000000
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@import '../../common/common';
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-//
-// Office UI Fabric
-// --------------------------------------------------
-// ProgressIndicator Styles
-$ProgressIndicatorMarginBetweenText: 8px;
-$ProgressIndicatorButtonsWidth: 218px;
-$ProgressIndicatorTextHeight: 18px;
-.root {
-  font-weight: $ms-font-weight-regular;
-}
-
-.itemName {
-  color: $ms-color-neutralPrimary;
-  font-size: $ms-font-size-m;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  padding-top: $ProgressIndicatorMarginBetweenText / 2;
-  line-height: $ProgressIndicatorTextHeight + 2;
-}
-
-.itemDescription {
-  color: $ms-color-neutralSecondaryAlt;
-  font-size: $ms-font-size-xs;
-  line-height: $ProgressIndicatorTextHeight;
-}
-
-.itemProgress {
-  position: relative;
-  overflow: hidden;
-  height: 2px;
-  padding: $ProgressIndicatorMarginBetweenText 0;
-}
-
-.progressTrack {
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  background-color: $ms-color-neutralLight;
-  @include high-contrast {
-    border-bottom: 1px solid WindowText;
-  }
-}
-
-.progressBar {
-  background-color: $ms-color-themePrimary;
-  height: 2px;
-  position: absolute;
-  transition: width .3s ease;
-  width: 0;
-  &.indeterminate {
-    position: absolute;
-    min-width: 33%;
-    background: linear-gradient(to right, transparent 0%, $ms-color-themePrimary 50%, transparent 100%);
-    animation: indeterminateProgress 3s infinite;
-  }
-  @include high-contrast {
-    background-color: WindowText;
-  }
-  @include RTL {
-    &.indeterminate {
-      animation: indeterminateProgressRTL 3s infinite;
-    }
-  }
-}
-
-.smoothTransition {
-  transition-property: width;
-  transition-timing-function: linear;
-  transition-duration: 150ms;
-}
-
-@keyframes indeterminateProgress {
-  0% {
-    left: -30%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-
-@keyframes indeterminateProgressRTL {
-  0% {
-    right: -30%;
-  }
-  100% {
-    right: 100%;
-  }
-}
\ No newline at end of file
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 00000000000000..f2bacacd624fa0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts
@@ -0,0 +1,131 @@
+import {
+  FontSizes,
+  FontWeights,
+  HighContrastSelector,
+  keyframes,
+  noWrap,
+} from '../../Styling';
+import { getRTL } from '../../Utilities';
+import {
+  IProgressIndicatorStyleProps,
+  IProgressIndicatorStyles,
+} from './ProgressIndicator.types';
+
+const IndeterminateProgress = keyframes({
+  '0%': {
+    left: '-30%',
+  },
+  '100%': {
+    left: '100%',
+  }
+});
+const IndeterminateProgressRTL = keyframes({
+  '100%': {
+    right: '-30%',
+  },
+  '0%': {
+    right: '100%',
+  }
+});
+
+export const getStyles = (
+  props: IProgressIndicatorStyleProps
+): IProgressIndicatorStyles => {
+  const isRTL = getRTL();
+  const {
+    className,
+    indeterminate,
+    theme,
+    barHeight = 2,
+  } = props;
+
+  const { palette, semanticColors } = theme;
+
+  const marginBetweenText = 8;
+  const textHeight = 18;
+
+  return ({
+    root: [
+      'ms-ProgressIndicator',
+      {
+        fontWeight: FontWeights.regular,
+      },
+      className
+    ],
+
+    itemName: [
+      'ms-ProgressIndicator-itemName',
+      noWrap,
+      {
+        color: semanticColors.bodyText,
+        fontSize: FontSizes.medium,
+        paddingTop: marginBetweenText / 2,
+        lineHeight: textHeight + 2,
+      }
+    ],
+
+    itemDescription: [
+      'ms-ProgressIndicator-itemDescription',
+      {
+        color: semanticColors.bodySubtext,
+        fontSize: FontSizes.xSmall,
+        lineHeight: textHeight,
+      }
+    ],
+
+    itemProgress: [
+      'ms-ProgressIndicator-itemProgress',
+      {
+        position: 'relative',
+        overflow: 'hidden',
+        height: barHeight,
+        padding: `${marginBetweenText}px 0`,
+      }
+    ],
+
+    progressTrack: [
+      'ms-ProgressIndicator-progressTrack',
+      {
+        position: 'absolute',
+        width: '100%',
+        height: barHeight,
+        backgroundColor: palette.neutralLight,
+
+        selectors: {
+          [HighContrastSelector]: {
+            borderBottom: '1px solid WindowText',
+          }
+        }
+      }
+    ],
+
+    progressBar: [
+      'ms-ProgressIndicator-progressBar',
+      {
+        backgroundColor: palette.themePrimary,
+        height: barHeight,
+        position: 'absolute',
+        transition: 'width .3s ease',
+        width: 0,
+
+        selectors: {
+          [HighContrastSelector]: {
+            backgroundColor: 'WindowText',
+          }
+        }
+      },
+      !indeterminate && {
+        transition: 'width .15s linear'
+      },
+      indeterminate && [
+        {
+          position: 'absolute',
+          minWidth: '33%',
+          background: `linear-gradient(to right, transparent 0%, ${palette.themePrimary} 50%, transparent 100%)`,
+          animation: `${IndeterminateProgress} 3s infinite`,
+        },
+        isRTL && { animation: `${IndeterminateProgressRTL} 3s infinite` },
+      ],
+    ],
+  });
+};
\ 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 9487e06251e3b9..5f9dd23cadfbb3 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 }
-            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 b1bb692efdecda..f2227ba3314123 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;
 
@@ -39,4 +54,36 @@ export interface IProgressIndicatorProps {
    * @deprecated
    */
   title?: string;
+
+  /**
+   * Height of the ProgressIndicator
+   * @default 2
+   */
+  barHeight?: number;
 }
+
+export interface IProgressIndicatorStyleProps {
+  /**
+   * Theme provided by High-Order Component.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+  indeterminate?: boolean;
+  barHeight?: number;
+}
+
+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 85746ac5d3bd42..a79e4a563bebd2 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 575c15cc1ce374..8e71ec1d2f80d1 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
@@ -2,35 +2,87 @@
 
 exports[`ProgressIndicator renders ProgressIndicator correctly 1`] = `
 <div
-  className="ms-ProgressIndicator"
+  className=
+      ms-ProgressIndicator
+      {
+        font-weight: 400;
+      }
 >
   <div
-    className="ms-ProgressIndicator-itemName"
+    className=
+        ms-ProgressIndicator-itemName
+        {
+          color: #333333;
+          font-size: 14px;
+          line-height: 20px;
+          overflow: hidden;
+          padding-top: 4px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
   >
     
   </div>
   <div
-    className="ms-ProgressIndicator-itemProgress"
+    className=
+        ms-ProgressIndicator-itemProgress
+        {
+          height: 2px;
+          overflow: hidden;
+          padding-bottom: 8px;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 8px;
+          position: relative;
+        }
   >
     <div
-      className="ms-ProgressIndicator-progressTrack"
+      className=
+          ms-ProgressIndicator-progressTrack
+          {
+            background-color: #eaeaea;
+            height: 2px;
+            position: absolute;
+            width: 100%;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            border-bottom: 1px solid WindowText;
+          }
     />
     <div
       aria-valuemax={100}
       aria-valuemin={0}
       aria-valuenow={75}
       aria-valuetext={undefined}
-      className="ms-ProgressIndicator-progressBar smoothTransition"
+      className=
+          ms-ProgressIndicator-progressBar
+          {
+            background-color: #0078d4;
+            height: 2px;
+            position: absolute;
+            transition: width .15s linear;
+            width: 0px;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            background-color: WindowText;
+          }
       role="progressbar"
       style={
         Object {
+          "transition": undefined,
           "width": "75%",
         }
       }
     />
   </div>
   <div
-    className="ms-ProgressIndicator-itemDescription"
+    className=
+        ms-ProgressIndicator-itemDescription
+        {
+          color: #666666;
+          font-size: 11px;
+          line-height: 18px;
+        }
   >
     
   </div>
@@ -39,31 +91,90 @@ exports[`ProgressIndicator renders ProgressIndicator correctly 1`] = `
 
 exports[`ProgressIndicator renders indeterminate ProgressIndicator correctly 1`] = `
 <div
-  className="ms-ProgressIndicator"
+  className=
+      ms-ProgressIndicator
+      {
+        font-weight: 400;
+      }
 >
   <div
-    className="ms-ProgressIndicator-itemName"
+    className=
+        ms-ProgressIndicator-itemName
+        {
+          color: #333333;
+          font-size: 14px;
+          line-height: 20px;
+          overflow: hidden;
+          padding-top: 4px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
   >
     
   </div>
   <div
-    className="ms-ProgressIndicator-itemProgress"
+    className=
+        ms-ProgressIndicator-itemProgress
+        {
+          height: 2px;
+          overflow: hidden;
+          padding-bottom: 8px;
+          padding-left: 0;
+          padding-right: 0;
+          padding-top: 8px;
+          position: relative;
+        }
   >
     <div
-      className="ms-ProgressIndicator-progressTrack"
+      className=
+          ms-ProgressIndicator-progressTrack
+          {
+            background-color: #eaeaea;
+            height: 2px;
+            position: absolute;
+            width: 100%;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            border-bottom: 1px solid WindowText;
+          }
     />
     <div
       aria-valuemax={100}
       aria-valuemin={0}
-      aria-valuenow={undefined}
+      aria-valuenow={NaN}
       aria-valuetext={undefined}
-      className="ms-ProgressIndicator-progressBar"
+      className=
+          ms-ProgressIndicator-progressBar
+          {
+            animation: keyframes 0%{left:-30%;}100%{left:100%;} 3s infinite;
+            background-color: #0078d4;
+            background: linear-gradient(to right, transparent 0%, #0078d4 50%, transparent 100%);
+            height: 2px;
+            min-width: 33%;
+            position: absolute;
+            transition: width .3s ease;
+            width: 0px;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            background-color: WindowText;
+          }
       role="progressbar"
-      style={undefined}
+      style={
+        Object {
+          "transition": undefined,
+          "width": undefined,
+        }
+      }
     />
   </div>
   <div
-    className="ms-ProgressIndicator-itemDescription"
+    className=
+        ms-ProgressIndicator-itemDescription
+        {
+          color: #666666;
+          font-size: 11px;
+          line-height: 18px;
+        }
   >
     
   </div>
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 00000000000000..5138b92a4f299d
--- /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 00000000000000..4c12cb8ba1d0d6
--- /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 00000000000000..6a7148ba3d5b3a
--- /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 d5c7a03d2487e6..7c026146242891 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 77538f2d15eaf6..e35bb873166fa3 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 c03c55d7411bb8..56e3192e1179bd 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 d4d5ab1f8b5ee1..36b93f20c59bec 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
@@ -53,21 +53,26 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
     max: 5
   };
   private _id: string;
+  private _min: number;
   private _labelId: string;
   private _classNames: { [key in keyof IRatingStyles]: string };
 
   constructor(props: IRatingProps) {
     super(props);
 
+    this._id = getId('Rating');
+    this._min = this.props.allowZeroStars ? 0 : 1;
+    if (this.props.min !== undefined && this.props.min !== 1) {
+      this._min = this.props.min;
+    }
+    this._labelId = getId('RatingLabel');
+
     this.state = {
       rating: this._getInitialValue(props)
     };
-
-    this._id = getId('Rating');
-    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 +80,7 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const id = this._id;
     const stars = [];
     const starIds = [];
@@ -84,7 +89,6 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
       getAriaLabel,
       getStyles,
       max,
-      min,
       rating,
       readOnly,
       size,
@@ -96,33 +100,35 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
       theme: theme!
     });
 
-    for (let i = min as number; i <= (max as number); i++) {
-      const ratingStarProps: IRatingStarProps = {
-        fillPercentage: this._getFillingPercentage(i),
-        disabled: disabled ? true : false,
-        classNames: this._classNames
-      };
-
-      starIds.push(this._getStarId(i - 1));
-
-      stars.push(
-        <button
-          className={ css(this._classNames.ratingButton, {
-            [this._classNames.rootIsLarge!]: size === RatingSize.Large,
-            [this._classNames.rootIsSmall!]: size !== RatingSize.Large
-          }) }
-          id={ starIds[i - 1] }
-          key={ i }
-          { ...((i === Math.ceil(this.state.rating as number)) ? { 'data-is-current': true } : {}) }
-          onFocus={ this._onFocus.bind(this, i) }
-          disabled={ disabled || readOnly ? true : false }
-          role='presentation'
-          type='button'
-        >
-          { this._getLabel(i) }
-          <RatingStar key={ i + 'rating' }  { ...ratingStarProps } />
-        </button>
-      );
+    for (let i = this._min as number; i <= (max as number); i++) {
+      if (i !== 0) {
+        const ratingStarProps: IRatingStarProps = {
+          fillPercentage: this._getFillingPercentage(i),
+          disabled: disabled ? true : false,
+          classNames: this._classNames
+        };
+
+        starIds.push(this._getStarId(i - 1));
+
+        stars.push(
+          <button
+            className={ css(this._classNames.ratingButton, {
+              [this._classNames.rootIsLarge]: size === RatingSize.Large,
+              [this._classNames.rootIsSmall]: size !== RatingSize.Large
+            }) }
+            id={ starIds[i - 1] }
+            key={ i }
+            { ...((i === Math.ceil(this.state.rating as number)) ? { 'data-is-current': true } : {}) }
+            onFocus={ this._onFocus.bind(this, i) }
+            disabled={ disabled || readOnly ? true : false }
+            role='presentation'
+            type='button'
+          >
+            { this._getLabel(i) }
+            <RatingStar key={ i + 'rating' }  { ...ratingStarProps } />
+          </button>
+        );
+      }
     }
 
     return (
@@ -172,20 +178,20 @@ 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;
+      return this._min;
     }
 
     if (props.rating === null) {
-      return null;
+      return undefined;
     }
 
     return this._getClampedRating(props.rating);
   }
 
   private _getClampedRating(rating: number): number {
-    return Math.min(Math.max(rating, this.props.min as number), this.props.max as number);
+    return Math.min(Math.max(rating, this._min as number), this.props.max as number);
   }
 
   private _getFillingPercentage(starPosition: number): number {
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 02bb092d20d05b..4739320115defd 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';
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
index dec302bd0e0192..3c8055d85307a1 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
@@ -1,12 +1,11 @@
 import {
   styled
 } from '../../Utilities';
-// tslint:disable-next-line:no-unused-variable
 import { IRatingProps } from './Rating.types';
 import { getStyles } from './Rating.styles';
 import { RatingBase } from './Rating.base';
 
-export const Rating = styled(
+export const Rating: (props: IRatingProps) => JSX.Element = styled(
   RatingBase,
   getStyles
 );
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.types.ts b/packages/office-ui-fabric-react/src/components/Rating/Rating.types.ts
index aef9d0b35cda51..767570ad475f3e 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.types.ts
@@ -26,6 +26,7 @@ export interface IRatingProps extends React.AllHTMLAttributes<HTMLElement> {
 
   /**
    * Minimum rating, defaults to 1, has to be >= 0
+   * @deprecated
    */
   min?: number;
 
@@ -34,6 +35,11 @@ export interface IRatingProps extends React.AllHTMLAttributes<HTMLElement> {
    */
   max?: number;
 
+  /**
+   * Allow the rating value to be set to 0 instead of a minimum of 1.
+   */
+  allowZeroStars?: boolean;
+
   /**
    * Custom icon, defaults to FavoriteStar
    */
@@ -94,12 +100,12 @@ export interface IRatingStyleProps {
 }
 
 export interface IRatingStyles {
-  ratingStar?: IStyle;
-  ratingStarBack?: IStyle;
-  ratingStarFront?: IStyle;
-  ratingButton?: IStyle;
-  rootIsSmall?: IStyle;
-  rootIsLarge?: IStyle;
-  labelText?: IStyle;
-  ratingFocusZone?: IStyle;
+  ratingStar: IStyle;
+  ratingStarBack: IStyle;
+  ratingStarFront: IStyle;
+  ratingButton: IStyle;
+  rootIsSmall: IStyle;
+  rootIsLarge: IStyle;
+  labelText: IStyle;
+  ratingFocusZone: IStyle;
 }
\ No newline at end of file
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 476537b62615c5..a2d19f4224c16b 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/RatingPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/RatingPage.tsx
@@ -3,24 +3,33 @@ import {
   ExampleCard,
   ComponentPage,
   IComponentDemoPageProps,
+  PageMarkdown,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import { RatingBasicExample } from './examples/Rating.Basic.Example';
+import { RatingButtonControlledExample } from './examples/Rating.ButtonControlled.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { RatingStatus } from './Rating.checklist';
 
 const RatingBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Rating/examples/Rating.Basic.Example.tsx') as string;
+const RatingButtonControlledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Rating/examples/Rating.ButtonControlled.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 />
-          </ExampleCard>
+          <div>
+            <ExampleCard title='Rating' code={ RatingBasicExampleCode }>
+              <RatingBasicExample />
+            </ExampleCard>
+            <ExampleCard title='Button Controlled Rating' code={ RatingButtonControlledExampleCode }>
+              <RatingButtonControlledExample />
+            </ExampleCard>
+          </div>
         }
         propertiesTables={
           <PropertiesTableSet
@@ -30,33 +39,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 686bdd8cd92670..3b03c3c06daaee 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
@@ -46,7 +46,7 @@ exports[`Rating Renders Rating correctly 1`] = `
           &::-moz-focus-inner {
             border: 0;
           }
-          .ms-Fabric.is-focusVisible &:focus:after {
+          .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #ffffff;
             bottom: 1px;
             content: "";
@@ -170,7 +170,7 @@ exports[`Rating Renders Rating correctly 1`] = `
           &::-moz-focus-inner {
             border: 0;
           }
-          .ms-Fabric.is-focusVisible &:focus:after {
+          .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #ffffff;
             bottom: 1px;
             content: "";
@@ -293,7 +293,7 @@ exports[`Rating Renders Rating correctly 1`] = `
           &::-moz-focus-inner {
             border: 0;
           }
-          .ms-Fabric.is-focusVisible &:focus:after {
+          .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #ffffff;
             bottom: 1px;
             content: "";
@@ -416,7 +416,7 @@ exports[`Rating Renders Rating correctly 1`] = `
           &::-moz-focus-inner {
             border: 0;
           }
-          .ms-Fabric.is-focusVisible &:focus:after {
+          .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #ffffff;
             bottom: 1px;
             content: "";
@@ -539,7 +539,7 @@ exports[`Rating Renders Rating correctly 1`] = `
           &::-moz-focus-inner {
             border: 0;
           }
-          .ms-Fabric.is-focusVisible &:focus:after {
+          .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #ffffff;
             bottom: 1px;
             content: "";
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 00000000000000..1e7800f804a206
--- /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 00000000000000..a56a299d1738cc
--- /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 00000000000000..89e7faca684f19
--- /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 495322f8fe22c8..11c5ac3a3461e9 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/Rating/examples/Rating.ButtonControlled.Example.tsx b/packages/office-ui-fabric-react/src/components/Rating/examples/Rating.ButtonControlled.Example.tsx
new file mode 100644
index 00000000000000..9e3aee5ab636fc
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Rating/examples/Rating.ButtonControlled.Example.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Rating } from 'office-ui-fabric-react/lib/Rating';
+import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+
+export class RatingButtonControlledExample extends React.Component<{}, {
+  rating: number;
+}> {
+
+  constructor(props: {}) {
+    super(props);
+
+    this.state = {
+      rating: 0
+    };
+  }
+
+  // tslint:disable:jsx-no-lambda
+  public render() {
+    const maxrating = 5;
+
+    return (
+      <div className='ms-RatingButtonControlledExample'>
+        <Rating
+          rating={ this.state.rating }
+          max={ 5 }
+          readOnly={ true }
+          allowZeroStars={ true }
+        />
+        <PrimaryButton
+          text={ 'Click to change rating to ' + (maxrating - this.state.rating) }
+          onClick={
+            (e) => {
+              if (this.state.rating === 0) {
+                this.setState({ rating: 5 });
+              } else {
+                this.setState({ rating: 0 });
+              }
+            }
+          }
+        />
+      </div>
+    );
+  }
+}
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 f0790dc988d2ef..5746f5a38256ca 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 8e04e842d4889d..ddb1259f0593d6 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 b7fa1d5d97d6d3..bc6a3ecc547b99 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 00000000000000..4e5e957772a25f
--- /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 00000000000000..12de3cc5919f1c
--- /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 00000000000000..d2295068c8ae40
--- /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 f92c0febb1428c..5975a4df7263a5 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 4fff978345fb7c..0b40b58cb2b6f4 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 8ac7bcd7eb5780..2c1fcbcc60e9f8 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
@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import * as PropTypes from 'prop-types';
 import {
   BaseComponent,
@@ -46,15 +43,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 +68,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!,
       {
@@ -102,12 +99,11 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
         { ...getNativeProps(this.props, divProperties) }
         ref={ this._root }
         className={ classNames.root }
+        data-is-scrollable={ true }
       >
         <div ref={ this._stickyAboveRef } className={ classNames.stickyAbove } />
         <div ref={ this._stickyBelowRef } className={ classNames.stickyBelow } />
-        <div data-is-scrollable={ true }>
-          { this.props.children }
-        </div>
+        { this.props.children }
       </div>
     );
   }
@@ -126,51 +122,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 +184,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 +192,7 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
     }
   }
 
-  private _onWindowResize() {
+  private _onWindowResize(): void {
     this._async.setTimeout(() => {
       this.notifySubscribers();
       this._setPlaceholderHeights(this._stickyAbove);
@@ -218,8 +214,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 +239,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 86abb63498a324..4e8f92d6632657 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 00000000000000..84f8a79e0cc17a
--- /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 00000000000000..4c729aeea7ccad
--- /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 00000000000000..0bcd8f171c5bbf
--- /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 f2ca794437da9a..0705d5ebb49905 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 d03049bf316b0d..e2bf1c61a542fe 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 24597119e0b0f2..c25b89b947aa8d 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 17028bade5a3e1..280b9d65b7eb2f 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/SearchBox.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
index 9aa88d92d513e2..7c0b38ff5090ba 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
@@ -1,10 +1,9 @@
 import { styled } from '../../Utilities';
 import { SearchBoxBase } from './SearchBox.base';
-// tslint:disable-next-line:no-unused-variable
 import { ISearchBoxProps } from './SearchBox.types';
 import { getStyles } from './SearchBox.styles';
 
-export const SearchBox = styled(
+export const SearchBox: (props: ISearchBoxProps) => JSX.Element = styled(
   SearchBoxBase,
   getStyles
 );
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 d8e4ff0d94ddce..18b918e363cda8 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 ea8c6904b138fd..dc8155cc4fdead 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 00000000000000..bb977a155edf5e
--- /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 00000000000000..9de49cc7727a29
--- /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 00000000000000..a0b55e39b7aa93
--- /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 0bc20e5cd2df66..de5b948f2029b5 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 1d4683d080ebaf..c429e96a492bfc 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 c979689353ff00..9a86ef0b661d2b 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 45a9a321d4f048..a42f73fd468182 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 6af3e305401153..a0a09e9dc38d5c 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';
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 9da5f25de6ba14..5664501ff87173 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();
     }
   }
 
@@ -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 b14469fdf530ff..8e920707534cd7 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 00000000000000..3d5cbad81fc63d
--- /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 00000000000000..336a1ec3087a06
--- /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 00000000000000..0b7c0e00e7c2e1
--- /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 06768a87f98a7e..3dc8d58031bcc3 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.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
index 5ca3fcdf8e4826..819257f2ee0fb2 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,8 +202,8 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
             type='text'
             role='spinbutton'
             aria-labelledby={ label && this._labelId }
-            aria-valuenow={ !Number.isNaN(Number(value)) ? Number(value) : undefined }
-            aria-valuetext={ Number.isNaN(Number(value)) ? value : undefined }
+            aria-valuenow={ !isNaN(Number(value)) ? Number(value) : undefined }
+            aria-valuetext={ isNaN(Number(value)) ? value : undefined }
             aria-valuemin={ min }
             aria-valuemax={ max }
             onBlur={ this._onBlur }
@@ -263,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;
     }
 
@@ -278,7 +278,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
       this._stop();
     }
 
-    this._input.value.select();
+    this._input.current.select();
 
     this.setState({ isFocused: true });
 
@@ -331,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.
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 faa27929fd1e64..792468a7df36bd 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 425bbedc03f31c..682a21f619e607 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
@@ -183,7 +183,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
             &::-moz-focus-inner {
               border: 0;
             }
-            .ms-Fabric.is-focusVisible &:focus:after {
+            .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #ffffff;
               bottom: 0px;
               content: "";
@@ -194,7 +194,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
               top: 0px;
               z-index: 1;
             }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
               border: none;
               bottom: -2px;
               left: -2px;
@@ -296,7 +296,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
             &::-moz-focus-inner {
               border: 0;
             }
-            .ms-Fabric.is-focusVisible &:focus:after {
+            .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #ffffff;
               bottom: 0px;
               content: "";
@@ -307,7 +307,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
               top: 0px;
               z-index: 1;
             }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
               border: none;
               bottom: -2px;
               left: -2px;
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 00000000000000..6c04426cee37ad
--- /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 00000000000000..9b76bf0893ed0a
--- /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 00000000000000..8c27fca6c4652d
--- /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 0b5eaf10976f71..12aebe89e02d5c 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 643a1eb4193647..7a9ece0aebe6be 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 2320f732fcacbf..4a5bddc4dbc88a 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 42fd1e94b7a824..28003b08bf94f7 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 cdefb7c4640e38..91a93c6dfd9527 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 50b8480d4cffc4..8eb4c3826fde37 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 85bc98d29a718d..c2c3b9e3cfe314 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 7a3474e498d411..67338c38eec272 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 8061900cebccc2..b4070a4dc7be09 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,9 @@
 import { styled } from '../../Utilities';
 import { SpinnerBase } from './Spinner.base';
-import { ISpinnerProps } from './Spinner.types';
 import { getStyles } from './Spinner.styles';
+import { ISpinnerProps } from './Spinner.types';
 
-export const Spinner = styled(
+export const Spinner: (props: ISpinnerProps) => JSX.Element = 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 109022603e717a..09b662b913ec18 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 4f5a537acafa7f..b829e244ced780 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 00000000000000..d265a7d6eb922f
--- /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 00000000000000..39e616d86e2443
--- /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 00000000000000..5e7970a9b658ea
--- /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 48c586c10194f1..6b2705577c2c95 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 6b08abea6d4ea6..325fb0904e4c9d 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 6bd4af289bac70..5e28fc819c92af 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/ColorPickerGridCell.styles.ts b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts
index 52a197c9b7df6c..22e4fe973534c7 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts
@@ -43,8 +43,8 @@ export const getStyles = (props: IColorPickerGridCellStyleProps): IColorPickerGr
         height: 40,
         selectors: {
           [HighContrastSelector]: { border: 'none' },
-          '.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after': { border: 'none' },
-          '.ms-Fabric.is-focusVisible &:focus $svg': getSvgSelectorStyles(theme.palette.neutralQuaternaryAlt, false),
+          '.ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after': { border: 'none' },
+          '.ms-Fabric--isFocusVisible &:focus $svg': getSvgSelectorStyles(theme.palette.neutralQuaternaryAlt, false),
           ':hover $svg': getSvgSelectorStyles(theme.palette.neutralQuaternaryAlt, true),
           ':focus $svg': getSvgSelectorStyles(theme.palette.neutralQuaternaryAlt, false),
           ':active $svg': getSvgSelectorStyles(ACTIVE_BORDER_COLOR, false),
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx
index 6aede2a65e56cf..78e87264ac498b 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx
@@ -2,11 +2,10 @@ import {
   styled
 } from '../../Utilities';
 import { ColorPickerGridCellBase } from './ColorPickerGridCell.base';
-// tslint:disable-next-line:no-unused-variable
 import { IColorPickerGridCellProps } from './ColorPickerGridCell.types';
 import { getStyles } from './ColorPickerGridCell.styles';
 
-export const ColorPickerGridCell = styled(
+export const ColorPickerGridCell: (props: IColorPickerGridCellProps) => JSX.Element = styled(
   ColorPickerGridCellBase,
   getStyles
 );
\ No newline at end of file
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 c4f7b0d55e540b..f2402c41a2e0fa 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/SwatchColorPicker.test.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx
index c53a847113d198..89cc66b8b738e3 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx
@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import * as renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import { SwatchColorPickerBase } from './SwatchColorPicker.base';
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx
index ac4c76b3f53482..ba1bf08029b969 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx
@@ -1,10 +1,9 @@
 import { styled } from '../../Utilities';
 import { SwatchColorPickerBase } from './SwatchColorPicker.base';
-// tslint:disable-next-line:no-unused-variable
 import { ISwatchColorPickerProps } from './SwatchColorPicker.types';
 import { getStyles } from './SwatchColorPicker.styles';
 
-export const SwatchColorPicker = styled(
+export const SwatchColorPicker: (props: ISwatchColorPickerProps) => JSX.Element = styled(
   SwatchColorPickerBase,
   getStyles
 );
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 0fae1ac85b1c29..6d6d5222633976 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 0a55445b0bccb3..1cd9eaba18ec41 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
@@ -90,7 +90,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -101,7 +101,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -112,10 +112,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -283,7 +283,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -294,7 +294,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -305,10 +305,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -476,7 +476,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -487,7 +487,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -498,10 +498,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -669,7 +669,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -680,7 +680,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -691,10 +691,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -866,7 +866,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -877,7 +877,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -888,10 +888,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -1059,7 +1059,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -1070,7 +1070,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -1081,10 +1081,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -1252,7 +1252,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -1263,7 +1263,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -1274,10 +1274,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -1445,7 +1445,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -1456,7 +1456,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -1467,10 +1467,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -1642,7 +1642,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -1653,7 +1653,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -1664,10 +1664,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -1835,7 +1835,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -1846,7 +1846,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -1857,10 +1857,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -2028,7 +2028,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -2039,7 +2039,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -2050,10 +2050,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
@@ -2221,7 +2221,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &::-moz-focus-inner {
                   border: 0;
                 }
-                .ms-Fabric.is-focusVisible &:focus:after {
+                .ms-Fabric--isFocusVisible &:focus:after {
                   border: 1px solid #ffffff;
                   bottom: 0px;
                   content: "";
@@ -2232,7 +2232,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   top: 0px;
                   z-index: 1;
                 }
-                @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+                @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                   border: none;
                   bottom: -2px;
                   left: -2px;
@@ -2243,10 +2243,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 @media screen and (-ms-high-contrast: active){& {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after {
+                .ms-Fabric--isFocusVisible &:focus, .ms-Fabric--isFocusVisible &:focus::after {
                   border: none;
                 }
-                .ms-Fabric.is-focusVisible &:focus $svg {
+                .ms-Fabric--isFocusVisible &:focus $svg {
                   border-color: #dadada;
                   border: 4px solid;
                   box-shadow: 0 0 0 1px #969696;
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 00000000000000..6520df00b232bb
--- /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 00000000000000..7c7632931d36f4
--- /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 00000000000000..bf7c8218c478e1
--- /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 21ab41074178e3..4afbda646dded6 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>
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 cb71202e1c7a6a..a2974da0e16e48 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';
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 ceb246fb4f4216..73d7599b7d9def 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 79fb4ae6743734..ae41dc78b8bde0 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 10b1490033ca66..955cf23b673940 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 00000000000000..3f69fd9d5b86b1
--- /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 91bd4ec369aca8..70d0269e7a408b 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 bdfc2d2a27c656..d24cc8e48886d6 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 7293397f80aaf1..16b9e505ad00be 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 aed369491e4923..9ead533efbb4b4 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 7448ab573a9b36..d9379c6cf6d259 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 00000000000000..57569386ee6cd1
--- /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 00000000000000..82f9161ea475de
--- /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 00000000000000..7eb59c12207525
--- /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.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
index 309fd7ee2ca28a..b3f0576d2fb88e 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,26 +223,26 @@ 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;
     }
   }
 
@@ -250,14 +250,14 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
    * Gets the selection start of the text field
    */
   public get selectionStart(): number | null {
-    return this._textElement.value ? this._textElement.value.selectionStart : -1;
+    return this._textElement.current ? this._textElement.current.selectionStart : -1;
   }
 
   /**
    * Gets the selection end of the text field
    */
   public get selectionEnd(): number | null {
-    return this._textElement.value ? this._textElement.value.selectionEnd : -1;
+    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 as HTMLInputElement).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;
   }
@@ -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 41d6d0bf120031..f7483ab9b7cc88 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
@@ -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 15ebbbd00d5196..6ed644c32ffc7f 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/docs/TextFieldDonts.md b/packages/office-ui-fabric-react/src/components/TextField/docs/TextFieldDonts.md
new file mode 100644
index 00000000000000..0e922b792ca5d0
--- /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 00000000000000..3d14cce44df2cd
--- /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 00000000000000..2c19bb3bb700d4
--- /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 f64d386df7aae0..fc5e1faac55076 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 a2e9029cae05b5..db31a9f3837db2 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 0413006a10d4f2..b4f4e4650903cf 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 a75f9aa6d44842..bdabb2a79d6dd0 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 8337417c498d0b..ce2e628509bf64 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 a9b365f259e138..3a18f8f2af7ade 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 e886d1d56aa40d..2e10e49823cad6 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 480dabd284aa03..3ad5c5efaca9b0 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 00000000000000..fd5b5cf49f8244
--- /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 e9f43a8cf58a84..5f64d4adead6de 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 eb2ce1a293cb2c..fb3cdc4da3debb 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 d2a5b9a69f8e68..f893f9260e4a28 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 498026d6798241..7b2195fdcd3522 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 9c47a9996c00c2..4b50b91b822df9 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 4ec96447ffa23b..20b2d0efda0b01 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 423e2396245867..00000000000000
--- 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 00000000000000..216e30099d13fa
--- /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 fea63772c11c85..031342e12c0927 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 00000000000000..bae1bf0d85c9f5
--- /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 4e696df67c9c99..d89b52cde3e504 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 00000000000000..b117ba5ddd0bb9
--- /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 8889c8b957c5aa..00000000000000
--- 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 e34aeb73d06002..1f59502bf88b2f 100644
--- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
@@ -8,9 +8,7 @@ import {
 import {
   IColor,
   getContrastRatio,
-  updateA,
   isDark,
-  getColorFromString
 } from 'office-ui-fabric-react/lib/utilities/color/index';
 
 import {
@@ -38,12 +36,8 @@ export interface IThemeGeneratorPageState {
   colorPickerVisible: boolean;
 }
 
-const BackgroundImageUriKey = 'backgroundImageUri';
-const BackgroundOverlayKey = 'backgroundOverlay';
-
 export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageState> {
   private _semanticSlotColorChangeTimeout: number;
-  private _imgUrl: string;
 
   constructor(props: {}) {
     super(props);
@@ -75,7 +69,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     loadTheme({ palette: themeRules });
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { colorPickerVisible, colorPickerSlotRule, colorPickerElement } = this.state;
 
     const fabricThemeSlots =
@@ -120,7 +114,8 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
           * We use that API to identify the most prominent background and foreground colors, and the accent color,
           * and generate a theme based off of those.
           * Since this API requires a personal subscription key, you'll have to enlist and insert your subscription
-          * key in _makeThemeFromImg() below. Then, just uncomment this section. */}
+          * key in _makeThemeFromImg() @ https://raw.githubusercontent.com/cliffkoh/office-ui-fabric-react/9c95e9b92f8caa1fe5ffb9da769ce0921a5272ed/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
+          * Then, just uncomment this section. */}
         {/*}
         <div style={ { display: 'flex' } }>
           <div>URL to image:&nbsp;</div>
@@ -234,108 +229,6 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     );
   }
 
-  /* tslint:disable:no-unused-variable */
-  private _makeThemeFromImg = (): void => {
-    /* tslint:enable:no-unused-variable */
-    this._imgUrl = (document.getElementById('imageUrl') as HTMLInputElement).value;
-    (document.getElementById('imagePreview') as HTMLImageElement).src = this._imgUrl;
-
-    if (this._imgUrl) {
-      const xhr = new XMLHttpRequest();
-      xhr.addEventListener('load', this._cognitiveVisionCallback.bind(this));
-      // you may need to change the URL here
-      xhr.open('POST', 'https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Description%2CColor&details=&language=en');
-      xhr.setRequestHeader('Content-Type', 'application/json');
-      alert('You forgot to set the subscription key!');
-      xhr.setRequestHeader('Ocp-Apim-Subscription-Key', 'YourSubscriptionKeyHere'); // put your subscription key here
-      xhr.send('{ "url": "' + this._imgUrl + '" }');
-    } else {
-      // remove related properties from theme
-      const { themeRules } = this.state;
-      if (themeRules.hasOwnProperty(BackgroundImageUriKey)) {
-        delete themeRules[BackgroundImageUriKey];
-      }
-      if (themeRules.hasOwnProperty(BackgroundOverlayKey)) {
-        delete themeRules[BackgroundOverlayKey];
-      }
-      this.setState({ themeRules: themeRules }, this._makeNewTheme);
-    }
-  }
-
-  private _cognitiveVisionCallback = (e: any): void => {
-    const xhr = e.target;
-    if (xhr.status === 200) {
-      const response = JSON.parse(xhr.response);
-
-      document.getElementById('imageDescription')!.innerHTML = response.description.captions[0].text;
-
-      /* API returns:
-       response.color.accentColor
-       response.color.dominantColorBackground
-       response.color.dominantColorForeground */
-
-      // converts a returned color from a word into a hex value conforming to our palette
-      const getHexFromColor = (color: string, isBg: boolean) => {
-        // todo: could use more logic based on isInverted and isBg
-        switch (color.toLowerCase()) {
-          case 'black': return '#1f1f1f';
-          case 'blue': return '#0078d4';
-          case 'brown': return '#754d12';
-          case 'gray':
-          case 'grey': return isBg ? '#444' : '#ccc';
-          case 'green': return '#107c10';
-          case 'orange': return '#ff8c00';
-          case 'pink': return '#e3008c';
-          case 'purple': return '#5c2d91';
-          case 'red': return '#e81123';
-          case 'teal': return '#008272';
-          case 'white': return '#fff';
-          case 'yellow': return '#fff100';
-        }
-        alert('Error: Unexpected color passed to getHexFromColor(): ' + color);
-        return '#fff';
-      };
-
-      const { themeRules } = this.state;
-      const bgColor = getHexFromColor(response.color.dominantColorBackground, true);
-      const bgColorIsDark = isDark(getColorFromString(bgColor)!);
-      ThemeGenerator.setSlot(
-        themeRules[BaseSlots[BaseSlots.backgroundColor]],
-        bgColor,
-        bgColorIsDark,
-        true,
-        true);
-      ThemeGenerator.setSlot(
-        themeRules[BaseSlots[BaseSlots.primaryColor]],
-        '#' + response.color.accentColor,
-        bgColorIsDark,
-        true,
-        true);
-      ThemeGenerator.setSlot(
-        themeRules[BaseSlots[BaseSlots.foregroundColor]],
-        getHexFromColor(response.color.dominantColorForeground, false),
-        bgColorIsDark,
-        true,
-        true);
-
-      themeRules[BackgroundImageUriKey] = {
-        name: BackgroundImageUriKey,
-        value: 'url(\'' + this._imgUrl + '\')',
-        dependentRules: []
-      };
-      themeRules[BackgroundOverlayKey] = {
-        name: BackgroundOverlayKey,
-        color: updateA((themeRules[BaseSlots[BaseSlots.backgroundColor]]).color!, 50),
-        dependentRules: []
-      };
-
-      this.setState({ themeRules: themeRules }, this._makeNewTheme);
-
-    } else {
-      alert('Error ' + xhr.status + ': ' + xhr.statusText);
-    }
-  }
-
   private _colorPickerOnDismiss = (): void => {
     this.setState({ colorPickerVisible: false });
   }
@@ -382,7 +275,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 +376,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 cbe3ffdcaa4d78..4e03cf51d04c83 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.test.tsx b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx
index 0fb4e096454e45..8447805343e8ef 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';
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 c1b30f53390983..73af90060565b9 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 2373ebbf3031bf..4f3912945d6c93 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 779d19d6155944..4845d69bb36da2 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
@@ -76,7 +76,7 @@ exports[`Toggle renders toggle correctly 1`] = `
           &::-moz-focus-inner {
             border: 0;
           }
-          .ms-Fabric.is-focusVisible &:focus:after {
+          .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #ffffff;
             bottom: -2px;
             content: "";
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 00000000000000..c23d5922234655
--- /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 00000000000000..50e927ea935b9b
--- /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 00000000000000..ff7eb45edd0698
--- /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 0076984be1c804..056f6446415d66 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 9df6ebe041da36..1efd3e65416b5c 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 3053d4e2bc288a..614ce2800e6b7e 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 0f2d029f8e6f00..9b9151684ec737 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 d0dea1e316a5d1..da1fd15334a47f 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 00000000000000..1b62158e8b11d2
--- /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 8e849c64631d41..cea210eb976d11 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 85d195fc33d61a..057bff8ea3f903 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 64f49a9e3a0177..b7eb204a7a9037 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>
@@ -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 271599cfc9c4ef..120de802b6286d 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 }
@@ -253,6 +253,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
           isMostRecentlyUsedVisible={ this.state.isMostRecentlyUsedVisible }
           isResultsFooterVisible={ this.state.isResultsFooterVisible }
           refocusSuggestions={ this.refocusSuggestions }
+          removeSuggestionAriaLabel={ this.props.removeButtonAriaLabel }
           { ...this.props.pickerSuggestionsProps as any }
         />
       </Callout>
@@ -280,23 +281,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 +348,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 +388,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 +425,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
@@ -444,11 +445,14 @@ 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 (this.props.inputProps && this.props.inputProps.onBlur) {
+      this.props.inputProps.onBlur(ev as React.FocusEvent<HTMLInputElement>);
+    }
+    // Only blur the entire component if an unrelated element gets focus. Otherwise treat it as though it still has focus.
     if (!elementContains(this.root.value!, 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>);
+      if (this.props.onBlur) {
+        this.props.onBlur(ev as React.FocusEvent<HTMLInputElement>);
       }
     }
   }
@@ -466,8 +470,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 +491,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 +505,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 +528,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 +567,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 +585,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 +598,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 +649,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 +679,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 +690,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 +703,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 +721,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 +749,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/BasePicker.types.ts b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts
index 5c5d3439a901a8..bd30168ae581cd 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts
+++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts
@@ -112,7 +112,7 @@ export interface IBasePickerProps<T> extends React.Props<any> {
   /**
    * Function that specifies how arbitrary text entered into the well is handled.
    */
-  createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel<T>;
+  createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel<T> | T;
   /**
    * Aria label for the "X" button in the selected item component.
    * @default ''
@@ -219,4 +219,11 @@ export interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement>
    * Screen reader label to apply to an input element.
    */
   'aria-label'?: string;
-}
\ No newline at end of file
+  /**
+   * The default value to be visible when the autofill first created.
+   * This is different than placeholder text because the placeholder text will disappear and re-appear. This
+   * text persists until deleted or changed.
+   */
+  defaultVisibleValue?: string;
+
+}
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 49a001a4e862a7..1db27244d97c04 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 6a928a6039e632..4c36b1929e7f52 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 1a48eb28b8d41d..4b6eda8380d092 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 00000000000000..cb03a88771a89f
--- /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 00000000000000..48856a3612fc87
--- /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 00000000000000..473ac1a8f39cc2
--- /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 00000000000000..63fc62c42dbf4f
--- /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 218833888421ef..29114c2cbe1510 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 c8a4d6fe6eb526..1b148db35156f1 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 bc1f2904fd6e8d..057b0f6c0e91ab 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 761e45cc7bafff..e3b67d766656c2 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,14 +22,15 @@ export interface ISuggestionsState {
 }
 
 export class SuggestionsItem<T> extends BaseComponent<ISuggestionItemProps<T>, {}> {
-  public render() {
+  public render(): JSX.Element {
     const {
       suggestionModel,
       RenderSuggestion,
       onClick,
       className,
       onRemoveItem,
-      isSelectedOverride
+      isSelectedOverride,
+      removeButtonAriaLabel
     } = this.props;
     return (
       <div
@@ -51,8 +52,8 @@ export class SuggestionsItem<T> extends BaseComponent<ISuggestionItemProps<T>, {
         { this.props.showRemoveButton ? (
           <IconButton
             iconProps={ { iconName: 'Cancel', style: { fontSize: '12px' } } }
-            title='Remove'
-            ariaLabel='Remove'
+            title={ removeButtonAriaLabel }
+            ariaLabel={ removeButtonAriaLabel }
             onClick={ onRemoveItem }
             className={ css('ms-Suggestions-closeButton', styles.closeButton) }
           />) : (null)
@@ -75,21 +76,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,
@@ -218,14 +219,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);
@@ -235,7 +236,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;
@@ -243,7 +244,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);
@@ -254,12 +255,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;
@@ -275,7 +276,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 {
@@ -294,37 +295,38 @@ 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);
     }
   }
 
   private _renderSuggestions(): JSX.Element {
     const {
       onRenderSuggestion,
+      removeSuggestionAriaLabel,
       suggestionsItemClassName,
       resultsMaximumNumber,
       showRemoveButtons,
@@ -359,6 +361,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
               onClick={ this._onClickTypedSuggestionsItem(suggestion.item, index) }
               className={ suggestionsItemClassName }
               showRemoveButton={ showRemoveButtons }
+              removeButtonAriaLabel={ removeSuggestionAriaLabel }
               onRemoveItem={ this._onRemoveTypedSuggestionsItem(suggestion.item, index) }
             />
           </div>) }
@@ -400,4 +403,4 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
       ev.stopPropagation();
     };
   }
-}
\ No newline at end of file
+}
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 02224fe0f0981b..aaf9c08288daea 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
@@ -131,6 +131,10 @@ export interface ISuggestionsProps<T> extends React.Props<any> {
    * An ARIA label for the container that is the parent of the suggestions.
    */
   suggestionsContainerAriaLabel?: string;
+  /**
+   * An ARIA label to use for the buttons to remove individual suggestions.
+   */
+  removeSuggestionAriaLabel?: string;
 }
 
 export interface ISuggestionItemProps<T> {
@@ -143,4 +147,8 @@ export interface ISuggestionItemProps<T> {
   id?: string;
   showRemoveButton?: boolean;
   isSelectedOverride?: boolean;
-}
\ No newline at end of file
+  /**
+   * The ARIA label for the button to remove the suggestion from the list.
+   */
+  removeButtonAriaLabel?: string;
+}
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 140543d2b997a4..860be11fcf86f9 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> | T) {
     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 5a8510f4773616..5babab728c38e7 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
@@ -56,7 +56,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -67,7 +67,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -158,7 +158,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -169,7 +169,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -260,7 +260,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -271,7 +271,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -362,7 +362,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -373,7 +373,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -464,7 +464,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -475,7 +475,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -566,7 +566,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -577,7 +577,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -668,7 +668,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -679,7 +679,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -770,7 +770,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -781,7 +781,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -872,7 +872,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -883,7 +883,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -974,7 +974,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -985,7 +985,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -1076,7 +1076,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -1087,7 +1087,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -1178,7 +1178,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -1189,7 +1189,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -1280,7 +1280,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -1291,7 +1291,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -1382,7 +1382,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -1393,7 +1393,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -1484,7 +1484,7 @@ exports[`Suggestions renders a list properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -1495,7 +1495,7 @@ exports[`Suggestions renders a list properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -1600,7 +1600,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -1611,7 +1611,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -1702,7 +1702,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -1713,7 +1713,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -1804,7 +1804,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -1815,7 +1815,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -1906,7 +1906,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -1917,7 +1917,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -2008,7 +2008,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -2019,7 +2019,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -2110,7 +2110,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -2121,7 +2121,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -2212,7 +2212,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -2223,7 +2223,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -2314,7 +2314,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -2325,7 +2325,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -2416,7 +2416,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -2427,7 +2427,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -2518,7 +2518,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -2529,7 +2529,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -2620,7 +2620,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -2631,7 +2631,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -2722,7 +2722,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -2733,7 +2733,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -2824,7 +2824,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -2835,7 +2835,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -2926,7 +2926,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -2937,7 +2937,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
@@ -3028,7 +3028,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
               &::-moz-focus-inner {
                 border: 0;
               }
-              .ms-Fabric.is-focusVisible &:focus:after {
+              .ms-Fabric--isFocusVisible &:focus:after {
                 border: 1px solid #ffffff;
                 bottom: 0px;
                 content: "";
@@ -3039,7 +3039,7 @@ exports[`Suggestions scrolls to selected index properly 1`] = `
                 top: 0px;
                 z-index: 1;
               }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric.is-focusVisible &:focus:after {
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
                 border: none;
                 bottom: -2px;
                 left: -2px;
diff --git a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx
index 6dfa5429b48210..8edd8e8c2641dd 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx
@@ -1,7 +1,6 @@
 /* tslint:disable */
 import * as React from 'react';
 import {
-  BaseComponent,
   css
 } from '../../../Utilities';
 /* tslint:enable */
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 6ed2487d4f220f..999cb7667e9d9f 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
@@ -44,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"
@@ -111,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 00000000000000..6d96036aa25cbf
--- /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 5fc74fd7b6acc9..084f4b17201fd2 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 f8711dae7a53ba..238a23c385520e 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 00000000000000..b5e19a2e80c92a
--- /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 61cd171c17c190..563450d8887281 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 2aeff4d2bd5573..c1e3cb070a11d4 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 00000000000000..1addb39e0be728
--- /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 3fb721541bf9f6..d95a64073f4b21 100644
--- a/packages/office-ui-fabric-react/src/demo/index.tsx
+++ b/packages/office-ui-fabric-react/src/demo/index.tsx
@@ -1,12 +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 { ComponentPage } from '@uifabric/example-app-base';
+import { ComponentPage, IAppLink, IAppLinkGroup } from '@uifabric/example-app-base';
 
 import './index.scss';
 import './ColorStyles.scss';
@@ -21,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);
@@ -29,14 +27,14 @@ 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(
@@ -46,14 +44,14 @@ function _onLoad() {
     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(
@@ -80,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 f7b08e9ab90a64..6e59ab688ff293 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 49d5bbd437fa72..dceb756e2433fe 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 e296244f73c737..434710ccbe961e 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 4e977978f33066..cec552f76a828a 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 7f797273c78cfb..b7a7deff2215c1 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 0f9f765680ac8e..e7d157dbe55aa5 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 339e8b16d5d1de..35b02a2de1dd32 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 5e04310d6069f9..07b488edbd2424 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 9196a7431f13b3..9ac9396e5ba951 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 f7c2137e4a12ca..a9f8378465278a 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 565c12ab7a19fd..ef629a69cb75f8 100644
--- a/packages/office-ui-fabric-react/src/utilities/dragdrop/DragDropHelper.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/dragdrop/DragDropHelper.tsx
@@ -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 eb445c226724eb..e995da28eaf2f0 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/Grid.test.tsx b/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx
index feb7945da8ddd1..019a57e140a1b2 100644
--- a/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx
@@ -1,7 +1,4 @@
-/* tslint:disable:no-unused-variable */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
 import { GridBase } from './Grid.base';
 import { getStyles } from './Grid.styles';
 import { DefaultButton } from '../../Button';
diff --git a/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx b/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx
index 335f88b11d05da..423306c67653b1 100644
--- a/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx
@@ -2,11 +2,10 @@ import {
   styled
 } from '../../Utilities';
 import { GridBase } from './Grid.base';
-// tslint:disable-next-line:no-unused-variable
 import { IGridProps } from './Grid.types';
 import { getStyles } from './Grid.styles';
 
-export const Grid = styled(
+export const Grid: (props: IGridProps) => JSX.Element = styled(
   GridBase,
   getStyles
 );
\ No newline at end of file
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 8b9dd4f93b6854..42d923e344cffd 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 7cb5696286fb9a..81274a20a840bb 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 b4f477965e9684..44c30714d61e18 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 ee4249d64a33bb..45a718819a64bf 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 7a6d2035280a17..a80323a964b2d9 100644
--- a/packages/office-ui-fabric-react/src/utilities/router/Router.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/router/Router.tsx
@@ -13,15 +13,15 @@ export interface IRouterProps {
 }
 
 export class Router extends BaseComponent<IRouterProps, {}> {
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._events.on(window, 'hashchange', () => this.forceUpdate());
   }
 
-  public render() {
+  public render(): JSX.Element | null {
     return this._resolveRoute();
   }
 
-  private _getPath() {
+  private _getPath(): string {
     let path = location.hash;
     const hashIndex = path.lastIndexOf('#'),
       questionMarkIndex = path.indexOf('?');
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 ca3bba566df62d..33dc1f1744013b 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 7eae905e116b1a..dd72b8a52bb0be 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 414c8d413b013b..37253ace242663 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>
@@ -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 f9ff08cfc0df97..88cb5c3c1db900 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) {
@@ -220,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;
@@ -271,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;
       }
@@ -300,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)) {
@@ -366,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.
@@ -392,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();
@@ -404,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();
@@ -435,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) {
@@ -445,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;
 
@@ -464,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.
@@ -475,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)
@@ -484,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);
 
@@ -504,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;
@@ -513,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);
 
@@ -524,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;
     }
 
@@ -538,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;
     }
@@ -566,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;
@@ -581,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 00000000000000..fe073967737dbf
--- /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 e0b1e06df8b383..26859311ce3526 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/tsconfig.json b/packages/office-ui-fabric-react/tsconfig.json
index 4c61f9a2ea41d3..bb02fdf16f3a30 100644
--- a/packages/office-ui-fabric-react/tsconfig.json
+++ b/packages/office-ui-fabric-react/tsconfig.json
@@ -9,7 +9,7 @@
     "sourceMap": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "noUnusedLocals": false,
+    "noUnusedLocals": true,
     "forceConsistentCasingInFileNames": true,
     "strictNullChecks": true,
     "noImplicitAny": true,
diff --git a/packages/office-ui-fabric-react/tslint.json b/packages/office-ui-fabric-react/tslint.json
index 7d6cf89d5c8c04..9dcefdf589368e 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 836a4130eb4483..9270fef3ec9284 100644
--- a/packages/styling/CHANGELOG.json
+++ b/packages/styling/CHANGELOG.json
@@ -1,6 +1,112 @@
 {
   "name": "@uifabric/styling",
   "entries": [
+    {
+      "version": "5.27.0",
+      "tag": "@uifabric/styling_v5.27.0",
+      "date": "Wed, 25 Apr 2018 05:32:09 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "802a2c0847830acfbf47e2dd058da54d9dfb15ae",
+            "comment": "Add theme slots for DetailsList header colors"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.27.0 <6.0.0` to `>=5.28.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.16.0 <6.0.0` to `>=5.16.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.26.0",
+      "tag": "@uifabric/styling_v5.26.0",
+      "date": "Mon, 23 Apr 2018 10:24:54 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "2bbc7950bd9f10ea1e792dcb1155c625aa8e8f4f",
+            "comment": "The getFocusStyle helper has been adjusted to use the `ms-Fabric--isFocusEnabled` class name, rather than `ms-Fabric.is-focusEnabled`."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.26.0 <6.0.0` to `>=5.27.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.2 <6.0.0` to `>=5.16.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "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 1a3a1b6bffc569..b808b3494dd938 100644
--- a/packages/styling/CHANGELOG.md
+++ b/packages/styling/CHANGELOG.md
@@ -1,6 +1,46 @@
 # 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 Wed, 25 Apr 2018 05:32:09 GMT and should not be manually modified.
+
+## 5.27.0
+Wed, 25 Apr 2018 05:32:09 GMT
+
+### Minor changes
+
+- Add theme slots for DetailsList header colors
+
+## 5.26.0
+Mon, 23 Apr 2018 10:24:54 GMT
+
+### Minor changes
+
+- The getFocusStyle helper has been adjusted to use the `ms-Fabric--isFocusEnabled` class name, rather than `ms-Fabric.is-focusEnabled`.
+
+## 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 270f437952d973..6a8ecb9c05d77b 100644
--- a/packages/styling/package.json
+++ b/packages/styling/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/styling",
-  "version": "5.23.0",
+  "version": "5.27.0",
   "description": "Defines the core Office UI Fabric styles through a JavaScript interface.",
   "repository": {
     "type": "git",
@@ -29,8 +29,8 @@
   },
   "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.28.0 <6.0.0",
+    "@uifabric/merge-styles": ">=5.16.1 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/packages/styling/src/interfaces/ISemanticColors.ts b/packages/styling/src/interfaces/ISemanticColors.ts
index 25744652614672..0a065e26d847b9 100644
--- a/packages/styling/src/interfaces/ISemanticColors.ts
+++ b/packages/styling/src/interfaces/ISemanticColors.ts
@@ -271,6 +271,16 @@ export interface ISemanticColors {
    */
   listItemBackgroundCheckedHovered: string;
 
+  /**
+   * The background color for a hovered list header.
+   */
+  listHeaderBackgroundHovered: string;
+
+  /**
+   * The background color for a pressed list header.
+   */
+  listHeaderBackgroundPressed: string;
+
   /**
    * The color of a link.
    */
@@ -286,4 +296,4 @@ export interface ISemanticColors {
 
   /** DEPRECATED use listText instead */
   listTextColor: string;
-}
\ No newline at end of file
+}
diff --git a/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts b/packages/styling/src/styles/PulsingBeaconAnimationStyles.ts
index eac7e609045cf6..bc15dbadd6a600 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/getFocusStyle.ts b/packages/styling/src/styles/getFocusStyle.ts
index 372f2f08d2c90c..7c61d8df58dc68 100644
--- a/packages/styling/src/styles/getFocusStyle.ts
+++ b/packages/styling/src/styles/getFocusStyle.ts
@@ -1,7 +1,7 @@
 import { IRawStyle } from '@uifabric/merge-styles/lib/index';
 import { ITheme } from '../interfaces/index';
 import { HighContrastSelector } from './CommonStyles';
-
+import { IsFocusVisibleClassName } from '@uifabric/utilities/lib/index';
 /**
  * Generates a focus style which can be used to define an :after focus border.
  *
@@ -29,7 +29,7 @@ export function getFocusStyle(
         border: '0'
       },
 
-      '.ms-Fabric.is-focusVisible &:focus:after': {
+      [`.${IsFocusVisibleClassName} &:focus:after`]: {
         content: '""',
         position: 'absolute',
         left: inset + 1,
diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts
index 2611df309824f9..2b21b0953bb0b0 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,
@@ -171,18 +178,30 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean): ISema
     listItemBackgroundChecked: p.neutralLight,
     listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt,
 
+    listHeaderBackgroundHovered: p.neutralLighter,
+    listHeaderBackgroundPressed: p.neutralLight,
+
     link: p.themePrimary,
     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 409572ed25b5a2..da3967c4ea26d8 100644
--- a/packages/utilities/CHANGELOG.json
+++ b/packages/utilities/CHANGELOG.json
@@ -1,6 +1,108 @@
 {
   "name": "@uifabric/utilities",
   "entries": [
+    {
+      "version": "5.28.0",
+      "tag": "@uifabric/utilities_v5.28.0",
+      "date": "Wed, 25 Apr 2018 05:32:09 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "6bfddc1c44aa7afcdf053467985490027eb5edcd",
+            "comment": "Adding `isDirectionalKeyCode` helper."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.16.0 <6.0.0` to `>=5.16.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.27.0",
+      "tag": "@uifabric/utilities_v5.27.0",
+      "date": "Mon, 23 Apr 2018 10:24:54 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "2bbc7950bd9f10ea1e792dcb1155c625aa8e8f4f",
+            "comment": "The focus styling no longer adds \"ms-Fabric\" classname to body. Instead a very specific class for controlling focus rects is added, which should not impact any existing code."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.15.2 <6.0.0` to `>=5.16.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.26.0",
+      "tag": "@uifabric/utilities_v5.26.0",
+      "date": "Fri, 20 Apr 2018 23:06:06 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "65c2b22952582b1e83d68e109101116a6255d074",
+            "comment": "InputMask: Added inputMask utilitiy and tests"
+          }
+        ]
+      }
+    },
+    {
+      "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 26e970fc07c2ce..f3bd9ec3309550 100644
--- a/packages/utilities/CHANGELOG.md
+++ b/packages/utilities/CHANGELOG.md
@@ -1,6 +1,47 @@
 # 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 Wed, 25 Apr 2018 05:32:09 GMT and should not be manually modified.
+
+## 5.28.0
+Wed, 25 Apr 2018 05:32:09 GMT
+
+### Minor changes
+
+- Adding `isDirectionalKeyCode` helper.
+
+## 5.27.0
+Mon, 23 Apr 2018 10:24:54 GMT
+
+### Minor changes
+
+- The focus styling no longer adds "ms-Fabric" classname to body. Instead a very specific class for controlling focus rects is added, which should not impact any existing code.
+
+## 5.26.0
+Fri, 20 Apr 2018 23:06:06 GMT
+
+### Minor changes
+
+- InputMask: Added inputMask utilitiy and tests
+
+## 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 c8b8d070c291b6..312dc7240b53e7 100644
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/utilities",
-  "version": "5.23.0",
+  "version": "5.28.0",
   "description": "Office UI Fabric utilities for building React components.",
   "main": "lib/index.js",
   "typings": "lib-es2015/index.d.ts",
@@ -36,7 +36,7 @@
     "sinon": "^4.1.3"
   },
   "dependencies": {
-    "@uifabric/merge-styles": ">=5.15.0 <6.0.0",
+    "@uifabric/merge-styles": ">=5.16.1 <6.0.0",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"
   },
diff --git a/packages/utilities/src/createRef.test.ts b/packages/utilities/src/createRef.test.ts
index ba1c9130c8b44b..0f37ddba100b54 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 b08cd78f3290e0..ac72b96147a0e6 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/index.ts b/packages/utilities/src/index.ts
index 7af871a0b12c18..962253d3a2a665 100644
--- a/packages/utilities/src/index.ts
+++ b/packages/utilities/src/index.ts
@@ -22,13 +22,16 @@ export * from './array';
 export * from './assertNever';
 export * from './autobind';
 export * from './classNamesFunction';
+export * from './createRef';
 export * from './css';
 export * from './customizable';
 export * from './dom';
 export * from './focus';
 export * from './hoist';
 export * from './hoistStatics';
+export * from './initializeFocusRects';
 export * from './initials';
+export * from './keyboard';
 export * from './language';
 export * from './math';
 export * from './memoize';
@@ -41,4 +44,3 @@ export * from './scroll';
 export * from './string';
 export * from './styled';
 export * from './warn';
-export * from './createRef';
\ No newline at end of file
diff --git a/packages/utilities/src/initializeFocusRects.ts b/packages/utilities/src/initializeFocusRects.ts
index 68061c3a76cfba..9a60e2df47693d 100644
--- a/packages/utilities/src/initializeFocusRects.ts
+++ b/packages/utilities/src/initializeFocusRects.ts
@@ -1,20 +1,7 @@
 import { getWindow } from './dom';
-import { KeyCodes } from './KeyCodes';
-import { KeyboardEvent } from '../../../common/temp/node_modules/@types/react';
+import { isDirectionalKeyCode } from './keyboard';
 
-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
-];
+export const IsFocusVisibleClassName = 'ms-Fabric--isFocusVisible';
 
 /**
  * Initializes the logic which:
@@ -35,10 +22,6 @@ export function initializeFocusRects(window?: Window): void {
 
   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);
   }
@@ -56,14 +39,13 @@ function _onMouseDown(ev: MouseEvent): void {
   }
 }
 
-function _onKeyDown(ev: KeyboardEvent<Element>): void {
+function _onKeyDown(ev: KeyboardEvent): 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)) {
+    if (isDirectionalKeyCode(ev.which) && !classList.contains(IsFocusVisibleClassName)) {
       classList.add(IsFocusVisibleClassName);
     }
   }
diff --git a/packages/utilities/src/inputMask.test.ts b/packages/utilities/src/inputMask.test.ts
new file mode 100644
index 00000000000000..48ec8fcfe6b6ec
--- /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 00000000000000..ab108e411ee035
--- /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/keyboard.test.ts b/packages/utilities/src/keyboard.test.ts
new file mode 100644
index 00000000000000..f0e44b1a4065c7
--- /dev/null
+++ b/packages/utilities/src/keyboard.test.ts
@@ -0,0 +1,9 @@
+import { isDirectionalKeyCode } from './keyboard';
+import { KeyCodes } from './KeyCodes';
+
+describe('isDirectionalKeyCode', () => {
+  it('can return the expected value', () => {
+    isDirectionalKeyCode(KeyCodes.up);
+    isDirectionalKeyCode(KeyCodes.enter);
+  });
+});
\ No newline at end of file
diff --git a/packages/utilities/src/keyboard.ts b/packages/utilities/src/keyboard.ts
new file mode 100644
index 00000000000000..22e7552c52facc
--- /dev/null
+++ b/packages/utilities/src/keyboard.ts
@@ -0,0 +1,20 @@
+import { KeyCodes } from './KeyCodes';
+
+const DirectionalKeyCodes: { [key: number]: number } = {
+  [KeyCodes.up]: 1,
+  [KeyCodes.down]: 1,
+  [KeyCodes.left]: 1,
+  [KeyCodes.right]: 1,
+  [KeyCodes.home]: 1,
+  [KeyCodes.end]: 1,
+  [KeyCodes.tab]: 1,
+  [KeyCodes.pageUp]: 1,
+  [KeyCodes.pageDown]: 1
+};
+
+/**
+ * Returns true if the keycode is a directional keyboard key.
+ */
+export function isDirectionalKeyCode(which: number): boolean {
+  return !!DirectionalKeyCodes[which];
+}
diff --git a/packages/variants/CHANGELOG.json b/packages/variants/CHANGELOG.json
index 7cc8f9a269fa4d..aec063ef1b7f40 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 f63c788906178b..b5f9dfb80f068c 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 f49123dc52b65e..39e79a4a5641ce 100644
--- a/packages/variants/package.json
+++ b/packages/variants/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/variants",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "Office UI Fabric subtheme generator.",
   "main": "lib/index.js",
   "typings": "lib-es2015/index.d.ts",
@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "tslib": "^1.7.1",
-    "@uifabric/styling": ">=5.23.0 <6.0.0"
+    "@uifabric/styling": ">=5.27.0 <6.0.0"
   }
 }
\ No newline at end of file
diff --git a/scripts/clean.js b/scripts/clean.js
index 10e03833a7b695..98043438aa1cf2 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 08bb66a58b3c1f..77644f87d00851 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.16.1 <6.0.0",
     "autoprefixer": "^7.1.5",
     "bundlesize": "^0.15.2",
     "chalk": "^2.1.0",
@@ -53,4 +53,4 @@
       "maxSize": "46.5 kB"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/scripts/templates/EmptyComponent.mustache b/scripts/templates/EmptyComponent.mustache
index ee017d8dbb312f..f0c9e237b1b885 100644
--- a/scripts/templates/EmptyComponent.mustache
+++ b/scripts/templates/EmptyComponent.mustache
@@ -3,7 +3,7 @@ import { BaseComponent } from '../../Utilities';
 import { I{{componentName}}Props } from './{{componentName}}.types';
 
 export class {{componentName}} extends BaseComponent < I{{componentName}}Props, {} > {
-  public render(): JSX.Element {
+  public render() {
     return(
       <div>Hello World!</div>
     );