[MDL2]: Breadcrumb, fixing the branch

.pullapprove.yml

@@ -11,5 +11,8 @@ reviewers:
   - mikewheaton
   - dzearing
   - cliffkoh
+  - aditima
+  - yiminwu
+  - antonlabunets
   name: pullapprove
   required: 1

.travis.yml

@@ -0,0 +1,14 @@
+language: node_js
+node_js:
+- '4.2'
+before_script:
+- npm install -g gulp
+script: gulp
+deploy:
+  provider: npm
+  email: [email protected]
+  api_key:
+    secure: kLwlKSvDBoGsYP0p+64JnW5kmSpZfSmt2YxKKwWFcThlsiftbZtUILWFVpPd7A5yymsYuOONZTXppaW00OWaH1Bqs6yVHOn3kVQzE7VK/FtVwGZnqFfF0ea0pYYfto3OIFnyZ86vZ0M8u2A+3FGqjGYT1y3RDbG5GqhURBNd+KBhHrMS+pSaGDgEjskslLeQ+QtQ1/t17j0ZQZeYpxl+qFKislR1djeF0pkOjaoJ8wAUB77E0RhVyKP4cOyvtiF9E8nmnaurNYuabZqFMzOg0PgzMhh6xWv10aGF7jNzgojzCix/grCJR1gdfaE6epPGkrufK1nFjCVb60Z+jHZmuhXrW80Qa9AsMbNkXLlm9g6OLm63Ub2xqNQ5338NteGygWj8FRYe7ZngQ/vAY7SK44oA6+QRJAcpV6ieUFeIN8oEoZ42TJjUuKa6xaRVxuRQs2yobB3GzE4QioWLtqlDo+jbkzc0uFUpQHfErH5pHa7+qHDawiY9sO41lKvds6KfD3PXqHJxdokQh5nRB28k0eN+rFiSyvimDmerqBeG0U2oVJuYGVwGZSMKkOXGoZjZaCOFkPaZcS+HQZ+iDYpqEoB1jF1iYgkknZQLDlprWywjXEy/u2C2Bkd1K31aFCwYxrxkgGquii1ugUFVrjCpNLbeeoKALx5JapDfyAUVF+U=
+  on:
+    tags: true
+    repo: OfficeDev/office-ui-fabric-react

package.json

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

src/common/_semanticColorVariables.scss

@@ -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/components/Breadcrumb/Breadcrumb.scss

@@ -7,180 +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 {
   @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-s;
-  color: $ms-color-neutralSecondary;
-  vertical-align: top;
-  margin: 11px 7px;
-}
 
-.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: none;
-  position: relative;
 
-  .ms-Breadcrumb-overflowButton {
-    font-size: 16px;
-    display: inline-block;
-    color: $ms-color-themePrimary;
-    padding: 8px;
-    cursor: pointer;
-    vertical-align: top;
-  }
-}
-
-.ms-Breadcrumb-overflowMenu {
-  display: none;
-  position: absolute;
-  margin-right: -2px;
-
-  &.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: $ms-color-white;
+    .ms-Breadcrumb-itemLink {
+      @include focus-border;
+      @include ms-font-xl;
+      display: inline-block;
+      padding: 0 4px;
+      max-width: $Breadcrumb-itemMaxWidth;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      vertical-align: top;
+    }
   }
 
-  .ms-ContextualMenu {
-    border: 0;
-    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;
-
-  &:hover {
-    background-color: $ms-color-neutralLighter;
-    cursor: pointer;
-  }
-
-  &:focus {
-    outline: $ms-color-neutralSecondaryAlt solid 1px;
-    color: $ms-color-black;
-  }
 
-  &:active {
+  .ms-Breadcrumb-itemLink,
+  .ms-Breadcrumb-overflowButton {
+    text-decoration: none;
     outline: transparent;
-    background-color: $ms-color-neutralTertiaryAlt;
-  }
-}
-
-.ms-Breadcrumb-itemLink {
-  font-weight: $ms-font-weight-light;
-  font-size: $ms-font-size-xl;
-  color: $ms-color-neutralPrimary;
-  display: inline-block;
-  padding: 0 4px;
-  max-width: 160px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  vertical-align: top;
-}
 
+    &:hover {
+      background-color: $selectedHoverBackgroundColor;
+      color: $Breadcrumb-buttonHoverColor;
+      cursor: pointer;
+    }
 
-@media screen and (max-width: $ms-screen-md-max) {å
-  .ms-Breadcrumb {
-    margin: 10px 0;
-  }
+    &:focus {
+      outline: $ms-color-neutralSecondaryAlt solid 1px;
+      color: $ms-color-neutralDark;
+    }
 
-  .ms-Breadcrumb-itemLink {
-    font-size: $ms-font-size-l;
+    &:active {
+      outline: transparent;
+      background-color: $selectedActiveBackgroundColor;
+      color: $selectedActiveForegroundColor;
+    }
   }
 
-  .ms-Breadcrumb-chevron {
-    font-size: 10px;
-    margin: 8px 5px;
-  }
+  @media screen and (max-width: $ms-screen-md-max) {
+    margin: 11px 0 1px;
 
-  .ms-Breadcrumb-overflow {
-    .ms-Breadcrumb-overflowButton {
-      font-size: 16px;
-      padding: 5px 4px;
+    .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink {
+      font-size: $ms-font-size-l;
     }
-  }
-}
 
-@media screen and (max-width: $ms-screen-sm-max) {
-  .ms-Breadcrumb-itemLink {
-    font-size: $ms-font-size-m;
-    max-width: 116px;
-  }
+    .ms-Breadcrumb-chevron {
+      font-size: $ms-font-size-mi;
+      margin: 8px 5px;
+    }
 
-  .ms-Breadcrumb-chevron {
-    margin: 5px 4px;
+    .ms-Breadcrumb-overflow {
+      .ms-Breadcrumb-overflowButton {
+        font-size: $ms-font-size-m-plus;
+        padding: 5px 4px;
+      }
+    }
   }
 
-  .ms-Breadcrumb-overflow {
-    .ms-Breadcrumb-overflowButton {
-      padding: 2px 4px;
+  @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;
     }
-  }
-}
 
-// TODO: Overrides that need to be removed.
+    .ms-Breadcrumb-chevron {
+      margin: 5px 4px;
+    }
 
-.ms-Breadcrumb-overflow {
-  display: inline-block;
+    .ms-Breadcrumb-overflow {
+      .ms-Breadcrumb-overflowButton {
+        padding: 2px 4px;
+      }
+    }
+  }
 }
 
-.ms-Breadcrumb-overflowButton {
-  line-height: 12px;
-  margin-right: 0px;
-}

src/components/Breadcrumb/Breadcrumb.tsx

@@ -76,13 +76,13 @@ export class Breadcrumb extends React.Component<IBreadcrumbProps, IBreadcrumbSta
           <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(
@@ -94,7 +94,7 @@ export class Breadcrumb extends React.Component<IBreadcrumbProps, IBreadcrumbSta
                   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>

src/components/Check/Check.scss

@@ -14,10 +14,7 @@ $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
 
 .ms-CheckBox {
   box-sizing: border-box;
-  color: $ms-color-neutralPrimary;
-  font-family: $ms-font-family-base;
-  font-size: $ms-font-size-m;
-  font-weight: $ms-font-weight-regular;
+  @include ms-baseFont;
   min-height: 36px;
   position: relative;