Merge branch 'master' into mapol/noGlobalClassNames

* master: (42 commits) Applying package updates. ProgressIndicator: Finish conversion to mergeStyles (microsoft#4595) Fix props validation for Breadcrumb (microsoft#4666) No unused vars part of ts (microsoft#4670) Picker/Autofill: fixes several minor bugs. (microsoft#4569) Fix Calendar component PREV/NEXT month, year, and "Go to today" handlers firing twice (microsoft#4662) Applying package updates. Merge styles order (microsoft#4664) Fabric component: revert class change and make it backwards compatible (microsoft#4671) Addressing Issue microsoft#3707 - OverflowSet: Add the ability to set aria-label (microsoft#4667) Fix input type for Tile ARIA label prop (microsoft#4668) Fix theme slots for DetailsList header colors (microsoft#4658) Applying package updates. Jolore/calendar updates (microsoft#4643) Remove wordWrap setting. (microsoft#4657) Pivot: convert to mergeStyles - part 1 (microsoft#4656) Use the `data-is-scrollable` attribute on the correct ScrollablePane div (microsoft#4602) Applying package updates. Remove unused iconClassName prop from Nav.types (microsoft#4634) Jest snapshots: classes in animations should autoexpand. (microsoft#4647) ...
Markionium · Apr 26, 2018 · 4196e29 · 4196e29
2 parents 1eaf1ae + e097cbc
commit 4196e29
Show file tree

Hide file tree

Showing 636 changed files with 4,269 additions and 2,809 deletions.
diff --git 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
+      }
     }
   ]
 }
diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json
@@ -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.84.0 <6.0.0",
+    "office-ui-fabric-react": ">=5.90.0 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
diff --git a/apps/fabric-website/src/components/App/App.tsx b/apps/fabric-website/src/components/App/App.tsx
@@ -27,20 +27,20 @@ export class App extends React.Component<IAppProps, any> {
     };
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     window.addEventListener('scroll', this._handleNavPositioning);
     window.addEventListener('resize', this._handleNavPositioning);
 
     this._attachedScrollThreshold = AttachedScrollUtility.calculateAttachedScrollThreshold();
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 } />;
     }
+  }
 }
diff --git 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>
     );
   }
 }
diff --git 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
@@ -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
@@ -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
@@ -15,15 +15,15 @@ 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);
     window.addEventListener('resize', this._getBreakpoint);
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>