feat(navBar): option to disable ink bar (#9866)

* Adds support for the `md-no-ink-bar` attribute for the navBar (as same as in the tabs)

Closes #9862.

Author: devversion

src/components/navBar/demoBasicUsage/index.html

@@ -1,6 +1,9 @@
 <div ng-controller="AppCtrl" ng-cloak>
   <md-content class="md-padding">
-    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
+    <md-nav-bar md-selected-nav-item="currentNavItem"
+                md-no-ink-bar="disableInkBar"
+                nav-bar-aria-label="navigation links">
+
       <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
       <md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
       <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
@@ -12,5 +15,8 @@
     <div class="ext-content">
       External content for `<span>{{currentNavItem}}</span>`.
     </div>
+
+    <md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
+
   </md-content>
 </div>

src/components/navBar/navBar.js

@@ -36,6 +36,7 @@ angular.module('material.components.navBar', ['material.core'])
  *
  * @param {string=} mdSelectedNavItem The name of the current tab; this must
  * match the name attribute of `<md-nav-item>`
+ * @param {boolean=} mdNoInkBar If set to true, the ink bar will be hidden.
  * @param {string=} navBarAriaLabel An aria-label for the nav-bar
  *
  * @usage
@@ -101,6 +102,7 @@ function MdNavBar($mdAria, $mdTheming) {
     bindToController: true,
     scope: {
       'mdSelectedNavItem': '=?',
+      'mdNoInkBar': '=?',
       'navBarAriaLabel': '@?',
     },
     template:
@@ -114,7 +116,7 @@ function MdNavBar($mdAria, $mdTheming) {
             'aria-label="{{ctrl.navBarAriaLabel}}">' +
           '</ul>' +
         '</nav>' +
-        '<md-nav-ink-bar></md-nav-ink-bar>' +
+        '<md-nav-ink-bar ng-hide="ctrl.mdNoInkBar"></md-nav-ink-bar>' +
       '</div>',
     link: function(scope, element, attrs, ctrl) {
       $mdTheming(element);
@@ -240,7 +242,7 @@ MdNavBarController.prototype._updateInkBarStyles = function(tab, newIndex, oldIn
 
   this._inkbar.css({display: newIndex < 0 ? 'none' : ''});
 
-  if(tab){
+  if (tab) {
     var tabEl = tab.getButtonEl();
     var left = tabEl.offsetLeft;
 

src/components/navBar/navBar.scss

@@ -58,6 +58,14 @@ md-nav-ink-bar {
     transition: left $duration $swift-ease-in-out-timing-function,
         right ($duration * $multiplier) $swift-ease-in-out-timing-function;
   }
+
+  // By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
+  // The ink bar has a transition duration applied, which means, that $ngAnimate delays the hide process.
+  // To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
+  &.ng-animate {
+    transition: none;
+  }
+
 }
 
 md-nav-extra-content {

src/components/navBar/navBar.spec.js

@@ -33,7 +33,9 @@ describe('mdNavBar', function() {
 
   function createTabs() {
     create(
-        '<md-nav-bar md-selected-nav-item="selectedTabRoute" nav-bar-aria-label="{{ariaLabel}}">' +
+        '<md-nav-bar md-selected-nav-item="selectedTabRoute" ' +
+        '            md-no-ink-bar="noInkBar" ' +
+        '            nav-bar-aria-label="{{ariaLabel}}">' +
         '  <md-nav-item md-nav-href="#1" name="tab1">' +
         '    tab1' +
         '  </md-nav-item>' +
@@ -173,6 +175,21 @@ describe('mdNavBar', function() {
       expect(parseInt(getInkbarEl().style.left))
           .toBeCloseTo(getTab('tab3')[0].offsetLeft, 0.1);
     });
+
+    it('should hide if md-no-ink-bar is enabled', function() {
+      $scope.noInkBar = false;
+      $scope.selectedTabRoute = 'tab1';
+
+      createTabs();
+
+      expect(getInkbarEl().offsetParent).toBeTruthy();
+
+      $scope.$apply('noInkBar = true');
+      expect(getInkbarEl().offsetParent).not.toBeTruthy();
+
+      $scope.$apply('noInkBar = false');
+      expect(getInkbarEl().offsetParent).toBeTruthy();
+    });
   });
 
   describe('a11y', function() {