[MDL2]: CommandBar style updates. Fabric extra colors not needed; theme overrides fixed.

src/common/_common.scss

@@ -1,5 +1,4 @@
 @import '~office-ui-fabric-core/dist/sass/Fabric';
-@import './fabricExtraColors';
 @import './i18n';
 @import './themeOverrides';
 @import './focusBorder';

src/common/_themeOverrides.scss

@@ -15,8 +15,8 @@ $ms-color-neutralSecondary: "[theme:neutralSecondary, default: #666666]";
 $ms-color-neutralSecondaryAlt: "[theme:neutralSecondaryAlt, default: #767676]";
 $ms-color-neutralTertiary: "[theme:neutralTertiary, default: #a6a6a6]";
 $ms-color-neutralTertiaryAlt: "[theme:neutralTertiaryAlt, default: #c8c8c8]";
-$ms-color-neutralQuaternary: "[theme:neutralQuaternary, default: #dadada]";
-$ms-color-neutralQuaternaryAlt: "[theme:neutralQuaternaryAlt, default: #d0d0d0]";
+$ms-color-neutralQuaternary: "[theme:neutralQuaternary, default: #d0d0d0]";
+$ms-color-neutralQuaternaryAlt: "[theme:neutralQuaternaryAlt, default: #dadada]";
 $ms-color-neutralLight: "[theme:neutralLight, default: #eaeaea]";
 $ms-color-neutralLighter: "[theme:neutralLighter, default: #f4f4f4]";
 $ms-color-neutralLighterAlt: "[theme:neutralLighterAlt, default: #f8f8f8]";

src/components/CommandBar/CommandBar.scss

@@ -1,18 +1,14 @@
 @import '../../common/common';
 
-.ms-CommandBarItem-icon,
-.ms-CommandBarItem-overflow
- {
-  padding: 0 2px;
-  min-width: 17px;
-}
-
 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
 
 //
 // Office UI Fabric
 // --------------------------------------------------
 // Command Bar styles
+//
+// Using Padding instead of Margin for ms-CommandBarItem so that width to
+// calculate overFlow items is calculated correctly.
 
 $CommandBar-height: 40px;
 $CommandBar-mobileHeight: 48px;
@@ -27,19 +23,18 @@ $CommandBar-sideAreaWidthxlg: 345px;
 $CommandBarItem-height: $CommandBar-height;
 $CommandBarItem-marginTop: 13px;
 $CommandBarItem-textHeight: 16px;
-$CommandBarItem-iconWidth: 16px;
+$CommandBarItem-fontSize: 16px;
+$CommandBarItem-chevronDown-fontSize: 12px;
+$CommandBarItem-overflow-fontSize: 18px;
 $CommandBarItem-iconLabelMargin: 8px;
 $CommandBarItem-flippedLineHeight: 32px;
 
-
 $SearchBox-height: 40px;
 $SearchBox-widthLgCollapsed: 50px;
 $SearchBox-widthMdDownCollapsed: 36px;
 $SearchBox-widthXLarge: 208px;
-$SearchBox-iconSize: 17px;
+$SearchBox-iconSize: 16px;
 $SearchBox-sidePadding: 8px; // padding in input on left and right sides without icons
-$SearchBox-smallWidth: 36px;
-$SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePadding * 2);
 
 @mixin highContrastBorder($color) {
     @include border-left(1px, solid, $color);
@@ -50,10 +45,9 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
   @include ms-font-m;
 
   position: relative;
-  background-color: $ms-color-themeLighterAlt;
+  background-color: $ms-color-neutralLighter;
   height: $CommandBar-height;
   white-space: nowrap;
-
   user-select: none;
 }
 
@@ -63,14 +57,14 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
   display: inline;
   vertical-align: top;
   line-height: $CommandBar-height;
-  margin: 0 24px;
+  margin: 0 20px;
 }
 
 .ms-CommandBar-sideCommands {
   position: absolute;
   @include right(0px);
   @include text-align(right);
-  @include padding-right(24px);
+  @include padding-right(20px);
 }
 
 // Command Bar Item
@@ -80,7 +74,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
   height: $CommandBarItem-height;
   outline: transparent;
   vertical-align: top;
-  margin: 0 2px;
+  padding: 0 4px;
 
   @media screen and (-ms-high-contrast: active) {
     @include highContrastBorder($ms-color-black);
@@ -97,31 +91,28 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
 
 .ms-CommandBarItem-chevronDown,
 .ms-CommandBarItem-commandText {
-  display: inline;
-  padding: 0 2px;
-}
-
-.ms-CommandBarItem-overflow {
-  font-size: $ms-font-size-m;
-  color: $ms-color-neutralSecondary;
+  display: inline-block;
+  padding: 0 4px;
+  vertical-align: top;
 }
 
 @mixin CommandBarItem-text {
   @include focus-border(2px);
-
-  font-family: inherit;
-  font-size: inherit;
+  @include ms-font-m;
 
   position: relative;
   background: none;
   border: none;
-  line-height: $CommandBarItem-height - 1;
-  height: $CommandBarItem-height;
+  line-height: $CommandBarItem-height;
   min-width: 20px;
   text-align: center;
-  padding: 0 2px;
+  padding: 0 4px;
   display: block;
   height: 100%;
+
+  &.ms-CommandBarItem--noName {
+    padding: 0 8px;
+  }
 }
 
 .ms-CommandBarItem-text {
@@ -131,12 +122,9 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
 .ms-CommandBarItem-link {
   @include CommandBarItem-text;
   cursor: pointer;
-  padding: 0 6px;
 
   &:hover,
   &.is-expanded {
-    background-color: $ms-color-themeLight;
-
     @media screen and (-ms-high-contrast: active) {
       @include highContrastBorder($ms-color-white);
     }
@@ -145,31 +133,75 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
       @include highContrastBorder($ms-color-black);
     }
   }
+
+  &:hover {
+    color: $ms-color-neutralDark;
+    background-color: $ms-color-neutralLight;
+
+    .ms-CommandBarItem-icon {
+      color: $ms-color-themeDark;
+    }
+
+    .ms-CommandBarItem-chevronDown {
+      color: $ms-color-neutralPrimaryAlt;
+    }
+
+    .ms-CommandBarItem-overflow {
+      color: $ms-color-neutralDark;
+    }
+  }
+
+  &.is-expanded {
+    background-color: $ms-color-neutralQuaternaryAlt;
+    color: $ms-color-black;
+
+    .ms-CommandBarItem-icon {
+      color: $ms-color-themeDarker;
+    }
+
+    .ms-CommandBarItem-chevronDown {
+      color: $ms-color-neutralDark;
+    }
+
+    .ms-CommandBarItem-overflow {
+      color: $ms-color-black;
+    }
+  }
+
+  &.is-expanded:hover {
+    background-color: $ms-color-neutralQuaternary;
+  }
 }
 
 .ms-CommandBarItem-icon {
-  font-size: $ms-font-size-l;
-  color: $ms-color-themePrimary;
+  font-size: $CommandBarItem-fontSize;
+  color: $ms-color-themeDarkAlt;
+  padding: 0 4px;
 }
 
 .ms-CommandBarItem-chevronDown  {
-  vertical-align: baseline;
   color: $ms-color-neutralSecondary;
-  font-size: 16px;
-  width: 16px;
-  padding: 0 2px;
+  font-size: $CommandBarItem-chevronDown-fontSize;
+}
+
+.ms-CommandBarItem-overflow {
+  font-size: $CommandBarItem-overflow-fontSize;
+  color: $ms-color-neutralPrimary;
+  padding: 0 7px;
 }
 
+// CommandBarSearch needs to replaced with SearchBox component, and hence following styles revisited/cleaned.
 .ms-CommandBarSearch {
   @include float(left);
   width: 208px;
   max-width: 208px;
-  background-color: $ms-color-themeLighter;
+  background-color: $ms-color-white;
   color: $ms-color-neutralPrimary;
   height: $SearchBox-height;
   position: relative;
   box-sizing: border-box;
   border-color: transparent; // give a base state for animation
+  @include border-right(1px, solid, $ms-color-neutralLight);
 
   @media screen and (-ms-high-contrast: active) {
     @include border-right(1px, solid, $ms-color-white);
@@ -180,8 +212,17 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
     @include border-right(1px, solid, $ms-color-black);
   }
 
+  &:before {
+    position: absolute;
+    content: ' ';
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0 8px;
+    border-bottom: 1px solid $ms-color-neutralLight;
+  }
+
   &:hover {
-    background-color: $ms-color-themeLight;
     color: $ms-color-themePrimary;
 
     @media screen and (-ms-high-contrast: active) {
@@ -192,12 +233,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
       @include highContrastBorder($ms-color-black);
     }
   }
-
-  .ms-Icon--Search {
-    @include margin-left(2px);
-    margin-top: 12px;
-    vertical-align: top;
-  }
 }
 
 .ms-CommandBarSearch-input {
@@ -234,7 +269,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
 // default styles for icons, show the search icon and hide X (and arrow) until focused
 .ms-CommandBarSearch-iconSearchWrapper {
   display: block;
-  @include padding-left(15px);
 }
 
 .ms-CommandBarSearch-iconArrowWrapper {
@@ -244,7 +278,7 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
 .ms-CommandBarSearch-iconSearchWrapper,
 .ms-CommandBarSearch-iconArrowWrapper {
   top: 0;
-  @include padding-left(8px);
+  @include padding-left(17px);
   @include padding-right(8px);
 }
 
@@ -255,7 +289,6 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
   z-index: $ms-zIndex-front;
 }
 
-
 //== State: Puts search in an active state
 //
 .ms-CommandBarSearch.is-active {
@@ -299,15 +332,11 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
   height: $SearchBox-height;
   line-height: $SearchBox-height;
   cursor: pointer;
-  padding: 0px $SearchBox-sidePadding;
   position: absolute;
-  width: $SearchBox-iconWrapperWidth;
   text-align: center;
 }
 
-
 // New rules
-
 .ms-CommandBarSearch .ms-Icon:before {
   font-size: $SearchBox-iconSize;
   color: $ms-color-themePrimary;
@@ -317,7 +346,4 @@ $SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePaddi
 .ms-CommandBarSearch-input::-webkit-input-placeholder {
   @include ms-baseFont;
   font-size: $ms-font-size-m;
-}
-.ms-CommandBarSearch-input::-webkit-input-placeholder {
-  font-style: italic;
-}
+}

src/components/CommandBar/CommandBar.tsx

@@ -136,7 +136,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
 
   private _renderItemInCommandBar(item, index, expandedMenuItemKey, isFarItem?: boolean) {
     const itemKey = item.key || index;
-    const className = item.onClick ? 'ms-CommandBarItem-link' : 'ms-CommandBarItem-text';
+    const className = css(item.onClick ? 'ms-CommandBarItem-link' : 'ms-CommandBarItem-text', !item.name && 'ms-CommandBarItem--noName');
     const classNameValue = css(className, { 'is-expanded': (expandedMenuItemKey === item.key) });
 
     return <div className={ css('ms-CommandBarItem', item.className) } key={ itemKey } ref={ itemKey }>

src/demo/pages/CommandBarPage/examples/data.ts

@@ -149,19 +149,19 @@ export const farItems = [
   {
     key: 'sort',
     name: 'Sort',
-    icon: 'sortLines',
+    icon: 'SortLines',
     onClick: () => { return; }
   },
   {
     key: 'tile',
     name: 'Grid view',
-    icon: 'tile',
+    icon: 'Tiles',
     onClick: () => { return; }
   },
   {
     key: 'info',
     name: 'Info',
-    icon: 'circleInfo',
+    icon: 'Info',
     onClick: () => { return; }
   }
 ];