feat(tabs): Custom class names for tabs (#11332)

Author: benedikt-roth

src/components/tabs/demoStaticTabs/index.html

@@ -2,7 +2,7 @@
   <md-content class="md-padding">
     <md-tabs class="md-primary" md-selected="data.selectedIndex"
              md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
-      <md-tab id="tab1">
+      <md-tab id="tab1" md-tab-class="example-selector-tab1">
         <md-tab-label>Item One</md-tab-label>
         <md-tab-body>
           View for Item #1 <br/>

src/components/tabs/js/tabDirective.js

@@ -25,6 +25,7 @@
  * @param {string=} label Optional attribute to specify a simple string as the tab label
  * @param {boolean=} ng-disabled If present and expression evaluates to truthy, disabled tab
  *  selection.
+ * @param {string=} md-tab-class Optional attribute to specify a class that will be applied to the tab's button
  * @param {expression=} md-on-deselect Expression to be evaluated after the tab has been
  *  de-selected.
  * @param {expression=} md-on-select Expression to be evaluated after the tab has been selected.
@@ -35,7 +36,7 @@
  * @usage
  *
  * <hljs lang="html">
- * <md-tab label="My Tab" ng-disabled md-on-select="onSelect()" md-on-deselect="onDeselect()">
+ * <md-tab label="My Tab" md-tab-class="my-content-tab" ng-disabled md-on-select="onSelect()" md-on-deselect="onDeselect()">
  *   <h3>My Tab content</h3>
  * </md-tab>
  *
@@ -89,7 +90,8 @@ function MdTab () {
       active:   '=?mdActive',
       disabled: '=?ngDisabled',
       select:   '&?mdOnSelect',
-      deselect: '&?mdOnDeselect'
+      deselect: '&?mdOnDeselect',
+      tabClass: '@mdTabClass'
     }
   };
 

src/components/tabs/js/tabsDirective.js

@@ -165,7 +165,7 @@ function MdTabs ($$mdSvgRegistry) {
                 'aria-label="{{::$mdTabsCtrl.navigationHint}}">' +
               '<md-tab-item ' +
                   'tabindex="{{ tab.isActive() ? 0 : -1 }}" ' +
-                  'class="md-tab" ' +
+                  'class="md-tab {{::tab.scope.tabClass}}" ' +
                   'ng-repeat="tab in $mdTabsCtrl.tabs" ' +
                   'role="tab" ' +
                   'id="tab-item-{{::tab.id}}" ' +

src/components/tabs/tabs.spec.js

@@ -450,6 +450,16 @@ describe('<md-tabs>', function () {
       expect(tab.find('md-tab-label').text()).toBe('test');
       expect(tab.find('md-tab-body').length).toBe(0);
     });
+    it('should apply tab class on the associated md-tab-item', function () {
+      var template = '\
+        <md-tabs md-selected="selectedTab">\
+          <md-tab label="a" md-tab-class="tester-class"></md-tab>\
+        </md-tabs>';
+      var element  = setup(template);
+      var tab      = element.find('md-tab-item');
+
+      expect(tab[ 0 ].className.indexOf('tester-class')).toBeGreaterThan(-1);
+    });
   });
 
   describe('internal scope', function () {