fix(tab): change to disable attribute

- Switch support to `disable` attribute
- Deprecate support for `disabled`

Closes #2677

Author: Leonard Seymore

src/tabs/docs/demo.html

@@ -11,7 +11,7 @@
 
   <tabset>
     <tab heading="Static title">Static content</tab>
-    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
+    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
       {{tab.content}}
     </tab>
     <tab select="alertMe()">

src/tabs/docs/readme.md

@@ -26,14 +26,15 @@ AngularJS version of the tabs directive.
  	_(Defaults: false)_ :
  	Whether tab is currently selected.
 
- * `disabled` <i class="glyphicon glyphicon-eye-open"></i>
+ * `disable` <i class="glyphicon glyphicon-eye-open"></i>
  	_(Defaults: false)_ :
  	Whether tab is clickable and can be activated.
+ 	Note that this was previously the `disabled` attribute, which is now deprecated.
 
  * `select()`
  	_(Defaults: null)_ :
  	An optional expression called when tab is activated.
 
  * `deselect()`
  	_(Defaults: null)_ :
- 	An optional expression called when tab is deactivated.
+ 	An optional expression called when tab is deactivated.

src/tabs/tabs.js

@@ -182,7 +182,7 @@ angular.module('ui.bootstrap.tabs', [])
   </file>
 </example>
  */
-.directive('tab', ['$parse', function($parse) {
+.directive('tab', ['$parse', '$log', function($parse, $log) {
   return {
     require: '^tabset',
     restrict: 'EA',
@@ -208,7 +208,18 @@ angular.module('ui.bootstrap.tabs', [])
         });
 
         scope.disabled = false;
+        if ( attrs.disable ) {
+          scope.$parent.$watch($parse(attrs.disable), function(value) {
+            scope.disabled = !! value;
+          });
+        }
+
+        // Deprecation support of "disabled" parameter
+        // fix(tab): IE9 disabled attr renders grey text on enabled tab #2677
+        // This code is duplicated from the lines above to make it easy to remove once
+        // the feature has been completely deprecated
         if ( attrs.disabled ) {
+          $log.warn('Use of "disabled" attribute has been deprecated, please use "disable"');
           scope.$parent.$watch($parse(attrs.disabled), function(value) {
             scope.disabled = !! value;
           });

src/tabs/test/tabs.spec.js

@@ -566,23 +566,23 @@ describe('tabs', function() {
     }));
   });
 
-  describe('disabled', function() {
+  describe('disable', function() {
     beforeEach(inject(function($compile, $rootScope) {
       scope = $rootScope.$new();
 
-      function makeTab(disabled) {
+      function makeTab(disable) {
         return {
           active: false,
           select: jasmine.createSpy(),
-          disabled: disabled
+          disable: disable
         };
       }
       scope.tabs = [
         makeTab(false), makeTab(true), makeTab(false), makeTab(true)
       ];
       elm = $compile([
         '<tabset>',
-        '  <tab ng-repeat="t in tabs" active="t.active" select="t.select()" disabled="t.disabled">',
+        '  <tab ng-repeat="t in tabs" active="t.active" select="t.select()" disable="t.disable">',
         '    <tab-heading><b>heading</b> {{index}}</tab-heading>',
         '    content {{$index}}',
         '  </tab>',
@@ -596,7 +596,7 @@ describe('tabs', function() {
       angular.forEach(scope.tabs, function(tab, i) {
         if (activeTab === tab) {
           expect(tab.active).toBe(true);
-          expect(tab.select.calls.count()).toBe( (tab.disabled) ? 0 : 1 );
+          expect(tab.select.calls.count()).toBe( (tab.disable) ? 0 : 1 );
           expect(_titles.eq(i)).toHaveClass('active');
           expect(contents().eq(i).text().trim()).toBe('content ' + i);
           expect(contents().eq(i)).toHaveClass('active');
@@ -617,11 +617,11 @@ describe('tabs', function() {
 
     it('should toggle between states', function() {
       expect(titles().eq(3)).toHaveClass('disabled');
-      scope.$apply('tabs[3].disabled = false');
+      scope.$apply('tabs[3].disable = false');
       expect(titles().eq(3)).not.toHaveClass('disabled');
 
       expect(titles().eq(2)).not.toHaveClass('disabled');
-      scope.$apply('tabs[2].disabled = true');
+      scope.$apply('tabs[2].disable = true');
       expect(titles().eq(2)).toHaveClass('disabled');
     });
   });