merging master

.github/CODEOWNERS

@@ -15,21 +15,24 @@
 # users just like we do for commit author emails.
 # docs/  docs@example.com
 
+#### Core build stuff
+scripts/ @dzearing
+
 #### Apps
 # component-demo/
 # fabric-website/
 # ssr-tests/
-# test-bundle-button/
+# test-bundle-button/ @dzearing
 # todo-app/
 
 #### Packages
 # packages/example-app-base/
-packages/file-type-icons/  @KatherineThayerMicrosoft @jahnp
+packages/file-type-icons/  @KatherineThayerMicrosoft @jahnp @bigbadcapers
 # packages/icons/
 # packages/jest-serializer-merge-styles/
 # packages/merge-styles/
 # packages/office-ui-fabric-react-tslint/
-packages/styling/  @dzearing
+packages/styling/ @dzearing
 packages/styling/src/interfaces/ @phkuo
 packages/styling/src/styles/ @phkuo
 # packages/utilities/

.npmrc

@@ -1,2 +1,2 @@
 registry=https://registry.npmjs.org/
-
+package-lock=false

apps/fabric-website/CHANGELOG.json

@@ -1,6 +1,96 @@
 {
   "name": "@uifabric/fabric-website",
   "entries": [
+    {
+      "version": "5.4.0",
+      "tag": "@uifabric/fabric-website_v5.4.0",
+      "date": "Wed, 14 Mar 2018 10:28:26 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "8b1625290f6a775f6c64b30617a2593576aacb34",
+            "comment": "Theme generator: exposing to the website."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.64.0 <6.0.0` to `>=5.64.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.3.4",
+      "tag": "@uifabric/fabric-website_v5.3.4",
+      "date": "Tue, 13 Mar 2018 20:00:06 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "0904a98019ac935ed975f6188624cc68df477a25",
+            "comment": "Hide left nav on mobile."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.3.3",
+      "tag": "@uifabric/fabric-website_v5.3.3",
+      "date": "Fri, 09 Mar 2018 11:13:58 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "e67bcbe68c55f057a10c3c51d923554bae81524d",
+            "comment": "Fixed in page nav so that the left nav links will display properly."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.61.0 <6.0.0` to `>=5.62.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.3.2",
+      "tag": "@uifabric/fabric-website_v5.3.2",
+      "date": "Thu, 01 Mar 2018 00:05:10 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "8370f6f5c822189fbd84e13fb285df83b102a308",
+            "comment": "Improved left nav scroll behavior and added fix to webpack so that we can load component pages from our local machines with the UHF."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.56.0 <6.0.0` to `>=5.56.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.3.1",
+      "tag": "@uifabric/fabric-website_v5.3.1",
+      "date": "Fri, 16 Feb 2018 11:23:29 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "97593b0e0ff8c69cafbaefe40a3ba6834572eddf",
+            "comment": "Left nav: Less jittery and component pages load in full height."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.50.0 <6.0.0` to `>=5.51.0 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.3.0",
       "tag": "@uifabric/fabric-website_v5.3.0",

apps/fabric-website/CHANGELOG.md

@@ -1,6 +1,41 @@
 # Change Log - @uifabric/fabric-website
 
-This log was last generated on Mon, 22 Jan 2018 11:14:27 GMT and should not be manually modified.
+This log was last generated on Wed, 14 Mar 2018 10:28:26 GMT and should not be manually modified.
+
+## 5.4.0
+Wed, 14 Mar 2018 10:28:26 GMT
+
+### Minor changes
+
+- Theme generator: exposing to the website.
+
+## 5.3.4
+Tue, 13 Mar 2018 20:00:06 GMT
+
+### Patches
+
+- Hide left nav on mobile.
+
+## 5.3.3
+Fri, 09 Mar 2018 11:13:58 GMT
+
+### Patches
+
+- Fixed in page nav so that the left nav links will display properly.
+
+## 5.3.2
+Thu, 01 Mar 2018 00:05:10 GMT
+
+### Patches
+
+- Improved left nav scroll behavior and added fix to webpack so that we can load component pages from our local machines with the UHF.
+
+## 5.3.1
+Fri, 16 Feb 2018 11:23:29 GMT
+
+### Patches
+
+- Left nav: Less jittery and component pages load in full height.
 
 ## 5.3.0
 Mon, 22 Jan 2018 11:14:27 GMT

apps/fabric-website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/fabric-website",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -39,7 +39,7 @@
     "@microsoft/load-themed-styles": "^1.7.13",
     "color-functions": "1.1.0",
     "json-loader": "^0.5.7",
-    "office-ui-fabric-react": ">=5.45.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.64.3 <6.0.0",
     "tslib": "^1.7.1"
   }
 }

apps/fabric-website/src/components/App/App.scss

@@ -4,31 +4,30 @@
 :global {
   // Element that wraps everything except for the header
   .App-wrapper {
-    display: flex;
-    flex-direction: column;
     margin: 0 auto;
     max-width: $App-maximumWidth;
+    position: relative;
   }
 
   // Nav is hidden off screen by default
   .App-nav {
     -webkit-overflow-scrolling: touch; // Improves scrolling performance
     overflow-y: auto;
-    position: fixed;
-    top: $Header-height;
+    max-height: 100vh;
+    height: 100vh; // fallback height if not set in JS style attribute
     width: $Nav-width;
     @include ms-float(left);
-    z-index: $ms-zIndex-1;
+    z-index: 999; // This z-index needs to be high to prevent jittery scrolling in Edge.
   }
 
   .App-content {
     @include contentPadding();
     background-color: $ms-color-neutralLighter;
-    flex-grow: 1;
     left: 0;
     overflow: hidden;
     position: relative;
     transition: all $ms-animation-duration-2 $ms-animation-ease-1;
+    min-height: calc(100vh - #{$Header-height-full-uhf});
 
     @include high-contrast {
       border-right: 1px solid WindowText;
@@ -46,19 +45,14 @@
       @include ms-padding-left($App-padding-left-lg);
     }
 
-    .App-wrapper {
-      flex-direction: row;
-    }
-
     .App-nav {
-      top: $Header-height*2;
+      top: 0;
       bottom: 0;
       overflow-y: auto;
       overflow-x: hidden;
     }
 
     .App-content {
-      flex-grow: unset;
       max-width: calc(100% - #{$Nav-width}); // IE needs max-width, it was ignoring width
       width: calc(100% - #{$Nav-width});
       @include ms-left($Nav-width);

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

@@ -43,12 +43,10 @@ export class App extends React.Component<IAppProps, any> {
 
   public render() {
     let { navHeight } = this.state;
-    let appContentTop = this._appContentRect ? this._appContentRect.top : 100;
-    // Using appContentTop as a reference to match instead of 'unset' because it does not work in IE.
-    let navTop: string = this.state.isAttached ? '0' : appContentTop.toString();
+    let navPosition: 'fixed' | 'absolute' = this.state.isAttached ? 'fixed' : 'absolute';
     let navStyle = {
-      top: navTop,
-      height: navHeight
+      height: navHeight,
+      position: navPosition
     };
 
     return (
@@ -80,7 +78,7 @@ export class App extends React.Component<IAppProps, any> {
   @autobind
   private _handleNavPositioning() {
     let { isAttached, navHeight } = this.state;
-    this._appContentRect = this._appContent.getBoundingClientRect();
+    this._appContentRect = this._appContent && this._appContent.getBoundingClientRect();
     const viewPortHeight = window.innerHeight;
     isAttached = AttachedScrollUtility.shouldComponentAttach(isAttached, this._attachedScrollThreshold);
     navHeight = this._calculateNavHeight(viewPortHeight, this._appContentRect, navHeight);

apps/fabric-website/src/components/App/AppState.tsx

@@ -10,11 +10,22 @@ export interface IAppState {
   pages: INavPage[];
 }
 
+// Giving the loading component a height so that the left nav loads in full screen and there is less flashing as the component page loads.
+const loadingPageHeight: string = 'calc(100vh - 100px)';
 const LoadingComponent = (props: any): JSX.Element => {
   return (
-    <ComponentPage>
-      <PageHeader pageTitle={ props.title } backgroundColor='#038387' />
-    </ComponentPage>
+    <div style={ { height: loadingPageHeight } }>
+      <ComponentPage>
+        <PageHeader pageTitle={ props.title } backgroundColor='#038387' />
+      </ComponentPage>
+    </div>
+  );
+};
+const StylesLoadingComponent = (props: any): JSX.Element => {
+  return (
+    <div style={ { height: loadingPageHeight } }>
+      <PageHeader pageTitle={ props.title } backgroundColor='#006f94' />
+    </div>
   );
 };
 
@@ -46,47 +57,55 @@ export const AppState: IAppState = {
         {
           title: 'Animations',
           url: '#/styles/animations',
+          component: () => <StylesLoadingComponent title='Animations' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/AnimationsPage/AnimationsPage').AnimationsPage))
         },
         {
           title: 'Brand icons',
           url: '#/styles/brand-icons',
+          component: () => <StylesLoadingComponent title='Brand icons' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/BrandIconsPage/BrandIconsPage').BrandIconsPage))
         },
         {
           title: 'Colors',
           url: '#/styles/colors',
+          component: () => <StylesLoadingComponent title='Colors' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/ColorsPage/ColorsPage').ColorsPage))
         },
         {
           title: 'Icons',
           url: '#/styles/icons',
+          component: () => <StylesLoadingComponent title='Icons' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/IconsPage/IconsPage').IconsPage))
         },
         {
           title: 'Layout',
           url: '#/styles/layout',
+          component: () => <StylesLoadingComponent title='Layout' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/LayoutPage/LayoutPage').LayoutPage))
         },
         {
           title: 'Localization',
           url: '#/styles/localization',
+          component: () => <StylesLoadingComponent title='Localization' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/LocalizationPage/LocalizationPage').LocalizationPage))
         },
         {
-          title: 'Beta Theme Generator',
-          url: '#/styles/themeGenerator',
-          isHiddenFromMainNav: true,
+          title: 'Theme generator',
+          url: '#/styles/themegenerator',
+          component: () => <StylesLoadingComponent title='Theme generator' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage').ThemeGeneratorToolPage))
         },
         {
           title: 'Typography',
           url: '#/styles/typography',
+          component: () => <StylesLoadingComponent title='Typography' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/TypographyPage/TypographyPage').TypographyPage))
         },
         {
           title: 'Utilities',
           url: '#/styles/utilities',
+          component: () => <StylesLoadingComponent title='Utilities' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/UtilitiesPage/UtilitiesPage').UtilitiesPage))
         }
       ]
@@ -134,6 +153,12 @@ export const AppState: IAppState = {
           component: () => <LoadingComponent title='Checkbox' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/CheckboxComponentPage').CheckboxComponentPage))
         },
+        {
+          title: 'Coachmark',
+          url: '#/components/coachmark',
+          component: () => <LoadingComponent title='Coachmark' />,
+          getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/CoachmarkComponentPage').CoachmarkComponentPage))
+        },
         {
           title: 'ChoiceGroup',
           url: '#/components/choicegroup',

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

@@ -32,7 +32,7 @@ export class IconGrid extends React.Component<IIconGridProps, IIconGridState> {
 
     return (
       <div>
-        <SearchBox labelText='Search icons' value={ searchQuery } onChange={ this._onSearchQueryChanged.bind(this) } className={ styles.searchBox } />
+        <SearchBox placeholder='Search icons' value={ searchQuery } onChange={ this._onSearchQueryChanged.bind(this) } className={ styles.searchBox } />
         <ul className={ styles.grid }>
           { icons
             .filter(icon => icon.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1)

apps/fabric-website/src/components/Nav/Nav.module.scss

@@ -96,3 +96,9 @@ $nav-group-header-height: 40px;
     }
   }
 }
+
+@media only screen and (max-width: $uhf-screen-max-mobile) {
+  .nav {
+    display: none;
+  }
+}