Sync with upstream

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 #### Pull request checklist
 
-- [ ] Addresses an existing issue: #0000
+- [ ] Addresses an existing issue: Fixes #0000
 - [ ] Include a change request file if publishing <!-- see notes below -->
 - [ ] New feature, bugfix, or enhancement
   - [ ] Includes tests

.travis.yml

@@ -5,3 +5,7 @@ before_script:
   - npm install -g gulp
 script:
   - npm run build
+cache:
+  directories:
+    - node_modules
+    - common/node_modules

.vscode/launch.json

@@ -22,10 +22,27 @@
       "outDir": null
     },
     {
-      "name": "Attach",
+      "name": "Run ssr tests",
       "type": "node",
-      "request": "attach",
-      "port": 5858
-    }
+      "request": "launch",
+      "program": "${workspaceRoot}/apps/ssr-tests/node_modules/mocha/bin/_mocha",
+      "stopOnEntry": true,
+      "args": [
+        "--debug",
+        "dist/test-bundle.js"
+      ],
+      "cwd": "${workspaceRoot}/apps/ssr-tests",
+      "runtimeExecutable": null,
+      "runtimeArgs": [
+        "--nolazy",
+        "--debug"
+      ],
+      "env": {
+        "NODE_ENV": "development"
+      },
+      "externalConsole": false,
+      "sourceMaps": false,
+      "outDir": null
+    },
   ]
 }

apps/fabric-website/gulpfile.js

@@ -29,8 +29,8 @@ build.tslint.setConfig({
 // TODO: remove this! There are a number of lint errors to fix.
 build.tslint.isEnabled = () => false;
 
-/* Configure TypeScript 2.0. */
-build.typescript.setConfig({ typescript: require('typescript') });
+// Configure TypeScript.
+build.TypeScriptConfiguration.setTypescriptCompiler(require('typescript'));
 
 build.text.setConfig({ textMatch: ['src/**/*.txt', 'src/**/*.Example.tsx', 'src/**/*.Props.ts'] });
 

apps/fabric-website/index.html

@@ -8,7 +8,6 @@
   <title>Office UI Fabric</title>
   <link href="https://devofficecdn.azureedge.net/themes/DevOffice/Content/favicon.ico" rel="shortcut icon" type="image/x-icon"
   />
-  <link rel="stylesheet" href="/dist/fabric.min.css"></link>
   <script src="https://cdn.optimizely.com/js/5703250400.js"></script>
   <style>
     body,

apps/fabric-website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabric-website",
-  "version": "4.5.17",
+  "version": "4.5.20",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -23,34 +23,34 @@
     "@types/mocha": "^2.2.39",
     "@types/react": "^15.0.16",
     "@types/react-addons-test-utils": "^0.14.17",
-    "@types/react-dom": "^0.14.23",
+    "@types/react-dom": "^15.5.0",
     "@types/webpack-env": "^1.13.0",
-    "es6-promise": "3.2.1",
+    "es6-promise": "4.1.0",
     "git-rev": "0.2.1",
     "gulp": "~3.9.1",
-    "gulp-debug": "2.1.2",
+    "gulp-debug": "3.1.0",
     "gulp-prompt": "^0.2.0",
-    "gulp-util": "3.0.7",
+    "gulp-util": "3.0.8",
     "gutil": "1.6.4",
-    "highlight.js": "9.6.0",
-    "mocha": "~2.5.3",
+    "highlight.js": "9.11.0",
+    "mocha": "~3.3.0",
     "orchestrator": "^0.3.7",
     "react": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",
     "react-dom": "^15.4.2",
-    "react-highlight": "0.8.0",
-    "source-map-loader": "0.1.5",
-    "typescript": "^2.2.2",
-    "vinyl-ftp": "0.4.5",
+    "react-highlight": "0.9.0",
+    "source-map-loader": "0.2.1",
+    "typescript": "2.2.2",
+    "vinyl-ftp": "0.6.0",
     "webpack-bundle-analyzer": "^2.2.1"
   },
   "dependencies": {
-    "@uifabric/example-app-base": "1.3.8",
+    "@uifabric/example-app-base": "1.3.11",
     "color-functions": "1.1.0",
     "json-loader": "^0.5.4",
     "load-themed-styles": "^1.1.0",
-    "office-ui-fabric-core": ">=5.1.0-0 <6.0.0-0",
-    "office-ui-fabric-react": ">=2.20.1 <3.0.0",
-    "@uifabric/utilities": ">=1.8.0 <2.0.0"
+    "office-ui-fabric-core": ">=5.1.0 <6.0.0",
+    "office-ui-fabric-react": ">=2.27.1 <3.0.0",
+    "@uifabric/utilities": ">=1.8.7 <2.0.0"
   }
 }

apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./CodeBlock.module.scss');
+import * as stylesImport from './CodeBlock.module.scss';
+const styles: any = stylesImport;
 
 const Highlight = require('react-highlight');
 

apps/fabric-website/src/components/ColorTable/ColorTable.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./ColorTable.module.scss');
+import * as stylesImport from './ColorTable.module.scss';
+const styles: any = stylesImport;
 
 export interface IColorTableProps {
   /**

apps/fabric-website/src/components/DONavigation/DONavigation.tsx

@@ -80,75 +80,75 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
 
   public render() {
     return (
-       <div className='od-Navigation'>
-          <div className='od-Navigation-searchContainer'>
-            <DOSearchBox />
-          </div>
-          <div className='od-Navigation-links' role='menu'>
-            <div className='od-Navigation-linkContainer'>
-              <a className='od-Navigation-link is-selected' role='menuitem' aria-label='Explore menu item, hit enter to open sub-menu and tab to navigate to first sub menu item' href='/' aria-expanded='false'>
-                Explore
+      <div className='od-Navigation'>
+        <div className='od-Navigation-searchContainer'>
+          <DOSearchBox />
+        </div>
+        <div className='od-Navigation-links' role='menu'>
+          <div className='od-Navigation-linkContainer'>
+            <a className='od-Navigation-link is-selected' role='menuitem' aria-label='Explore menu item, hit enter to open sub-menu and tab to navigate to first sub menu item' href='/' aria-expanded='false'>
+              Explore
                 <i className='ms-Icon ms-Icon--ChevronDown' aria-hidden='true'></i>
-              </a>
-              <div className='od-Navigation-subMenu'>
-                <div className='od-Navigation-subMenuItems'>
-                  <div className='ms-Grid'>
-                    <div className='ms-Grid-row'>
-                      <div className='ms-Grid-col ms-u-xl3 ms-u-sm12 od-Navigation-menuFirstColumn'>
-                        { this._getLinks(links.exploreLinks.firstMenuColumn) }
-                      </div>
-                      <div className='ms-Grid-col ms-u-xl3 ms-u-sm12  od-Navigation-menuSecondColumn'>
-                        { this._getLinks(links.exploreLinks.secondMenuColumn) }
-                      </div>
-                      <div className='ms-Grid-col ms-u-xl3 ms-u-sm12  od-Navigation-menuThirdColumn'>
-                        { this._getLinks(links.exploreLinks.thirdMenuColumn) }
-                        <div className='od-Navigation-subMenuOverflowColor'></div>
-                      </div>
+            </a>
+            <div className='od-Navigation-subMenu'>
+              <div className='od-Navigation-subMenuItems'>
+                <div className='ms-Grid'>
+                  <div className='ms-Grid-row'>
+                    <div className='ms-Grid-col ms-u-xl3 ms-u-sm12 od-Navigation-menuFirstColumn'>
+                      { this._getLinks(links.exploreLinks.firstMenuColumn) }
+                    </div>
+                    <div className='ms-Grid-col ms-u-xl3 ms-u-sm12  od-Navigation-menuSecondColumn'>
+                      { this._getLinks(links.exploreLinks.secondMenuColumn) }
+                    </div>
+                    <div className='ms-Grid-col ms-u-xl3 ms-u-sm12  od-Navigation-menuThirdColumn'>
+                      { this._getLinks(links.exploreLinks.thirdMenuColumn) }
+                      <div className='od-Navigation-subMenuOverflowColor'></div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-            <div className='od-Navigation-linkContainer'>
-              <a className='od-Navigation-link' role='menuitem' aria-label='Getting started menu item' href='http://dev.office.com/getting-started'>
-                Getting Started
+          </div>
+          <div className='od-Navigation-linkContainer'>
+            <a className='od-Navigation-link' role='menuitem' aria-label='Getting started menu item' href='http://dev.office.com/getting-started'>
+              Getting Started
               </a>
-            </div>
-            <div className='od-Navigation-linkContainer'>
-              <a className='od-Navigation-link' role='menuitem' aria-label='Code Samples menu item' href='http://dev.office.com/code-samples'>
-                Code Samples
+          </div>
+          <div className='od-Navigation-linkContainer'>
+            <a className='od-Navigation-link' role='menuitem' aria-label='Code Samples menu item' href='http://dev.office.com/code-samples'>
+              Code Samples
               </a>
-            </div>
-            <div className='od-Navigation-linkContainer'>
-              <a className='od-Navigation-link' role='menuitem' aria-label='Resources menu item, hit enter to open sub-menu' href='/' aria-expanded='false'>
-                Resources
+          </div>
+          <div className='od-Navigation-linkContainer'>
+            <a className='od-Navigation-link' role='menuitem' aria-label='Resources menu item, hit enter to open sub-menu' href='/' aria-expanded='false'>
+              Resources
                 <i className='ms-Icon ms-Icon--ChevronDown' aria-hidden='true'></i>
-              </a>
-              <div className='od-Navigation-subMenu'>
-                <div className='od-Navigation-subMenuItems od-Navigation-menuFirstColumn'>
-                  { this._getLinks(links.resourcesLinks) }
-                </div>
+            </a>
+            <div className='od-Navigation-subMenu'>
+              <div className='od-Navigation-subMenuItems od-Navigation-menuFirstColumn'>
+                { this._getLinks(links.resourcesLinks) }
               </div>
             </div>
-            <div className='od-Navigation-linkContainer'>
-              <a className='od-Navigation-link' role='menuitem' aria-label='Documentation menu item, hit enter to open sub-menu and tab to navigate to first sub menu item' href='/' aria-expanded='false'>
-                Documentation
+          </div>
+          <div className='od-Navigation-linkContainer'>
+            <a className='od-Navigation-link' role='menuitem' aria-label='Documentation menu item, hit enter to open sub-menu and tab to navigate to first sub menu item' href='/' aria-expanded='false'>
+              Documentation
                 <i className='ms-Icon ms-Icon--ChevronDown' aria-hidden='true'></i>
-              </a>
-              <div className='od-Navigation-subMenu'>
-                <div className='od-Navigation-subMenuItems od-Navigation-menuFirstColumn'>
-                 { this._getLinks(links.documentationLinks) }
-                </div>
+            </a>
+            <div className='od-Navigation-subMenu'>
+              <div className='od-Navigation-subMenuItems od-Navigation-menuFirstColumn'>
+                { this._getLinks(links.documentationLinks) }
               </div>
             </div>
           </div>
-          <div className='od-Navigation-socialButtons'>
-            <div className='od-Navigation-socialButton'></div>
-            <div className='od-Navigation-socialButton'></div>
-            <div className='od-Navigation-socialButton'></div>
-            <div className='od-Navigation-socialButton'></div>
-            <div className='od-Navigation-socialButton'></div>
-          </div>
+        </div>
+        <div className='od-Navigation-socialButtons'>
+          <div className='od-Navigation-socialButton'></div>
+          <div className='od-Navigation-socialButton'></div>
+          <div className='od-Navigation-socialButton'></div>
+          <div className='od-Navigation-socialButton'></div>
+          <div className='od-Navigation-socialButton'></div>
+        </div>
       </div>
     );
   }
@@ -188,11 +188,11 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     if (linkContainer) {
       subMenuContainer = linkContainer.querySelector(this.SUBMENU_CLASS);
       targetRect = subMenuContainer.getBoundingClientRect();
-      targetHeight =  targetRect.top + targetRect.height;
+      targetHeight = targetRect.top + targetRect.height;
     } else {
       navcontainerRect = this.navcontainerel.getBoundingClientRect();
       targetHeight = bannerContainer.getBoundingClientRect().top
-                    + bannerContainer.getBoundingClientRect().height;
+        + bannerContainer.getBoundingClientRect().height;
       if (this.navcontainerel.classList.contains('docs-showNavigation')) {
         targetHeight += navcontainerRect.height;
         // console.log(targetHeight);
@@ -269,10 +269,12 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     this.linksel.classList.remove(this.LINKS_CONTAINER_ANIM_IN_CLASS);
 
     if (window.innerWidth < this.XLSIZE) {
-      this.linksel.classList.add(this.LINKS_CONTAINER_ANIM_OUT_CLASS);
-      setTimeout(function() {
-        this.linksel.classList.remove(this.LINKS_MOBILE_OPEN_STATE);
-      }, 200);
+      if (this.linksel) {
+        this.linksel.classList.add(this.LINKS_CONTAINER_ANIM_OUT_CLASS);
+        setTimeout(function () {
+          this.linksel.classList.remove(this.LINKS_MOBILE_OPEN_STATE);
+        }, 200);
+      }
     } else {
       this._removeAllActiveClasses();
     }
@@ -332,26 +334,26 @@ export class DONavigation extends React.Component<IDONavigationProps, IDONavigat
     let node = child.parentNode;
     while (node != null) {
       if (node === parent) {
-       return true;
+        return true;
       }
       node = node.parentNode;
     }
     return false;
   }
 
   private _removeAllActiveClasses() {
-     for (let i = 0; i < this._containers.length; i++) {
-       this._containers[i].classList.remove(this.LINK_OPEN_STATE);
-     }
+    for (let i = 0; i < this._containers.length; i++) {
+      this._containers[i].classList.remove(this.LINK_OPEN_STATE);
+    }
   }
 
-  private findAncestor (el, cls) {
-      let newCLS = cls.replace('.', '');
-      let that;
-      let newEL = el;
-      while ((newEL = newEL.parentElement) && !newEL.classList.contains(newCLS)) {
-        that = this;
-      }
-      return newEL;
+  private findAncestor(el, cls) {
+    let newCLS = cls.replace('.', '');
+    let that;
+    let newEL = el;
+    while ((newEL = newEL.parentElement) && !newEL.classList.contains(newCLS)) {
+      that = this;
+    }
+    return newEL;
   }
 }

apps/fabric-website/src/components/IconGrid/IconGrid.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
-import styles = require('./IconGrid.module.scss');
+import * as stylesImport from './IconGrid.module.scss';
+const styles: any = stylesImport;
 
 export interface IIconGridProps {
   /**

apps/fabric-website/src/components/Nav/Nav.Props.ts

@@ -32,6 +32,7 @@ export interface INavPage {
    * The component to render for this page's content.
    */
   component?: any;
+
   /**
    *  Loads the component using require.ensure;
    */

apps/fabric-website/src/components/Nav/Nav.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./Nav.module.scss');
+import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
+import * as stylesImport from './Nav.module.scss';
+const styles: any = stylesImport;
 import {
   INavProps,
   INavPage
@@ -23,9 +25,11 @@ export class Nav extends React.Component<INavProps, INavState> {
       : null;
 
     return (
-      <nav className={ styles.nav } role='navigation'>
-        { links }
-      </nav>
+      <FocusZone direction={ FocusZoneDirection.vertical } >
+        <nav className={ styles.nav } role='navigation'>
+          { links }
+        </nav>
+      </FocusZone>
     );
   }
 

apps/fabric-website/src/components/PageHeader/PageHeader.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css, BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./PageHeader.module.scss');
+import * as stylesImport from './PageHeader.module.scss';
+const styles: any = stylesImport;
 import { getPageRouteFromState } from '../../utilities/pageroute';
 import { PageHeaderLink } from '../../components/PageHeaderLink/PageHeaderLink';