fix(global-nav-updates): add animation and make ui changes to Global Navigation component

Author: Jade Pennig

ui/components/global-navigation/navigation-bar/_index.scss

@@ -1,6 +1,8 @@
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
+$color-background-context-bar-brand-light: rgba(desaturate($color-background-context-bar-brand-accent, 30%), 0.05);
+
 /**
  * @summary Navigation bar wrapper
  *
@@ -13,7 +15,6 @@
   display: flex;
   height: $height-context-bar;
   background-color: $color-background-context-bar;
-  border-top: $border-width-thin solid $color-border;
   border-bottom: 3px solid $color-background-context-bar-brand-accent;
   color: $color-text-default;
   position: relative;
@@ -87,9 +88,7 @@
     &.slds-is-active {
       outline: 0;
       border-radius: 0;
-      background-color: $color-background-context-bar-item-hover;
-      border-bottom: 3px solid $color-background-context-bar-brand-accent;
-      margin-bottom: (3px * -1);
+      background-color: $color-background-context-bar-brand-light;
       text-decoration: none;
       cursor: pointer;
     }
@@ -112,9 +111,17 @@
     }
 
     &.slds-is-active {
-      border-left: $border-width-thin solid $color-border;
-      border-right: $border-width-thin solid $color-border;
-      border-bottom-color: $color-background-context-bar-item-hover;
+      animation: bkAnim 0.135s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+
+      @keyframes bkAnim {
+        50% {
+          background-color: #edf1f4;
+        }
+
+        100% {
+          background-color: #F7F9FB;
+        }
+      }
 
       &:before,
       &:after {
@@ -126,6 +133,26 @@
         top: 0;
         left: -1px;
         right: -1px;
+        animation: navBounceIn 0.15s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+      }
+
+      @keyframes navBounceIn {
+        0% {
+          transform: translate3d(0, 20px, 0);
+          opacity: 0;
+        }
+
+        20% {
+          opacity: 0;
+        }
+
+        90% {
+          transform: translate3d(0, 1px, 0);
+        }
+
+        100% {
+          transform: translate3d(0, 0, 0);
+        }
       }
 
       &:after {
@@ -138,15 +165,10 @@
       }
 
       &:hover {
-        border-bottom-color: $color-background-context-bar-item-hover;
+        border-bottom-color: $color-background-context-bar-brand-light;
       }
     }
 
-    // Remove border on active due to primary section always having a right border
-    &:first-child.slds-is-active {
-      border-left: 0;
-    }
-
     /**
      * Toggled focused class applied via JavaScript
      *
@@ -168,7 +190,6 @@
      *
      * @selector .slds-context-bar__item_divider-left
      * @restrict .slds-context-bar div, .slds-context-bar li
-     * @modifier
      */
     &_divider-left,
     &--divider-left {
@@ -180,7 +201,6 @@
      *
      * @selector .slds-context-bar__item_divider-right
      * @restrict .slds-context-bar div, .slds-context-bar li
-     * @modifier
      */
     &_divider-right,
     &--divider-right {
@@ -289,6 +309,19 @@
     margin-left: auto;
   }
 
+
+  /**
+   * @summary Tab modifier when using a tabset
+   *
+   * @name navigation-tab-bar
+   * @selector .slds-context-bar_tabs
+   * @restrict .slds-context-bar
+   * @variant
+   */
+  &_tabs {
+    border-top: $border-width-thin solid $color-border;
+  }
+
   /**
    *
    * #### Accessibility
@@ -298,14 +331,10 @@
    * set the value of `aria-controls` on the Split View Toggle button, to the `ID` of the
    * wrapper element that contains the Split View List.
    *
-   * @summary Tab modifier when using a tabset
-   *
-   * @name navigation-tab-bar
    * @selector .slds-context-bar__item_tab
    * @restrict .slds-context-bar__item
    * @notes Only use on tabset version
    * @required
-   * @variant
    *
    */
   &__item_tab,
@@ -320,13 +349,10 @@
     // Handle active states
     &.slds-is-active,
     &:nth-child(n).slds-is-active {
-      border-left: 0;
-      border-bottom-color: $color-background-context-tab-bar-item;
       background-color: $color-background-context-tab-bar-item;
 
       &:hover {
         background-color: $color-background-context-tab-bar-item;
-        border-bottom-color: transparent;
       }
     }
 
@@ -438,7 +464,6 @@
   border-right: $border-width-thin solid $color-border;
 }
 
-
 // Themes - Pre-defined themes
 // Using mixin to determine text color and interactive states
 //
@@ -456,9 +481,5 @@
     &:before {
       background: #f59331;
     }
-
-    &:hover {
-      border-bottom-color: $color-background-context-bar-item-hover;
-    }
   }
 }

ui/components/global-navigation/navigation-bar/example.jsx

@@ -39,7 +39,7 @@ export let ContextBar = props =>
   <div className={classNames('slds-context-bar', props.className)}>
 
     {/* Primary Section */}
-    <div className="slds-context-bar__primary slds-context-bar__item_divider-right">
+    <div className="slds-context-bar__primary">
 
       {/* App Switcher */}
       <div className="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
@@ -81,8 +81,8 @@ export let ContextBar = props =>
         { !props.children
           ? _.times(3, i =>
             <li className="slds-context-bar__item" key={i}>
-              <a href="javascript:void(0);" className="slds-context-bar__label-action" title={'Menu Item ' + i}>
-                <span className="slds-truncate" title="Menu Item">{ props.stencil ? '🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢' : 'Menu Item ' + i }</span>
+              <a href="javascript:void(0);" className="slds-context-bar__label-action" title="Menu Item">
+                <span className="slds-truncate" title="Menu Item">{ props.stencil ? '🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢' : 'Menu Item'}</span>
               </a>
             </li>
           ) : props.children }

ui/components/global-navigation/tokens/background-color.yml

@@ -15,12 +15,6 @@ props:
   COLOR_BACKGROUND_CONTEXT_BAR_BRAND_ACCENT:
     value: '{!CERULEAN}'
     comment: Brand color in context bar for default theme
-  COLOR_BACKGROUND_CONTEXT_BAR_ITEM_HOVER:
-    value: '{!PALETTE_GRAY_2}'
-    comment: Hovered context bar item background color.
-  COLOR_BACKGROUND_CONTEXT_BAR_ITEM_ACTIVE:
-    value: '{!PALETTE_GRAY_2}'
-    comment: Active context bar item background color.
   COLOR_BACKGROUND_CONTEXT_TAB_BAR_ITEM:
     value: '{!WHITE}'
     comment: Context TAB bar item background color.