From c3119f0ee31a0f4fff71a0f31bf9c410fe429f74 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Mon, 27 Feb 2017 13:35:40 -0800
Subject: [PATCH] Module css: commandbar (#1125)

* CommandBar updates.

* Fixing commandbar issues.

* Deleting unused classes.
---
 .../src/components/CommandBar/CommandBar.scss | 482 ++++++++----------
 .../src/components/CommandBar/CommandBar.tsx  |  66 ++-
 2 files changed, 263 insertions(+), 285 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss
index de6ebfe9e9c0d8..e2048394bf26ea 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss
@@ -41,331 +41,291 @@ $SearchBox-sidePadding: 8px; // padding in input on left and right sides without
     @include border-right(1px, solid, $color);
 }
 
-:global {
-  .ms-CommandBar {
-    @include ms-font-m;
+.root {
+  @include ms-font-m;
+  color: $ms-color-neutralPrimary;
+
+  position: relative;
+  background-color: $ms-color-neutralLighter;
+  height: $CommandBar-height;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.primaryCommands {
+  position: absolute;
+  overflow: hidden;
+  display: inline;
+  vertical-align: top;
+  line-height: $CommandBar-height;
+  max-width: 100%;
+  margin: 0 20px;
+}
+
+.sideCommands {
+  position: absolute;
+  @include right(0px);
+  @include text-align(right);
+  @include padding-right(20px);
+}
+
+// Command Bar Item
+.item {
+  display: inline-block;
+  color: $ms-color-themePrimary;
+  height: $CommandBarItem-height;
+  outline: transparent;
+  vertical-align: top;
+  margin: 0 4px;
+
+  &:hover {
+    background-color: $ms-color-neutralLight;
     color: $ms-color-neutralPrimary;
+  }
 
-    position: relative;
-    background-color: $ms-color-neutralLighter;
-    height: $CommandBar-height;
-    white-space: nowrap;
-    user-select: none;
+  @media screen and (-ms-high-contrast: active) {
+    @include highContrastBorder($ms-color-black);
+    height: 38px;
+    outline: none;
   }
 
-  .ms-CommandBar-primaryCommands {
-    position: absolute;
-    overflow: hidden;
-    display: inline;
-    vertical-align: top;
-    line-height: $CommandBar-height;
-    max-width: 100%;
-    margin: 0 20px;
+  @media screen and (-ms-high-contrast: black-on-white) {
+    @include highContrastBorder($ms-color-white);
+    height: 38px;
+    outline: none;
   }
+}
 
-  .ms-CommandBar-sideCommands {
-    position: absolute;
-    @include right(0px);
-    @include text-align(right);
-    @include padding-right(20px);
+.itemChevronDown,
+.itemCommandText {
+  display: inline-block;
+  padding: 0 4px;
+  vertical-align: top;
+}
+
+@mixin CommandBarItem-text {
+  @include focus-border(2px);
+  @include ms-font-m;
+  color: $ms-color-neutralPrimary;
+
+  position: relative;
+  background: none;
+  border: none;
+  line-height: $CommandBarItem-height;
+  min-width: 20px;
+  text-align: center;
+  padding: 0 4px;
+  display: block;
+  height: 100%;
+
+  &.itemLinkIsNoName {
+    padding: 0 8px;
   }
+}
 
-  // Command Bar Item
-  .ms-CommandBarItem {
-    display: inline-block;
-    color: $ms-color-themePrimary;
-    height: $CommandBarItem-height;
-    outline: transparent;
-    vertical-align: top;
-    padding: 0 4px;
-
-    &:hover {
-      background-color: $ms-color-neutralLight;
-      color: $ms-color-neutralPrimary;
-    }
+.itemText {
+  @include CommandBarItem-text;
+}
+
+.itemLink {
+  @include CommandBarItem-text;
+  cursor: pointer;
 
+  &:hover,
+  &.itemLinkIsExpanded {
     @media screen and (-ms-high-contrast: active) {
-      @include highContrastBorder($ms-color-black);
-      height: 38px;
-      outline: none;
+      @include highContrastBorder($ms-color-white);
     }
 
     @media screen and (-ms-high-contrast: black-on-white) {
-      @include highContrastBorder($ms-color-white);
-      height: 38px;
-      outline: none;
+      @include highContrastBorder($ms-color-black);
     }
   }
 
-  .ms-CommandBarItem-chevronDown,
-  .ms-CommandBarItem-commandText {
-    display: inline-block;
-    padding: 0 4px;
-    vertical-align: top;
-  }
-
-  @mixin CommandBarItem-text {
-    @include focus-border(2px);
-    @include ms-font-m;
-    color: $ms-color-neutralPrimary;
+  &:hover:not([disabled]) {
+    color: $ms-color-neutralDark;
+    background-color: $ms-color-neutralLight;
 
-    position: relative;
-    background: none;
-    border: none;
-    line-height: $CommandBarItem-height;
-    min-width: 20px;
-    text-align: center;
-    padding: 0 4px;
-    display: block;
-    height: 100%;
-
-    &.ms-CommandBarItem--noName {
-      padding: 0 8px;
+    .itemIcon {
+      color: $ms-color-themeDark;
     }
-  }
-
-  .ms-CommandBarItem-text {
-    @include CommandBarItem-text;
-  }
-
-  .ms-CommandBarItem-link {
-    @include CommandBarItem-text;
-    cursor: pointer;
 
-    &:hover,
-    &.is-expanded {
-      @media screen and (-ms-high-contrast: active) {
-        @include highContrastBorder($ms-color-white);
-      }
-
-      @media screen and (-ms-high-contrast: black-on-white) {
-        @include highContrastBorder($ms-color-black);
-      }
+    .itemChevronDown {
+      color: $ms-color-neutralPrimaryAlt;
     }
 
-    &:hover:not([disabled]) {
+    .itemOverflow {
       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;
-      }
+  &.itemLinkIsExpanded {
+    background-color: $ms-color-neutralQuaternaryAlt;
+    color: $ms-color-black;
 
-      .ms-CommandBarItem-overflow {
-        color: $ms-color-black;
-      }
+    .itemIcon {
+      color: $ms-color-themeDarker;
     }
 
-    &.is-expanded:hover {
-      background-color: $ms-color-neutralQuaternary;
+    .itemChevronDown {
+      color: $ms-color-neutralDark;
     }
 
-    &[disabled] {
-      color: $ms-color-neutralTertiaryAlt;
-      cursor: default;
-      pointer-events: none;
-      .ms-CommandBarItem-icon {
-        color: $ms-color-neutralTertiaryAlt;
-      }
+    .itemOverflow {
+      color: $ms-color-black;
     }
   }
 
-  .ms-CommandBarItem-icon {
-    font-size: $CommandBarItem-fontSize;
-    padding: 0 4px;
-  }
-
-  .ms-CommandBarItem-iconColor {
-    color: $ms-color-themeDarkAlt;
-  }
-
-  .ms-CommandBarItem-chevronDown  {
-    color: $ms-color-neutralSecondary;
-    font-size: $CommandBarItem-chevronDown-fontSize;
+  &.itemLinkIsExpanded:hover {
+    background-color: $ms-color-neutralQuaternary;
   }
 
-  .ms-CommandBarItem-overflow {
-    font-size: $CommandBarItem-overflow-fontSize;
-    color: $ms-color-neutralPrimary;
-    padding: 0 7px;
+  &[disabled] {
+    color: $ms-color-neutralTertiaryAlt;
+    cursor: default;
+    pointer-events: none;
+    .itemIcon {
+      color: $ms-color-neutralTertiaryAlt;
+    }
   }
+}
 
-  // 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-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);
+.itemIcon {
+  font-size: $CommandBarItem-fontSize;
+  padding: 0 4px;
+}
 
-    @media screen and (-ms-high-contrast: active) {
-      @include border-right(1px, solid, $ms-color-white);
-      z-index: 10;
-    }
+.itemIconColor {
+  color: $ms-color-themeDarkAlt;
+}
 
-    @media screen and (-ms-high-contrast: black-on-white) {
-      @include border-right(1px, solid, $ms-color-black);
-    }
+.itemChevronDown  {
+  color: $ms-color-neutralSecondary;
+  font-size: $CommandBarItem-chevronDown-fontSize;
+}
 
-    &:before {
-      position: absolute;
-      content: ' ';
-      right: 0;
-      bottom: 0;
-      left: 0;
-      margin: 0 8px;
-      border-bottom: 1px solid $ms-color-neutralLight;
-    }
+.itemOverflow {
+  font-size: $CommandBarItem-overflow-fontSize;
+  color: $ms-color-neutralPrimary;
+  padding: 0 7px;
+}
 
-    &:hover {
-      color: $ms-color-themePrimary;
+// CommandBarSearch needs to replaced with SearchBox component, and hence following styles revisited/cleaned.
+.search {
+  @include float(left);
+  width: 208px;
+  max-width: 208px;
+  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);
+    z-index: 10;
+  }
 
-      @media screen and (-ms-high-contrast: active) {
-        @include highContrastBorder($ms-color-white);
-      }
+  @media screen and (-ms-high-contrast: black-on-white) {
+    @include border-right(1px, solid, $ms-color-black);
+  }
 
-      @media screen and (-ms-high-contrast: black-on-white) {
-        @include highContrastBorder($ms-color-black);
-      }
-    }
+  &:before {
+    position: absolute;
+    content: ' ';
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0 8px;
+    border-bottom: 1px solid $ms-color-neutralLight;
   }
 
-  .ms-CommandBarSearch-input {
-    height: $SearchBox-height;
-    // Due to a bug in IE9, we have to use a transparent left border instead of left padding
-    padding: $SearchBox-sidePadding $SearchBox-sidePadding $SearchBox-sidePadding 0;
-    border: none;
-    @include border-left($SearchBox-height + 2, solid, transparent);
-    background-color: transparent;
-    width: 100%;
-    box-sizing: border-box;
-    outline: none;
-    cursor: pointer;
-    font-size: $ms-font-size-m;
+  &:hover {
+    color: $ms-color-themePrimary;
 
     @media screen and (-ms-high-contrast: active) {
-      @include border-left($SearchBox-height, solid, $ms-color-black);
+      @include highContrastBorder($ms-color-white);
     }
 
     @media screen and (-ms-high-contrast: black-on-white) {
-      @include border-left($SearchBox-height, solid, $ms-color-white);
-    }
-
-    // remove default iOS styles on input boxes
-    -webkit-appearance: none;
-    -webkit-border-radius: 0;
-
-    // hide IE's X button for clearing the input (we have our own)
-    &::-ms-clear {
-      display: none;
+      @include highContrastBorder($ms-color-black);
     }
   }
+}
 
-  // default styles for icons, show the search icon and hide X (and arrow) until focused
-  .ms-CommandBarSearch-iconSearchWrapper {
-    display: block;
+.searchInput {
+  height: $SearchBox-height;
+  // Due to a bug in IE9, we have to use a transparent left border instead of left padding
+  padding: $SearchBox-sidePadding $SearchBox-sidePadding $SearchBox-sidePadding 0;
+  border: none;
+  @include border-left($SearchBox-height + 2, solid, transparent);
+  background-color: transparent;
+  width: 100%;
+  box-sizing: border-box;
+  outline: none;
+  cursor: pointer;
+  font-size: $ms-font-size-m;
+
+  @media screen and (-ms-high-contrast: active) {
+    @include border-left($SearchBox-height, solid, $ms-color-black);
   }
 
-  .ms-CommandBarSearch-iconArrowWrapper {
-    display: none;
+  @media screen and (-ms-high-contrast: black-on-white) {
+    @include border-left($SearchBox-height, solid, $ms-color-white);
   }
 
-  .ms-CommandBarSearch-iconSearchWrapper,
-  .ms-CommandBarSearch-iconArrowWrapper {
-    top: 0;
-    @include padding-left(17px);
-    @include padding-right(8px);
-  }
+  // remove default iOS styles on input boxes
+  -webkit-appearance: none;
+  -webkit-border-radius: 0;
 
-  .ms-CommandBarSearch-iconClearWrapper {
+  // hide IE's X button for clearing the input (we have our own)
+  &::-ms-clear {
     display: none;
-    top: 1px;
-    @include right(0px);
-    z-index: $ms-zIndex-front;
   }
+}
 
-  //== State: Puts search in an active state
-  //
-  .ms-CommandBarSearch.is-active {
-    background-color: $ms-color-themeLight;
-    color: $ms-color-black;
-
-    &:hover {
-      background-color: $ms-color-themeLight;
-      color: $ms-color-black;
-    }
-
-    .ms-CommandBarSearch-input {
-      cursor: text;
-      @include padding-right($SearchBox-height); // leave room for the X
-      @include border-left-width($SearchBox-sidePadding);
-    }
-
-    &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input {
-      @include border-left-width($SearchBox-height); // leave room for arrow
-    }
-
-    // when focused, remove the search icon and possibly show arrow icon
-    & .ms-CommandBarSearch-iconSearchWrapper {
-      display: none;
-    }
+// default styles for icons, show the search icon and hide X (and arrow) until focused
+.searchIconSearchWrapper {
+  display: block;
+}
 
-    &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper {
-      display: block;
-    }
+.searchIconArrowWrapper {
+  display: none;
+}
 
-    .ms-CommandBarSearch-input {
-      @include padding-right($SearchBox-height);
-    }
+.searchIconSearchWrapper,
+.searchIconArrowWrapper {
+  top: 0;
+  @include padding-left(17px);
+  @include padding-right(8px);
+}
 
-    .ms-CommandBarSearch-iconClearWrapper {
-      display: block;
-    }
-  }
+.searchIconClearWrapper {
+  display: none;
+  top: 1px;
+  @include right(0px);
+  z-index: $ms-zIndex-front;
+}
 
-  .ms-CommandBarSearch-iconWrapper {
-    height: $SearchBox-height;
-    line-height: $SearchBox-height;
-    cursor: pointer;
-    position: absolute;
-    text-align: center;
-  }
+.searchIconWrapper {
+  height: $SearchBox-height;
+  line-height: $SearchBox-height;
+  cursor: pointer;
+  position: absolute;
+  text-align: center;
+}
 
-  // New rules
-  .ms-CommandBarSearch .ms-Icon:before {
-    font-size: $SearchBox-iconSize;
-    color: $ms-color-themePrimary;
-  }
+// New rules
+.search :global(.ms-Icon:before) {
+  font-size: $SearchBox-iconSize;
+  color: $ms-color-themePrimary;
+}
 
-  .ms-CommandBarSearch-input,
-  .ms-CommandBarSearch-input::-webkit-input-placeholder {
-    @include ms-baseFont;
-    font-size: $ms-font-size-m;
-  }
+.searchInput,
+.searchInput::-webkit-input-placeholder {
+  @include ms-baseFont;
+  font-size: $ms-font-size-m;
 }
+
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
index a026dcaf2e386d..603b9b10b5248a 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
@@ -17,7 +17,7 @@ import {
   IconName,
   IIconProps
 } from '../../Icon';
-import './CommandBar.scss';
+import styles from './CommandBar.scss';
 
 const OVERFLOW_KEY = 'overflow';
 const OVERFLOW_WIDTH = 41.5;
@@ -92,42 +92,51 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
 
     if (isSearchBoxVisible) {
       searchBox = (
-        <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>
+        <div className={ css('ms-CommandBarSearch', styles.search) } ref='searchSurface'>
+          <input className={ css('ms-CommandBarSearch-input', styles.searchInput) } type='text' placeholder={ searchPlaceholderText } />
+          <div className={ css(
+            'ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper',
+            styles.searchIconWrapper, styles.searchIconSearchWrapper) }>
+            <i className={ css('ms-Icon ms-Icon--Search') }></i>
           </div>
-          <div className='ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s'>
-            <i className='ms-Icon ms-Icon--Cancel'></i>
+          <div className={ css(
+            'ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s',
+            styles.searchIconWrapper,
+            styles.searchIconClearWrapper
+          ) }>
+            <i className={ css('ms-Icon ms-Icon--Cancel') }></i>
           </div>
         </div>
       );
     }
 
     return (
-      <div className={ css('ms-CommandBar', className) } ref='commandBarRegion'>
+      <div className={ css('ms-CommandBar', styles.root, className) } ref='commandBarRegion'>
         { searchBox }
         <FocusZone ref='focusZone' direction={ FocusZoneDirection.horizontal } rootProps={ { role: 'menubar' } }>
-          <div className='ms-CommandBar-primaryCommands' ref='commandSurface'>
+          <div className={ css('ms-CommandBar-primaryCommands', styles.primaryCommands) } ref='commandSurface'>
             { renderedItems.map((item, index) => (
               this._renderItemInCommandBar(item, index, expandedMenuItemKey)
             )).concat((renderedOverflowItems && renderedOverflowItems.length) ? [
-              <div className='ms-CommandBarItem' key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
+              <div className={ css('ms-CommandBarItem', styles.item) } key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
                 <button
+                  type='button'
                   id={ this._id + OVERFLOW_KEY }
-                  className={ css('ms-CommandBarItem-link', { 'is-expanded': (expandedMenuItemKey === OVERFLOW_KEY) }) }
+                  className={ css('ms-CommandBarItem-link', styles.itemLink, {
+                    ['is-expanded ' + styles.itemLinkIsExpanded]: (expandedMenuItemKey === OVERFLOW_KEY)
+                  }) }
                   onClick={ this._onOverflowClick }
                   role='menuitem'
                   aria-label={ this.props.elipisisAriaLabel || '' }
                   aria-haspopup={ true }
                   data-automation-id='commandBarOverflow'
                 >
-                  <i className='ms-CommandBarItem-overflow ms-Icon ms-Icon--More' />
+                  <i className={ css('ms-CommandBarItem-overflow ms-Icon ms-Icon--More', styles.itemOverflow) } />
                 </button>
               </div>
             ] : []) }
           </div>
-          <div className='ms-CommandBar-sideCommands' ref='farCommandSurface'>
+          <div className={ css('ms-CommandBar-sideCommands', styles.sideCommands) } ref='farCommandSurface'>
             { renderedFarItems.map((item, index) => (
               this._renderItemInCommandBar(item, index, expandedMenuItemKey, true)
             )) }
@@ -135,7 +144,7 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
         </FocusZone>
         { (contextualMenuProps) ?
           (<ContextualMenu
-            className='ms-CommandBar-menuHost'
+            className={ css('ms-CommandBar-menuHost') }
             isBeakVisible={ true }
             directionalHint={ DirectionalHint.bottomAutoEdge }
             { ...contextualMenuProps }
@@ -154,17 +163,20 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
 
   private _renderItemInCommandBar(item: IContextualMenuItem, index: number, expandedMenuItemKey: string, isFarItem?: boolean) {
     const itemKey = item.key || String(index);
-    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) });
+    const className = css(
+      item.onClick ? ('ms-CommandBarItem-link ' + styles.itemLink) : ('ms-CommandBarItem-text ' + styles.itemText),
+      !item.name && ('ms-CommandBarItem--noName ' + styles.itemLinkIsNoName),
+      (expandedMenuItemKey === item.key) && ('is-expanded ' + styles.itemLinkIsExpanded)
+    );
     let hasIcon = !!item.icon || !!item.iconProps;
 
-    return <div className={ css('ms-CommandBarItem', item.className) } key={ itemKey } ref={ itemKey }>
+    return <div className={ css('ms-CommandBarItem', styles.item, item.className) } key={ itemKey } ref={ itemKey }>
       { (() => {
         if (item.onClick || hasSubmenuItems(item)) {
           return <button
             { ...getNativeProps(item, buttonProperties) }
             id={ this._id + item.key }
-            className={ classNameValue }
+            className={ className }
             onClick={ (ev) => this._onItemClick(ev, item) }
             data-command-key={ index }
             aria-haspopup={ hasSubmenuItems(item) }
@@ -172,21 +184,27 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
             aria-label={ item.ariaLabel || item.name }
           >
             { (hasIcon) ? this._renderIcon(item) : (null) }
-            { (!!item.name) && <span className='ms-CommandBarItem-commandText'>{ item.name }</span> }
+            { (!!item.name) && (
+              <span
+                className={ css('ms-CommandBarItem-commandText', styles.itemCommandText) }
+              >
+                { item.name }
+              </span>
+            ) }
             { hasSubmenuItems(item) ? (
-              <i className='ms-CommandBarItem-chevronDown ms-Icon ms-Icon--ChevronDown' />
+              <i className={ css('ms-CommandBarItem-chevronDown ms-Icon ms-Icon--ChevronDown', styles.itemChevronDown) } />
             ) : (null) }
           </button>;
         } else {
           return <div
             { ...getNativeProps(item, divProperties) }
             id={ this._id + item.key }
-            className={ classNameValue }
+            className={ className }
             data-command-key={ index }
             aria-haspopup={ hasSubmenuItems(item) }
           >
             { (hasIcon) ? this._renderIcon(item) : (null) }
-            <span className='ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular' aria-hidden='true' role='presentation'>{ item.name }</span>
+            <span className={ css('ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular', styles.itemCommandText) } aria-hidden='true' role='presentation'>{ item.name }</span>
           </div>;
         }
       })() }
@@ -199,8 +217,8 @@ export class CommandBar extends React.Component<ICommandBarProps, ICommandBarSta
       iconName: item.icon as IconName
     };
     // Use the default icon color for the known icon names
-    let iconColorClassName = iconProps.iconName === 'None' ? '' : 'ms-CommandBarItem-iconColor';
-    let iconClassName = css('ms-CommandBarItem-icon', iconColorClassName, iconProps.className);
+    let iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-CommandBarItem-iconColor ' + styles.itemIconColor);
+    let iconClassName = css('ms-CommandBarItem-icon', styles.itemIcon, iconColorClassName, iconProps.className);
 
     return <Icon { ...iconProps } className={ iconClassName } />;
   }