From 8364e76bb412bde769529ffa96188daf519c4889 Mon Sep 17 00:00:00 2001
From: Ayman Mahfouz <amahfouz@gmail.com>
Date: Sat, 6 Feb 2016 23:16:59 -0800
Subject: [PATCH] feat(tabs): support optional classes on tab

- Add support for optional classes on each tab

Closes #5430
---
 src/tabs/docs/demo.html    |  8 ++++++++
 src/tabs/docs/readme.md    | 10 ++++++++++
 src/tabs/tabs.js           |  5 +++++
 src/tabs/test/tabs.spec.js | 15 +++++++++++++--
 template/tabs/tab.html     |  2 +-
 5 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html
index 0c4c24d298..e2850b5948 100644
--- a/src/tabs/docs/demo.html
+++ b/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">
diff --git a/src/tabs/docs/readme.md b/src/tabs/docs/readme.md
index 7c542b92bd..689b379563 100644
--- a/src/tabs/docs/readme.md
+++ b/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.
diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index 524cad2714..e7f42805e5 100644
--- a/src/tabs/tabs.js
+++ b/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;
diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js
index f5c92a5eca..8b9c44dbaf 100644
--- a/src/tabs/test/tabs.spec.js
+++ b/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');
diff --git a/template/tabs/tab.html b/template/tabs/tab.html
index 329ba84ca8..886417d42e 100644
--- a/template/tabs/tab.html
+++ b/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>