feat(tabs): support optional classes on tab

- Add support for optional classes on each tab

Closes #5430

Author: amahfouz

src/tabs/docs/demo.html

@@ -45,6 +45,14 @@
 
   <hr />
 
+  Tabbed pills with CSS classes
+  <uib-tabset type="pills">
+    <uib-tab heading="Default Size">Tab 1 content</uib-tab>
+    <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>
+  </uib-tabset>
+
+  <hr />
+
   Tabs using nested forms:
   <form name="outerForm" class="tab-form-demo">
     <uib-tabset active="activeForm">

src/tabs/docs/readme.md

@@ -27,6 +27,16 @@ AngularJS version of the tabs directive.
 
 ### uib-tab settings
 
+* `active`
+  <small class="badge">$</small>
+  <i class="glyphicon glyphicon-eye-open"></i>
+  _(Default: `false`)_ -
+  Whether tab is currently selected.
+
+* `classes`
+  <small class="badge">$</small> -
+   An optional string of space-separated CSS classes.
+
 * `deselect()`
   <small class="badge">$</small> -
   An optional expression called when tab is deactivated.

src/tabs/tabs.js

@@ -119,6 +119,7 @@ angular.module('ui.bootstrap.tabs', [])
     scope: {
       heading: '@',
       index: '=?',
+      classes: '@?',
       onSelect: '&select', //This callback is called in contentHeadingTransclude
                           //once it inserts the tab's content into the dom
       onDeselect: '&deselect'
@@ -143,6 +144,10 @@ angular.module('ui.bootstrap.tabs', [])
         }
       }
 
+      if (angular.isUndefined(attrs.classes)) {
+        scope.classes = '';
+      }
+
       scope.select = function() {
         if (!scope.disabled) {
           var index;

src/tabs/test/tabs.spec.js

@@ -34,16 +34,18 @@ describe('tabs', function() {
       scope.first = '1';
       scope.second = '2';
       scope.active = 1;
+      scope.firstClass = 'first-class';
+      scope.secondClass = 'second-class-1 second-class-2';
       scope.selectFirst = jasmine.createSpy();
       scope.selectSecond = jasmine.createSpy();
       scope.deselectFirst = jasmine.createSpy();
       scope.deselectSecond = jasmine.createSpy();
       elm = $compile([
         '<uib-tabset class="hello" data-pizza="pepperoni" active="active">',
-        '  <uib-tab index="1" heading="First Tab {{first}}" select="selectFirst()" deselect="deselectFirst()">',
+        '  <uib-tab index="1" heading="First Tab {{first}}" classes="{{firstClass}}" select="selectFirst()" deselect="deselectFirst()">',
         '    first content is {{first}}',
         '  </uib-tab>',
-        '  <uib-tab index="2" select="selectSecond()" deselect="deselectSecond()">',
+        '  <uib-tab index="2" classes="{{secondClass}}" select="selectSecond()" deselect="deselectSecond()">',
         '    <uib-tab-heading><b>Second</b> Tab {{second}}</uib-tab-heading>',
         '    second content is {{second}}',
         '  </uib-tab>',
@@ -77,6 +79,15 @@ describe('tabs', function() {
       expect(scope.active).toBe(1);
     });
 
+    it('should set optional classes on each tab', function() {
+      expect(titles().eq(0)).toHaveClass(scope.firstClass);
+
+      var secondClassArr = scope.secondClass.split(' ');
+      secondClassArr.forEach(function(clazz) {
+        expect(titles().eq(1)).toHaveClass(clazz);
+      });
+    });
+
     it('should change active on click', function() {
       titles().eq(1).find('> a').click();
       expect(contents().eq(1)).toHaveClass('active');

template/tabs/tab.html

@@ -1,3 +1,3 @@
-<li ng-class="{active: active, disabled: disabled}" class="uib-tab nav-item">
+<li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item">
   <a href ng-click="select()" class="nav-link" uib-tab-heading-transclude>{{heading}}</a>
 </li>