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

…Navigation component
salesforce-ux · Jul 21, 2017 · 074771ac8297a45f84b3c37d9b1ae668ccdcc717 · 074771a
1 parent e6d50b2
commit 074771ac8297a45f84b3c37d9b1ae668ccdcc717
Unified Split

Showing with 51 additions and 36 deletions.

+48 −27 ui/components/global-navigation/navigation-bar/_index.scss

+3 −3 ui/components/global-navigation/navigation-bar/example.jsx

+0 −6 ui/components/global-navigation/tokens/background-color.yml
diff --git a/ui/components/global-navigation/navigation-bar/_index.scss b/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;
-  
-    }
  }
 }
diff --git a/ui/components/global-navigation/navigation-bar/example.jsx b/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 }

diff --git a/ui/components/global-navigation/tokens/background-color.yml b/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.