Merge master into 'Beta/mdl2'

.pullapprove.yml

@@ -1,6 +1,6 @@
 approve_by_comment: true
 approve_regex: ^Approved
-reject_regex: ^Rejected
+reject_regex: ^Blocked
 reset_on_push: false
 reject_value: -1
 reviewers:
@@ -15,5 +15,7 @@ reviewers:
   - aditima
   - yiminwu
   - antonlabunets
+  - cschlechty
+  - atneik
   name: pullapprove
   required: 1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

src/common/_common.scss

@@ -3,4 +3,5 @@
 @import './themeOverrides';
 @import './focusBorder';
 @import './semanticColorVariables';
+@import './fabricExtraIcons';
 

src/common/_fabricExtraIcons.scss

@@ -0,0 +1,2 @@
+.ms-Icon--GroupedAscending:before { content: '\EE67'; }
+.ms-Icon--GroupedDescending:before { content: '\EE66'; }

src/components/Callout/Callout.Props.ts

@@ -59,6 +59,15 @@ export interface ICalloutProps extends React.Props<Callout>, IPositionProps {
    * If true do not render on a new layer. If false render on a new layer.
    */
   doNotLayer?: boolean;
+
+  /**
+   * If true then the callout will attempt to focus the first focusable element that it contains.
+   * If it doesn't find an element, no focus will be set and the method will return false.
+   * This means that it's the contents responsibility to either set focus or have
+   * focusable items.
+   * @returns True if focus was set, false if it was not.
+   */
+  setInitialFocus?: boolean;
 }
 
 export interface ILink {

src/components/Callout/Callout.tsx

@@ -5,6 +5,8 @@ import { Layer } from '../../Layer';
 import { css } from '../../utilities/css';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
 import { getRelativePositions, IPositionInfo } from '../../utilities/positioning';
+import { focusFirstChild } from '../../utilities/focus';
+import { Popup } from '../Popup/index';
 import './Callout.scss';
 
 const BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
@@ -69,9 +71,12 @@ export class Callout extends React.Component<ICalloutProps, ICalloutState> {
           ref={ (callout: HTMLDivElement) => this._calloutElement = callout }
           >
           { isBeakVisible && targetElement ? (<div className={ beakStyle }  style={ ((positions) ? positions.beak : BEAK_ORIGIN_POSITION) } />) : (null) }
-          <div className='ms-Callout-main'>
+          <Popup
+            className='ms-Callout-main'
+            onDismiss={ (ev:any) => this.dismiss() }
+            shouldRestoreFocus={ true }>
             { children }
-          </div>
+          </Popup>
         </div>
       </div>
     );
@@ -110,6 +115,10 @@ export class Callout extends React.Component<ICalloutProps, ICalloutState> {
     this._events.on(window, 'focus', this._dismissOnLostFocus, true);
     this._events.on(window, 'click', this._dismissOnLostFocus, true);
 
+    if (this.props.setInitialFocus) {
+      focusFirstChild(this._calloutElement);
+    }
+
     if (this.props.onLayerMounted) {
       this.props.onLayerMounted();
     }

src/components/CommandBar/CommandBar.Props.ts

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { IContextualMenuItem } from '../ContextualMenu/index';
 
+export interface ICommandBar {
+  /**
+   * Sets focus to the active command in the list.
+   */
+  focus(): void;
+}
+
 export interface ICommandBarProps extends React.HTMLProps<HTMLDivElement> {
   /**
    * Whether or not the search box is visible

src/components/CommandBar/CommandBar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ICommandBarProps } from './CommandBar.Props';
+import { ICommandBar, ICommandBarProps } from './CommandBar.Props';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { ContextualMenu, IContextualMenuItem } from '../../ContextualMenu';
 import { EventGroup } from '../../utilities/eventGroup/EventGroup';
@@ -21,7 +21,7 @@ export interface ICommandBarState {
   renderedFarItems?: IContextualMenuItem[];
 }
 
-export class CommandBar extends React.Component<ICommandBarProps, ICommandBarState> {
+export class CommandBar extends React.Component<ICommandBarProps, ICommandBarState> implements ICommandBar {
   public static defaultProps = {
     items: [],
     overflowItems: [],
@@ -34,6 +34,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     farCommandSurface: HTMLElement;
     commandBarRegion: HTMLElement;
     searchSurface: HTMLElement;
+    focusZone: FocusZone;
   };
 
   private _id: string;
@@ -99,7 +100,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     return (
       <div className={ css('ms-CommandBar', className) } ref='commandBarRegion'>
         { searchBox }
-        <FocusZone direction={ FocusZoneDirection.horizontal } rootProps={ { role: 'menubar' } }>
+        <FocusZone ref='focusZone' direction={ FocusZoneDirection.horizontal } rootProps={ { role: 'menubar' } }>
           <div className='ms-CommandBar-primaryCommands' ref='commandSurface'>
             { renderedItems.map((item, index) => (
               this._renderItemInCommandBar(item, index, expandedMenuItemKey)
@@ -139,6 +140,10 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
     );
   }
 
+  public focus() {
+    this.refs.focusZone.focus();
+  }
+
   private _renderItemInCommandBar(item, index, expandedMenuItemKey, isFarItem?: boolean) {
     const itemKey = item.key || index;
     const className = css(item.onClick ? 'ms-CommandBarItem-link' : 'ms-CommandBarItem-text', !item.name && 'ms-CommandBarItem--noName');

src/components/DetailsList/DetailsHeader.tsx

@@ -163,7 +163,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
                   ) }
 
                   { column.isGrouped && (
-                    <i className='ms-Icon ms-Icon--Filter' />
+                    <i className='ms-Icon ms-Icon--GroupedDescending' />
                   ) }
 
                   { column.iconClassName && (

src/components/DocumentCard/DocumentCard.Props.ts

@@ -7,6 +7,7 @@ import { DocumentCardActivity } from './DocumentCardActivity';
 import { DocumentCardActions } from './DocumentCardActions';
 import { PersonaInitialsColor } from '../../Persona';
 import { ImageFit } from '../../Image';
+import { IButtonProps } from '../../Button';
 
 export interface IDocumentCardProps extends React.Props<DocumentCard> {
   /**
@@ -145,22 +146,10 @@ export interface IDocumentCardActionsProps extends React.Props<DocumentCardActio
   /**
    * The actions available for this document.
    */
-  actions: IDocumentCardAction[];
+  actions: IButtonProps[];
 
   /**
    * The number of views this document has received.
    */
   views?: Number;
 }
-
-export interface IDocumentCardAction {
-  /**
-   * The icon for this action.
-   */
-  icon: string;
-
-  /**
-   * Function to run when clicking the action.
-   */
-  onClick?: (ev?: any) => void;
-}

src/components/DocumentCard/DocumentCardActions.tsx

@@ -10,16 +10,14 @@ export class DocumentCardActions extends React.Component<IDocumentCardActionsPro
     return (
       <div className='ms-DocumentCardActions'>
 
-        { actions && actions.map((action, index) => (
-        <div className='ms-DocumentCardActions-action' key={ index }>
-          <Button
-            buttonType={ ButtonType.icon }
-            icon={ action.icon }
-            onClick={ action.onClick }
-            rootProps={ { title:'' } }
-            description='' />
-        </div>
-        )) }
+        { actions && actions.map((action, index) => {
+          action.buttonType = ButtonType.icon;
+          return (
+            <div className='ms-DocumentCardActions-action' key={ index }>
+              <Button { ...action } />
+            </div>
+          );
+        }) }
 
         { views && (
         <div className='ms-DocumentCardActions-views'>

src/components/Link/Link.scss

@@ -23,6 +23,10 @@
   display: inline;
   border: none;
 
+  width: inherit;
+  overflow: inherit;
+  text-overflow: inherit;
+
   &:hover,
   &:focus {
     color: $ms-color-themeDarker;

src/components/Popup/Popup.tsx

@@ -45,12 +45,13 @@ export class Popup extends BaseComponent<IPopupProps, {}> {
 
     return (
       <div
-        { ...this.props as any }
         ref='root'
         className={ className }
         role={ role }
         aria-labelledby={ ariaLabelledBy }
-        aria-desribedby={ ariaDescribedBy } />
+        aria-desribedby={ ariaDescribedBy }>
+        { this.props.children }
+      </div>
     );
   }
 

src/demo/components/Header/Header.tsx

@@ -113,7 +113,7 @@ export class Header extends React.Component<IHeaderProps, IHeaderState> {
     return [{
       key: 'isRTL',
       name: `Render in ${ this.state.isRTLEnabled ? 'LTR' : 'RTL' }`,
-      icon: 'gear',
+      icon: 'Settings',
       onClick: this._onRTLToggled
     }];
   }

src/demo/pages/CalloutPage/examples/Callout.Basic.Example.tsx

@@ -38,6 +38,7 @@ export class CalloutBasicExample extends React.Component<any, ICalloutBaiscExamp
             gapSpace={ 20 }
             targetElement={ this._menuButtonElement }
             onDismiss={ this._onCalloutDismiss }
+            setInitialFocus={ true }
             >
             <div className='ms-Callout-header'>
               <p className='ms-Callout-title'>

src/demo/pages/CalloutPage/examples/Callout.Nested.Example.tsx

@@ -38,7 +38,8 @@ export class CalloutNestedExample extends React.Component<any, ICalloutBaiscExam
               className='ms-CalloutExample-callout'
               gapSpace={ 20 }
               targetElement={ this._menuButtonElement }
-              onDismiss= { (ev: any) => { this._onDismiss(ev); } }
+              onDismiss={ (ev: any) => { this._onDismiss(ev); } }
+              setInitialFocus={ true }
               >
               <div className='ms-Callout-header'>
                 <p className='ms-Callout-title'>

src/demo/pages/DetailsListPage/examples/DetailsList.Advanced.Example.tsx

@@ -231,19 +231,19 @@ export class DetailsListAdvancedExample extends React.Component<any, IDetailsLis
       {
         key: 'addRow',
         name: 'Insert row',
-        icon: 'plus',
+        icon: 'Add',
         onClick: this._onAddRow
       },
       {
         key: 'deleteRow',
         name: 'Delete row',
-        icon: 'trash',
+        icon: 'Delete',
         onClick: this._onDeleteRow
       },
       {
         key: 'configure',
         name: 'Configure',
-        icon: 'gear',
+        icon: 'Settings',
         items: [
           {
             key: 'resizing',
@@ -355,15 +355,15 @@ export class DetailsListAdvancedExample extends React.Component<any, IDetailsLis
       {
         key: 'aToZ',
         name: 'A to Z',
-        icon: 'arrowUp2',
+        icon: 'Up',
         canCheck: true,
         isChecked: column.isSorted && !column.isSortedDescending,
         onClick: () => this._onSortColumn(column.key, false)
       },
       {
         key: 'zToA',
         name: 'Z to A',
-        icon: 'arrowDown2',
+        icon: 'Down',
         canCheck: true,
         isChecked: column.isSorted && column.isSortedDescending,
         onClick: () => this._onSortColumn(column.key, true)
@@ -373,7 +373,7 @@ export class DetailsListAdvancedExample extends React.Component<any, IDetailsLis
       items.push({
         key: 'groupBy',
         name: 'Group By ' + column.name,
-        icon: 'listGroup2',
+        icon: 'GroupedDescending',
         canCheck: true,
         isChecked: column.isGrouped,
         onClick: () => this._onGroupByColumn(column)

src/demo/pages/DetailsListPage/examples/DetailsList.Basic.Example.tsx

@@ -5,7 +5,8 @@ import {
   DetailsList,
   MarqueeSelection,
   Selection,
-  TextField
+  TextField,
+  Link
 } from '../../../../index';
 import { createListItems } from '../../../utilities/data';
 
@@ -19,6 +20,7 @@ export class DetailsListBasicExample extends React.Component<any, any> {
 
     _items = _items || createListItems(500);
 
+    this._onRenderItemColumn = this._onRenderItemColumn.bind(this);
     this._selection = new Selection({
       onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() })
     });
@@ -40,20 +42,35 @@ export class DetailsListBasicExample extends React.Component<any, any> {
           onChanged={ text => this.setState({ items: text ? _items.filter(i => i.name.toLowerCase().indexOf(text) > -1) : _items }) }
         />
         <MarqueeSelection selection={ this._selection }>
-          <DetailsList items={ items } initialFocusedIndex={ 0 } shouldApplyApplicationRole={ true } setKey='set' selection={ this._selection } />
+          <DetailsList
+            items={ items }
+            initialFocusedIndex={ 0 }
+            setKey='set'
+            selection={ this._selection }
+            onItemInvoked={ (item) => alert(`Item invoked: ${item.name}`) }
+            onRenderItemColumn={ this._onRenderItemColumn }
+            />
         </MarqueeSelection>
       </div>
     );
   }
 
+  private _onRenderItemColumn(item, index, column) {
+    if (column.key === 'name') {
+      return <Link data-selection-invoke={ true }>{ item[column.key] }</Link>;
+    }
+
+    return item[column.key];
+  }
+
   private _getSelectionDetails(): string {
     let selectionCount = this._selection.getSelectedCount();
 
     switch (selectionCount) {
       case 0:
         return 'No items selected';
       case 1:
-        return '1 item selected: ' + (this._selection.getItems()[0] as any).name;
+        return '1 item selected: ' + (this._selection.getSelection()[0] as any).name;
       default:
         return `${ selectionCount } items selected`;
     }