Merge branch 'master' into no-unused-variable

* master: ResizeGroup SCSS to MergeStyles Part 2: Style Conversion (microsoft#4072) Applying package updates. Import Unstyled Component for Layer, Nav, Image, ScrollablePane, ResizeGroup, and Rating (microsoft#4135) FocusZone: isDefaultPrevented is now respected (microsoft#4133) Website: Left nav scroll improvements (microsoft#4132) AutoFill: Component should also listen to onInput, just like the other input components do (microsoft#4129) GroupedList: Fixed chevron animation (microsoft#4123) CoachMarkStyles: Use ... instead of assign for IE compatibility" (microsoft#4130) Applying package updates.
Markionium · Mar 1, 2018 · 5b9f566 · 5b9f566
2 parents 72ae1f6 + 9b0294a
commit 5b9f566
Show file tree

Hide file tree

Showing 47 changed files with 411 additions and 156 deletions.
diff --git a/apps/fabric-website/CHANGELOG.json b/apps/fabric-website/CHANGELOG.json
@@ -1,6 +1,25 @@
 {
   "name": "@uifabric/fabric-website",
   "entries": [
+    {
+      "version": "5.3.2",
+      "tag": "@uifabric/fabric-website_v5.3.2",
+      "date": "Thu, 01 Mar 2018 00:05:10 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <[email protected]>",
+            "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",

diff --git a/apps/fabric-website/CHANGELOG.md b/apps/fabric-website/CHANGELOG.md
@@ -1,6 +1,13 @@
 # Change Log - @uifabric/fabric-website
 
-This log was last generated on Fri, 16 Feb 2018 11:23:29 GMT and should not be manually modified.
+This log was last generated on Thu, 01 Mar 2018 00:05:10 GMT and should not be manually modified.
+
+## 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

diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/fabric-website",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "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.55.3 <6.0.0",
+    "office-ui-fabric-react": ">=5.56.1 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
diff --git a/apps/fabric-website/src/components/App/App.scss b/apps/fabric-website/src/components/App/App.scss
@@ -4,18 +4,17 @@
 :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: 999; // This z-index needs to be high to prevent jittery scrolling in Edge.
@@ -24,11 +23,11 @@
   .App-content {
     @include contentPadding();
     background-color: $ms-color-neutralLighter;
-    flex-grow: 1;
     left: 0;
     overflow: hidden;
     position: relative;
     transition: all $ms-animation-duration-2 $ms-animation-ease-1;
+    min-height: calc(100vh - #{$Header-height-full-uhf});
 
     @include high-contrast {
       border-right: 1px solid WindowText;
@@ -46,19 +45,14 @@
       @include ms-padding-left($App-padding-left-lg);
     }
 
-    .App-wrapper {
-      flex-direction: row;
-    }
-
     .App-nav {
-      top: $Header-height*2;
+      top: 0;
       bottom: 0;
       overflow-y: auto;
       overflow-x: hidden;
     }
 
     .App-content {
-      flex-grow: unset;
       max-width: calc(100% - #{$Nav-width}); // IE needs max-width, it was ignoring width
       width: calc(100% - #{$Nav-width});
       @include ms-left($Nav-width);

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

diff --git a/apps/fabric-website/src/components/App/AppState.tsx b/apps/fabric-website/src/components/App/AppState.tsx
@@ -11,15 +11,23 @@ export interface IAppState {
 }
 
 // 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 (
-    <div style={ { height: '1500px' } }>
+    <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>
+  );
+};
 
 export const AppState: IAppState = {
   appTitle: 'Office UI Fabric',
@@ -49,47 +57,56 @@ 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',
+          title: 'Beta theme generator',
           url: '#/styles/themeGenerator',
           isHiddenFromMainNav: true,
+          component: () => <StylesLoadingComponent title='Beta 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))
         }
       ]

diff --git a/apps/fabric-website/src/styles/_variables.scss b/apps/fabric-website/src/styles/_variables.scss
@@ -59,6 +59,7 @@ $CodeBlock-toggleButtonHeight: 28px;
 
 $Header-backgroundColor: $ms-color-black;
 $Header-height: 50px;
+$Header-height-full-uhf: $Header-height*2;
 
 $Nav-width: 208px;
 

diff --git a/apps/fabric-website/webpack.uhf.serve.config.js b/apps/fabric-website/webpack.uhf.serve.config.js
@@ -14,20 +14,22 @@ const version = require('./package.json').version;
 const isProduction = process.argv.indexOf('--production') > -1;
 const minFileNamePart = isProduction ? '.min' : '';
 const entryPointFilename = 'fabric-sitev5';
+const devServer = {
+  host: HOST_NAME,
+  disableHostCheck: true,
+  port: 4324
+}
 
 module.exports = resources.createServeConfig({
   entry: './src/root.tsx',
   output: {
     filename: entryPointFilename + '.js',
     path: path.join(__dirname, 'dist'),
-    publicPath: '/dist/',
+    publicPath: 'http://'+ HOST_NAME +':' + devServer.port + '/dist/',
     chunkFilename: `${entryPointFilename}-${version}-[name]${minFileNamePart}.js`
   },
 
-  devServer: {
-    host: HOST_NAME,
-    disableHostCheck: true
-  },
+  devServer: devServer,
 
   externals: {
     'react': 'React',

diff --git a/apps/ssr-tests/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.55.3 <6.0.0",
+    "office-ui-fabric-react": ">=5.56.1 <6.0.0",
     "raw-loader": "^0.5.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

diff --git 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.55.3 <6.0.0",
+    "office-ui-fabric-react": ">=5.56.1 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
diff --git 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.55.3 <6.0.0",
+    "office-ui-fabric-react": ">=5.56.1 <6.0.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "typescript": "2.6.2",

diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
@@ -28,7 +28,7 @@
     "storybook-readme": "=3.0.6"
   },
   "dependencies": {
-    "office-ui-fabric-react": ">=5.55.3 <6.0.0",
+    "office-ui-fabric-react": ">=5.56.1 <6.0.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "typescript": "2.6.2",

diff --git a/...n/changes/@uifabric/fabric-website/magellan-fixDetailsListFocusTest_2018-02-24-00-36.json b/...n/changes/@uifabric/fabric-website/magellan-fixDetailsListFocusTest_2018-02-24-00-36.json
diff --git a/common/changes/office-ui-fabric-react/import-componentbases_2018-02-28-20-18.json b/common/changes/office-ui-fabric-react/import-componentbases_2018-02-28-20-18.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Added index import for base files in Layer, Nav, Image, ScrollablePane, ResizeGroup, and Rating components so unstyled component can be used.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/...anges/office-ui-fabric-react/jspurlin-ContextualMenuFixSubmenuHover_2018-02-27-20-46.json b/...anges/office-ui-fabric-react/jspurlin-ContextualMenuFixSubmenuHover_2018-02-27-20-46.json
diff --git a/common/changes/office-ui-fabric-react/jspurlin-SplitButtonFixClick_2018-02-27-23-14.json b/common/changes/office-ui-fabric-react/jspurlin-SplitButtonFixClick_2018-02-27-23-14.json
diff --git a/common/changes/office-ui-fabric-react/mergeStyles-Dialog-round1_2018-02-21-00-19.json b/common/changes/office-ui-fabric-react/mergeStyles-Dialog-round1_2018-02-21-00-19.json
diff --git a/common/changes/office-ui-fabric-react/mergeStyles-Dialog-round1_2018-02-27-19-41.json b/common/changes/office-ui-fabric-react/mergeStyles-Dialog-round1_2018-02-27-19-41.json
diff --git a/...mponent-restructure_2018-02-27-17-42.json → ...zegroup-scss2ms-pt2_2018-02-22-21-19.json b/...mponent-restructure_2018-02-27-17-42.json → ...zegroup-scss2ms-pt2_2018-02-22-21-19.json
@@ -2,10 +2,10 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "Prepare Persona for conversion to merge-styles",
+      "comment": "Converting ResizeGroup SCSS to MergeStyles step 2 - style converstion",
       "type": "minor"
     }
   ],
   "packageName": "office-ui-fabric-react",
-  "email": "[email protected]"
+  "email": "[email protected]"
 }
diff --git a/packages/experiments/package.json b/packages/experiments/package.json
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
-    "office-ui-fabric-react": ">=5.55.3 <6.0.0",
+    "office-ui-fabric-react": ">=5.56.1 <6.0.0",
     "@uifabric/icons": ">=5.4.2 <6.0.0",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"