[MDL2]: Updating icons

.travis.yml

@@ -3,7 +3,7 @@ node_js:
 - '4.2'
 before_script:
 - npm install -g gulp
-script: gulp
+script: gulp --production
 deploy:
   provider: npm
   email: [email protected]

package.json

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

src/components/Breadcrumb/Breadcrumb.scss

@@ -131,4 +131,3 @@ $Breadcrumb-itemMaxWidth-sm: 116px;
     }
   }
 }
-

src/components/Button/Button.scss

@@ -286,25 +286,47 @@
 // TODO: Overrides that need to be removed.
 
 .ms-Button--icon {
+  @include focus-border(0px);
   background-color: transparent;
+  color: $ms-color-neutralSecondary;
   padding: 0;
   min-width: auto;
   height: auto;
   border: 0;
 
-  &:hover {
+  &:hover,
+  &:active {
     background-color: transparent;
     border-color: transparent;
     outline-color: transparent;
+    color: $ms-color-neutralPrimary;
   }
 
   &:focus {
     background-color: transparent;
   }
 
+  .ms-Icon {
+    font-size: 16px;
+    padding: 8px;
+  }
+
   .ms-Button-icon {
     display: inline;
   }
+
+  &.is-disabled, &:disabled {
+    color: $ms-color-neutralTertiaryAlt;
+    background-color: transparent;
+  }
+
+  @media screen and (-ms-high-contrast: active) {
+    color: $ms-color-yellowLight;
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    color: $ms-color-blueMid;
+  }
 }
 
 // this is added because we have an anchor styled like a button and there is no

src/components/ChoiceGroup/ChoiceGroup.tsx

@@ -119,7 +119,7 @@ export class ChoiceGroup extends React.Component<IChoiceGroupProps, IChoiceGroup
         {
           option.imageSrc
             ? <div className='ms-ChoiceField-labelWrapper'>
-                <i className='ms-ChoiceField-icon ms-Icon ms-Icon--check' />
+                <i className='ms-ChoiceField-icon ms-Icon ms-Icon--CheckMark' />
                 <span id={ `${this._descriptionId}-${option.key}` } className='ms-Label'>{ option.text }</span>
               </div>
             : <span id={ `${this._descriptionId}-${option.key}` } className='ms-Label'>{ option.text }</span>

src/components/CommandBar/CommandBar.scss

@@ -193,7 +193,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
     }
   }
 
-  .ms-Icon--search {
+  .ms-Icon--Search {
     @include margin-left(2px);
     margin-top: 12px;
     vertical-align: top;

src/components/CommandBar/CommandBar.tsx

@@ -89,10 +89,10 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
         <div className='ms-CommandBarSearch' ref='searchSurface'>
           <input className='ms-CommandBarSearch-input' type='text' placeholder={ searchPlaceholderText } />
           <div className='ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper'>
-            <i className='ms-Icon ms-Icon--search'></i>
+            <i className='ms-Icon ms-Icon--Search'></i>
           </div>
           <div className='ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s'>
-            <i className='ms-Icon ms-Icon--x'></i>
+            <i className='ms-Icon ms-Icon--Cancel'></i>
           </div>
         </div>
       );
@@ -108,7 +108,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
             )).concat((renderedOverflowItems && renderedOverflowItems.length) ? [
             <div className='ms-CommandBarItem' key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
               <button id={ this._instanceId + OVERFLOW_KEY } className={ css('ms-CommandBarItem-link', { 'is-expanded': (expandedMenuItemKey === OVERFLOW_KEY) }) } onClick={ this._onOverflowClick } role='menuitem' aria-label={ elipsisScreenReaderText }>
-                <i className='ms-CommandBarItem-overflow ms-Icon ms-Icon--ellipsis' />
+                <i className='ms-CommandBarItem-overflow ms-Icon ms-Icon--More' />
               </button>
             </div>
             ] : []) }
@@ -153,7 +153,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
                          { (!!item.icon) && <span className={ `ms-CommandBarItem-icon ms-Icon ms-Icon--${ item.icon }` }></span> }
                          { (!!item.name) && <span className='ms-CommandBarItem-commandText'>{ item.name }</span> }
                          { (item.items && item.items.length) ? (
-                           <i className='ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown' />
+                           <i className='ms-CommandBarItem-chevronDown ms-Icon ms-Icon--ChevronDown' />
                          ) : ( null ) }
                        </button>;
                } else {

src/components/ContextualMenu/ContextualMenu.tsx

@@ -256,7 +256,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         {(hasCheckmarks) ? (
           <span
             className={
-              css('ms-ContextualMenu-checkmark', {'ms-Icon ms-Icon--check': item.isChecked, 'not-selected': !item.isChecked})
+              css('ms-ContextualMenu-checkmark', {'ms-Icon ms-Icon--CheckMark': item.isChecked, 'not-selected': !item.isChecked})
             }
             onClick={ this._onItemClick.bind(this, item) } />
         ) : (null) }
@@ -265,7 +265,7 @@ export class ContextualMenu extends React.Component<IContextualMenuProps, IConte
         ) : (null)}
         <span className='ms-ContextualMenu-itemText ms-fontWeight-regular'>{ item.name }</span>
         {(item.items && item.items.length) ? (
-          <i className={ css('ms-ContextualMenu-submenuChevron ms-Icon', getRTL() ? 'ms-Icon--chevronLeft' : 'ms-Icon--chevronRight') } />
+          <i className={ css('ms-ContextualMenu-submenuChevron ms-Icon', getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') } />
         ) : (null)}
       </div>
     );

src/components/DatePicker/DatePicker.tsx

@@ -125,7 +125,7 @@ export class DatePicker extends React.Component<IDatePickerProps, IDatePickerSta
             label={ label }
             placeholder={ placeholder }
             iconClass={ css(
-              'ms-Icon ms-Icon--event',
+              'ms-Icon ms-Icon--Event',
               label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label'
               ) }
             readOnly={ !allowTextInput }

src/components/DatePicker/DatePickerDay.tsx

@@ -77,14 +77,14 @@ export class DatePickerDay extends React.Component<IDatePickerDayProps, IDatePic
               onClick={ this._onSelectPrevMonth }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectPrevMonth) }
               tabIndex={ 0 }>
-              <i className={ css('ms-Icon', {'ms-Icon--chevronLeft': !getRTL(), 'ms-Icon--chevronRight': getRTL()}) }  />
+              <i className={ css('ms-Icon', {'ms-Icon--ChevronLeft': !getRTL(), 'ms-Icon--ChevronRight': getRTL()}) }  />
             </span>
             <span
               className='ms-DatePicker-nextMonth js-nextMonth'
               onClick={ this._onSelectNextMonth }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectNextMonth) }
               tabIndex={ 0 }>
-              <i className={ css('ms-Icon', {'ms-Icon--chevronLeft': getRTL(), 'ms-Icon--chevronRight': !getRTL()}) }  />
+              <i className={ css('ms-Icon', {'ms-Icon--ChevronLeft': getRTL(), 'ms-Icon--ChevronRight': !getRTL()}) }  />
             </span>
           </div>
           <div className='ms-DatePicker-headerToggleView js-showMonthPicker'></div>

src/components/DatePicker/DatePickerMonth.tsx

@@ -41,14 +41,14 @@ export class DatePickerMonth extends React.Component<IDatePickerMonthProps, {}>
               onClick={ this._onSelectPrevYear }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectPrevYear) }
               tabIndex={ 0 }>
-              <i className={ css('ms-Icon', {'ms-Icon--chevronLeft': !getRTL(), 'ms-Icon--chevronRight': getRTL()}) }  />
+              <i className={ css('ms-Icon', {'ms-Icon--ChevronLeft': !getRTL(), 'ms-Icon--ChevronRight': getRTL()}) }  />
             </span>
             <span
               className='ms-DatePicker-nextYear js-nextYear'
               onClick={ this._onSelectNextYear }
               onKeyDown={ this._onKeyDown.bind(this, this._onSelectNextYear) }
               tabIndex={ 0 }>
-              <i className={ css('ms-Icon', {'ms-Icon--chevronLeft': getRTL(), 'ms-Icon--chevronRight': !getRTL()}) }  />
+              <i className={ css('ms-Icon', {'ms-Icon--ChevronLeft': getRTL(), 'ms-Icon--ChevronRight': !getRTL()}) }  />
             </span>
           </div>
           <div className='ms-DatePicker-currentYear js-showYearPicker'>{ navigatedDate.getFullYear() }</div>

src/components/DetailsList/DetailsHeader.tsx

@@ -119,7 +119,7 @@ export class DetailsHeader extends React.Component<IDetailsHeaderProps, IDetails
           ) : (null) }
           { groupNestingDepth > 0 ? (
           <button className='ms-DetailsHeader-cell' onClick={ this._onToggleCollapseAll }>
-            <i className={ css('ms-DetailsHeader-collapseButton ms-Icon ms-Icon--chevronDown', {
+            <i className={ css('ms-DetailsHeader-collapseButton ms-Icon ms-Icon--ChevronDown', {
               'is-collapsed': isAllCollapsed
             }) } >
             </i>
@@ -152,13 +152,13 @@ export class DetailsHeader extends React.Component<IDetailsHeaderProps, IDetails
 
                   { column.isSorted && (
                     <i className={ css('ms-Icon', {
-                      'ms-Icon--arrowUp2': !column.isSortedDescending,
-                      'ms-Icon--arrowDown2': column.isSortedDescending
+                      'ms-Icon--Up': !column.isSortedDescending,
+                      'ms-Icon--Down': column.isSortedDescending
                     }) } />
                   ) }
 
                   { column.isFiltered && (
-                    <i className='ms-Icon ms-Icon--filter' />
+                    <i className='ms-Icon ms-Icon--Filter' />
                   ) }
 
                   { column.iconClassName && (
@@ -168,7 +168,7 @@ export class DetailsHeader extends React.Component<IDetailsHeaderProps, IDetails
                   { column.name }
 
                   { column.columnActionsMode === ColumnActionsMode.hasDropdown && (
-                    <i className='ms-DetailsHeader-filterChevron ms-Icon ms-Icon--chevronDown' />
+                    <i className='ms-DetailsHeader-filterChevron ms-Icon ms-Icon--ChevronDown' />
                   ) }
                 </button>
               </div>

src/components/DetailsList/DetailsList.tsx

@@ -11,7 +11,8 @@ import {
 import { DetailsHeader } from '../DetailsList/DetailsHeader';
 import { DetailsRow } from '../DetailsList/DetailsRow';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
-import { GroupedList } from '../GroupedList';
+import { GroupedList } from '../../GroupedList';
+import { List } from '../../List';
 import { withViewport } from '../../utilities/decorators/withViewport';
 import { assign } from '../../utilities/object';
 import { css } from '../../utilities/css';
@@ -61,6 +62,7 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
     header: DetailsHeader,
     root: HTMLElement,
     groups: GroupedList,
+    list: List,
     focusZone: FocusZone
   };
 
@@ -120,7 +122,8 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       items,
       setKey,
       selectionMode,
-      columns
+      columns,
+      viewport
     } = this.props;
     let { layoutMode } = this.state;
     let shouldResetSelection = (newProps.setKey !== setKey) || newProps.setKey === undefined;
@@ -136,7 +139,10 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       this._selection.setItems(newProps.items, shouldResetSelection);
     }
 
-    if (newProps.columns !== columns) {
+    if (
+      newProps.columns !== columns ||
+      newProps.viewport.width !== viewport.width
+    ) {
       shouldForceUpdates = true;
     }
 
@@ -182,6 +188,10 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       _dragDropHelper: dragDropHelper
     } = this;
     let groupNestingDepth = this._getGroupNestingDepth();
+    let additionalListProps = {
+      renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD,
+      renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND
+    };
 
     return (
       // If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work
@@ -228,22 +238,29 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
               selection={ selection }
               selectionMode={ selectionMode }
               onItemInvoked={ onItemInvoked }>
-              <GroupedList
-                groups={ groups }
-                groupProps={ groupProps }
-                items={ items }
-                onRenderCell={ this._onRenderCell }
-                selection={ selection }
-                selectionMode={ selectionMode }
-                dragDropEvents={ dragDropEvents }
-                dragDropHelper={ dragDropHelper }
-                eventsToRegister={ rowElementEventMap }
-                listProps={ {
-                  renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD,
-                  renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND
-                } }
-                ref='groups'
-                />
+              { groups ? (
+                  <GroupedList
+                    groups={ groups }
+                    groupProps={ groupProps }
+                    items={ items }
+                    onRenderCell={ this._onRenderCell }
+                    selection={ selection }
+                    selectionMode={ selectionMode }
+                    dragDropEvents={ dragDropEvents }
+                    dragDropHelper={ dragDropHelper }
+                    eventsToRegister={ rowElementEventMap }
+                    listProps={ additionalListProps }
+                    ref='groups'
+                    />
+                ) : (
+                  <List
+                    items={ items }
+                    onRenderCell={ (item, itemIndex) => this._onRenderCell(0, item, itemIndex) }
+                    { ...additionalListProps }
+                    ref='list'
+                    />
+                )
+              }
             </SelectionZone>
           </FocusZone>
         </div>
@@ -261,8 +278,6 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       dragDropEvents,
       rowElementEventMap: eventsToRegister,
       onRenderMissingItem,
-      onRowDidMount,
-      onRowWillUnmount,
       onRenderItemColumn,
       selectionMode,
       viewport,
@@ -293,8 +308,8 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
           groupNestingDepth={ nestingDepth }
           selectionMode={ selectionMode }
           selection={ selection }
-          onDidMount={ onRowDidMount }
-          onWillUnmount={ onRowWillUnmount }
+          onDidMount={ this._onRowDidMount }
+          onWillUnmount={ this._onRowWillUnmount }
           onRenderItemColumn={ onRenderItemColumn }
           eventsToRegister={ eventsToRegister }
           dragDropEvents={ dragDropEvents }
@@ -373,7 +388,12 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
   }
 
   private _forceListUpdates() {
-    this.refs.groups.forceUpdate();
+    if (this.refs.groups) {
+      this.refs.groups.forceUpdate();
+    }
+    if (this.refs.list) {
+      this.refs.list.forceUpdate();
+    }
   }
 
   private _adjustColumns(newProps: IDetailsListProps, forceUpdate?: boolean, layoutMode?: DetailsListLayoutMode) {

src/components/DetailsList/DetailsRowFields.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { IColumn } from './DetailsList.Props';
 import { css } from '../../utilities/css';
-import { shallowCompare } from '../../utilities/object';
 
 export interface IDetailsRowFieldsProps {
   item: any;
@@ -21,10 +20,6 @@ export class DetailsRowFields extends React.Component<IDetailsRowFieldsProps, ID
     this.state = this._getState(props);
   }
 
-  public shouldComponentUpdate(newProps: IDetailsRowFieldsProps) {
-    return !shallowCompare(this.props, newProps);
-  }
-
   public componentWillReceiveProps(newProps: IDetailsRowFieldsProps) {
     this.setState(this._getState(newProps));
   }

src/components/Dialog/Dialog.scss

@@ -84,7 +84,7 @@
   top: 12px;
   z-index: $ms-zIndex-front;
 
-  .ms-Icon.ms-Icon--x {
+  .ms-Icon.ms-Icon--Cancel {
     color: $ms-color-neutralSecondary;
     font-size: 16px;
   }

src/components/Dialog/Dialog.tsx

@@ -75,7 +75,7 @@ export class Dialog extends React.Component<IDialogProps, any> {
                 <button className='ms-Dialog-button ms-Dialog-button--close'
                   onClick={ onDismiss }
                   aria-label= { closeButtonAriaLabel }>
-                  <i className='ms-Icon ms-Icon--x'></i>
+                  <i className='ms-Icon ms-Icon--Cancel'></i>
                 </button>
                 <div className='ms-Dialog-header'>
                   <p className='ms-Dialog-title' id={ id + '-title'}>{ title }</p>

src/components/DocumentCard/DocumentCardActions.tsx

@@ -23,7 +23,7 @@ export class DocumentCardActions extends React.Component<IDocumentCardActionsPro
 
         { views && (
         <div className='ms-DocumentCardActions-views'>
-          <i className='ms-Icon ms-Icon--eye' />
+          <i className='ms-Icon ms-Icon--View' />
           { views }
         </div>
         ) }