MDL2: Dependency on fabric-core. Component style updates

gulpfile.js

@@ -24,10 +24,10 @@ build.postCopy.setConfig({
 isProduction && build.postCopy.setConfig({
   copyTo: {
     'dist/sass': [
-      'node_modules/office-ui-fabric/dist/sass/*.*'
+      'node_modules/office-ui-fabric-core/dist/sass/*.*'
     ],
     'dist/css': [
-      'node_modules/office-ui-fabric/dist/css/*.*'
+      'node_modules/office-ui-fabric-core/dist/css/*.*'
     ]
   }
 });

package.json

@@ -23,7 +23,7 @@
     "gulp-util": "3.0.7",
     "gutil": "1.6.4",
     "highlight.js": "9.6.0",
-    "office-ui-fabric": "~2.6.0",
+    "office-ui-fabric-core": "^4.0.0",
     "react-addons-test-utils": "^15.1.0",
     "react-highlight": "0.8.0",
     "source-map-loader": "0.1.5",

src/common/_common.scss

@@ -1,8 +1,6 @@
-@import '~office-ui-fabric/src/sass/Fabric.Common';
-@import './fabricExtraColors';
+@import '~office-ui-fabric-core/dist/sass/Fabric.Common';
 @import './i18n';
 @import './themeOverrides';
 @import './focusBorder';
 @import './semanticColorVariables';
-@import './fabricExtraIcons';
 

src/common/_semanticColorVariables.scss

@@ -1,4 +1,4 @@
-$focusedBorderColor: $ms-color-neutralSecondaryAlt;
+$focusedBorderColor: $ms-color-neutralSecondary;
 
 $bodyBackgroundColor: $ms-color-white;
 $bodyForegroundColor: $ms-color-neutralPrimary;
@@ -22,4 +22,7 @@ $selectedForegroundColor: $ms-color-neutralPrimary;
 $selectedHoverBackgroundColor: $ms-color-neutralLight;
 $selectedHoverForegroundColor: $ms-color-neutralDark;
 
+$selectedActiveBackgroundColor: $ms-color-neutralTertiaryAlt;
+$selectedActiveForegroundColor: $ms-color-neutralPrimary;
+
 $dividerColor: $ms-color-neutralLight;

src/common/_themeOverrides.scss

@@ -16,8 +16,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/Breadcrumb/Breadcrumb.scss

@@ -7,165 +7,128 @@
 // --------------------------------------------------
 // Breadcrumb styles
 
+$Breadcrumb-overflowButtonColor: $ms-color-themePrimary;
+$Breadcrumb-overflowButtonSize: 16px;
+$Breadcrumb-buttonHoverColor: $ms-color-themeDark;
+$Breadcrumb-itemMaxWidth: 160px;
+$Breadcrumb-itemMaxWidth-sm: 116px;
 
 .ms-Breadcrumb {
-  margin: 23px 0 1px 0;
+  @include ms-baseFont;
+  margin: 23px 0 1px;
 
-  &.is-overflow {
-    .ms-Breadcrumb-overflow {
-      display: inline;
-    }
+  .ms-Breadcrumb-list {
+    white-space: nowrap;
+    padding: 0;
+    margin: 0;
   }
-}
-
-.ms-Breadcrumb-chevron {
-  font-size: $ms-font-size-l;
-  color: $ms-color-neutralSecondary;
-  vertical-align: top;
-  margin: 10px 0;
-}
 
-.ms-Breadcrumb-list {
-  display: inline;
-  white-space: nowrap;
-  padding: 0;
-  margin: 0;
+  .ms-Breadcrumb-chevron {
+    font-size: $ms-font-size-s;
+    color: $ms-color-neutralSecondary;
+    vertical-align: top;
+    margin: 11px 7px;
+  }
 
   .ms-Breadcrumb-listItem {
     list-style-type: none;
     vertical-align: top;
     margin: 0;
     padding: 0;
     display: inline-block;
+    position: relative;
 
     &:last-of-type {
       .ms-Breadcrumb-chevron {
         display: none;
       }
     }
-  }
-}
-
-.ms-Breadcrumb-overflow {
-  display: inline-block;
-  position: relative;
 
-  .ms-Breadcrumb-overflowButton {
-    font-size: $ms-font-size-s;
-    display: inline-block;
-    color:$ms-color-themePrimary;
-    padding: 12px 8px 3px 8px;
-    cursor: pointer;
-  }
-}
-
-.ms-Breadcrumb-overflowMenu {
-  display: none;
-  position: absolute;
-
-  &.is-open {
-    display: block;
-    top: 36px;
-    left: 0;
-    @include drop-shadow;
-    background-color: $ms-color-white;
-    border: 1px solid $ms-color-neutralTertiaryAlt;
-    z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle);
-  }
-
-  &:before {
-    position: absolute;
-    @include drop-shadow;
-    top: -6px;
-    left: 6px;
-    content: ' ';
-    width: 16px;
-    height: 16px;
-    transform: rotate(45deg);
-    background-color: white;
+    .ms-Breadcrumb-itemLink {
+      @include focus-border;
+      @include ms-font-xl;
+      color: $ms-color-neutralPrimary;
+      display: inline-block;
+      padding: 0 4px;
+      max-width: $Breadcrumb-itemMaxWidth;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      vertical-align: top;
+    }
   }
 
-  .ms-ContextualMenu {
-    border: none;
-    box-shadow: none;
+  .ms-Breadcrumb-overflow {
+    display: inline-block;
     position: relative;
-    width: 190px;
 
-    &.is-open {
-      margin-bottom: 0;
+    .ms-Breadcrumb-overflowButton {
+      font-size: $Breadcrumb-overflowButtonSize;
+      display: inline-block;
+      color: $Breadcrumb-overflowButtonColor;
+      padding: 8px;
+      cursor: pointer;
+      vertical-align: top;
     }
   }
-}
 
-.ms-Breadcrumb-itemLink,
-.ms-Breadcrumb-overflowButton {
-  text-decoration: none;
-  outline: transparent;
+  .ms-Breadcrumb-itemLink,
+  .ms-Breadcrumb-overflowButton {
+    text-decoration: none;
+    outline: transparent;
 
-  &:hover {
-    background-color: $ms-color-neutralLighter;
-    color: $ms-color-themeDark;
-    cursor: pointer;
-  }
+    &:hover {
+      background-color: $selectedHoverBackgroundColor;
+      color: $Breadcrumb-buttonHoverColor;
+      cursor: pointer;
+    }
 
-  &:focus {
-    outline: $ms-color-neutralSecondaryAlt solid 1px;
-    color: $ms-color-black;
-  }
+    &:focus {
+      outline: $ms-color-neutralSecondaryAlt solid 1px;
+      color: $ms-color-neutralDark;
+    }
 
-  &:active {
-    outline: transparent;
-    background-color: $ms-color-neutralTertiaryAlt;
+    &:active {
+      outline: transparent;
+      background-color: $selectedActiveBackgroundColor;
+      color: $selectedActiveForegroundColor;
+    }
   }
-}
 
-.ms-Breadcrumb-itemLink {
-  @include focus-border();
-  @include ms-font-xl();
-  display: inline-block;
-  padding: 0 4px;
-  max-width: 160px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+  @media screen and (max-width: $ms-screen-md-max) {
+    margin: 11px 0 1px;
 
-@media screen and (max-width: $ms-screen-md-max) {
-  .ms-Breadcrumb {
-    margin: 10px 0;
-  }
-
-  .ms-Breadcrumb-itemLink {
-    font-size: $ms-font-size-l;
-  }
+    .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink {
+      font-size: $ms-font-size-l;
+    }
 
-  .ms-Breadcrumb-chevron {
-    font-size: $ms-font-size-m;
-    margin-top: 7px;
-  }
+    .ms-Breadcrumb-chevron {
+      font-size: $ms-font-size-mi;
+      margin: 8px 5px;
+    }
 
-  .ms-Breadcrumb-overflow {
-    .ms-Breadcrumb-overflowButton {
-      padding-top: 8px;
-      padding-bottom: 3px;
+    .ms-Breadcrumb-overflow {
+      .ms-Breadcrumb-overflowButton {
+        font-size: $ms-font-size-m-plus;
+        padding: 5px 4px;
+      }
     }
   }
-}
 
-@media screen and (max-width: $ms-screen-sm-max) {
-  .ms-Breadcrumb-itemLink {
-    font-size: $ms-font-size-m;
-    max-width: 116px;
-  }
+  @media screen and (max-width: $ms-screen-sm-max) {
+    .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink {
+      font-size: $ms-font-size-m;
+      max-width: $Breadcrumb-itemMaxWidth-sm;
+    }
 
-  .ms-Breadcrumb-chevron {
-    margin-top: 4px;
-  }
+    .ms-Breadcrumb-chevron {
+      margin: 5px 4px;
+    }
 
-  .ms-Breadcrumb-overflow {
-    .ms-Breadcrumb-overflowButton {
-      padding-top: 5px;
-      padding-bottom: 3px;
+    .ms-Breadcrumb-overflow {
+      .ms-Breadcrumb-overflowButton {
+        padding: 2px 4px;
+      }
     }
   }
 }

src/components/Breadcrumb/Breadcrumb.tsx

@@ -70,13 +70,13 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
           <ul className='ms-Breadcrumb-list'>
           { renderedOverflowItems && renderedOverflowItems.length ? (
             <li className='ms-Breadcrumb-overflow' key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
-              <div className='ms-Breadcrumb-overflowButton ms-Icon ms-Icon--ellipsis'
+              <div className='ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More'
                   onClick={ this._onOverflowClicked.bind(this) }
                   data-is-focusable={ true }
                   role='button'
                   aria-haspopup='true'
                   aria-owns={ isOverflowOpen ? overflowMenuId : null } />
-              <i className={ css('ms-Breadcrumb-chevron ms-Icon', getRTL() ? 'ms-Icon--chevronLeft' : 'ms-Icon--chevronRight') }></i>
+              <i className={ css('ms-Breadcrumb-chevron ms-Icon', getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }></i>
             </li>
           ) : (null) }
           { renderedItems.map(
@@ -88,7 +88,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, IBreadcrumbState
                   role={ item.onClick ? 'button' : 'link' }>
                   { item.text }
                   </a>
-              <i className={ css('ms-Breadcrumb-chevron ms-Icon', getRTL() ? 'ms-Icon--chevronLeft' : 'ms-Icon--chevronRight') }></i>
+              <i className={ css('ms-Breadcrumb-chevron ms-Icon', getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }></i>
             </li>
           )) }
           </ul>