feat(material/tabs): label & body classes

closes #23685, #9290, #15997

Author: lekhmanrus

src/material-experimental/mdc-tabs/tab-group.html

@@ -15,10 +15,11 @@
        [attr.aria-posinset]="i + 1"
        [attr.aria-setsize]="_tabs.length"
        [attr.aria-controls]="_getTabContentId(i)"
-       [attr.aria-selected]="selectedIndex == i"
+       [attr.aria-selected]="selectedIndex === i"
        [attr.aria-label]="tab.ariaLabel || null"
        [attr.aria-labelledby]="(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null"
-       [class.mdc-tab--active]="selectedIndex == i"
+       [class.mdc-tab--active]="selectedIndex === i"
+       [ngClass]="tab.labelClassList"
        [disabled]="tab.disabled"
        [fitInkBarToContent]="fitInkBarToContent"
        (click)="_handleClick(tab, tabHeader, i)"
@@ -36,12 +37,12 @@
     <span class="mdc-tab__content">
       <span class="mdc-tab__text-label">
         <!-- If there is a label template, use it. -->
-        <ng-template [ngIf]="tab.templateLabel">
+        <ng-template [ngIf]="tab.templateLabel" [ngIfElse]="tabTextLabel">
           <ng-template [cdkPortalOutlet]="tab.templateLabel"></ng-template>
         </ng-template>
 
         <!-- If there is not a label template, fall back to the text label. -->
-        <ng-template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</ng-template>
+        <ng-template #tabTextLabel>{{tab.textLabel}}</ng-template>
       </span>
     </span>
   </div>
@@ -52,16 +53,17 @@
   [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
   #tabBodyWrapper>
   <mat-tab-body role="tabpanel"
-               *ngFor="let tab of _tabs; let i = index"
-               [id]="_getTabContentId(i)"
-               [attr.tabindex]="(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null"
-               [attr.aria-labelledby]="_getTabLabelId(i)"
-               [class.mat-mdc-tab-body-active]="selectedIndex === i"
-               [content]="tab.content!"
-               [position]="tab.position!"
-               [origin]="tab.origin"
-               [animationDuration]="animationDuration"
-               (_onCentered)="_removeTabBodyWrapperHeight()"
-               (_onCentering)="_setTabBodyWrapperHeight($event)">
+                *ngFor="let tab of _tabs; let i = index"
+                [id]="_getTabContentId(i)"
+                [attr.tabindex]="(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null"
+                [attr.aria-labelledby]="_getTabLabelId(i)"
+                [class.mat-mdc-tab-body-active]="selectedIndex === i"
+                [ngClass]="tab.bodyClassList"
+                [content]="tab.content!"
+                [position]="tab.position!"
+                [origin]="tab.origin"
+                [animationDuration]="animationDuration"
+                (_onCentered)="_removeTabBodyWrapperHeight()"
+                (_onCentering)="_setTabBodyWrapperHeight($event)">
   </mat-tab-body>
 </div>

src/material-experimental/mdc-tabs/tab-group.spec.ts

@@ -1,6 +1,6 @@
 import {LEFT_ARROW} from '@angular/cdk/keycodes';
 import {dispatchFakeEvent, dispatchKeyboardEvent} from '../../cdk/testing/private';
-import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {Component, DebugElement, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {
   waitForAsync,
   ComponentFixture,
@@ -41,6 +41,7 @@ describe('MDC-based MatTabGroup', () => {
         TabGroupWithIndirectDescendantTabs,
         TabGroupWithSpaceAbove,
         NestedTabGroupWithLabel,
+        TabsWithClassesTestApp,
       ],
     });
 
@@ -364,7 +365,6 @@ describe('MDC-based MatTabGroup', () => {
 
       expect(contentElements.map(e => e.getAttribute('tabindex'))).toEqual(['1', null, null]);
     });
-
   });
 
   describe('aria labelling', () => {
@@ -404,11 +404,16 @@ describe('MDC-based MatTabGroup', () => {
 
       expect(tab.getAttribute('aria-label')).toBe('Fruit');
       expect(tab.hasAttribute('aria-labelledby')).toBe(false);
+
+      fixture.componentInstance.ariaLabel = 'Veggie';
+      fixture.detectChanges();
+      expect(tab.getAttribute('aria-label')).toBe('Veggie');
     });
   });
 
   describe('disable tabs', () => {
     let fixture: ComponentFixture<DisabledTabsTestApp>;
+
     beforeEach(() => {
       fixture = TestBed.createComponent(DisabledTabsTestApp);
     });
@@ -482,7 +487,6 @@ describe('MDC-based MatTabGroup', () => {
         expect(tabs[0].origin).toBeLessThan(0);
     }));
 
-
     it('should update selected index if the last tab removed while selected', fakeAsync(() => {
       const component: MatTabGroup =
           fixture.debugElement.query(By.css('mat-tab-group')).componentInstance;
@@ -500,7 +504,6 @@ describe('MDC-based MatTabGroup', () => {
       expect(component.selectedIndex).toBe(numberOfTabs - 2);
     }));
 
-
     it('should maintain the selected tab if a new tab is added', () => {
       fixture.detectChanges();
       const component: MatTabGroup =
@@ -517,7 +520,6 @@ describe('MDC-based MatTabGroup', () => {
       expect(component._tabs.toArray()[2].isActive).toBe(true);
     });
 
-
     it('should maintain the selected tab if a tab is removed', () => {
       // Select the second tab.
       fixture.componentInstance.selectedIndex = 1;
@@ -565,7 +567,6 @@ describe('MDC-based MatTabGroup', () => {
 
       expect(fixture.componentInstance.handleSelection).not.toHaveBeenCalled();
     }));
-
   });
 
   describe('async tabs', () => {
@@ -756,6 +757,100 @@ describe('MDC-based MatTabGroup', () => {
     }));
   });
 
+  describe('tabs with custom css classes', () => {
+    let fixture: ComponentFixture<TabsWithClassesTestApp>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TabsWithClassesTestApp);
+    });
+
+    it('should apply label classes', () => {
+      fixture.detectChanges();
+
+      const labelElements = fixture.debugElement
+        .queryAll(By.css('.mdc-tab.hardcoded.label.classes'));
+      expect(labelElements.length).toBe(1);
+    });
+
+    it('should apply body classes', () => {
+      fixture.detectChanges();
+
+      const bodyElements = fixture.debugElement
+        .queryAll(By.css('mat-tab-body.hardcoded.body.classes'));
+      expect(bodyElements.length).toBe(1);
+    });
+
+    it('should set classes as strings dynamically', () => {
+      fixture.detectChanges();
+      let labelElements: DebugElement[];
+      let bodyElements: DebugElement[];
+
+      labelElements = fixture.debugElement
+        .queryAll(By.css('.mdc-tab.custom-label-class.one-more-label-class'));
+      bodyElements = fixture.debugElement
+        .queryAll(By.css('mat-tab-body.custom-body-class.one-more-body-class'));
+      expect(labelElements.length).toBe(0);
+      expect(bodyElements.length).toBe(0);
+
+      fixture.componentInstance.labelClassList = 'custom-label-class one-more-label-class';
+      fixture.componentInstance.bodyClassList = 'custom-body-class one-more-body-class';
+      fixture.detectChanges();
+
+      labelElements = fixture.debugElement
+        .queryAll(By.css('.mdc-tab.custom-label-class.one-more-label-class'));
+      bodyElements = fixture.debugElement
+        .queryAll(By.css('mat-tab-body.custom-body-class.one-more-body-class'));
+      expect(labelElements.length).toBe(2);
+      expect(bodyElements.length).toBe(2);
+
+      delete fixture.componentInstance.labelClassList;
+      delete fixture.componentInstance.bodyClassList;
+      fixture.detectChanges();
+
+      labelElements = fixture.debugElement
+        .queryAll(By.css('.mdc-tab.custom-label-class.one-more-label-class'));
+      bodyElements = fixture.debugElement
+        .queryAll(By.css('mat-tab-body.custom-body-class.one-more-body-class'));
+      expect(labelElements.length).toBe(0);
+      expect(bodyElements.length).toBe(0);
+    });
+
+    it('should set classes as strings array dynamically', () => {
+      fixture.detectChanges();
+      let labelElements: DebugElement[];
+      let bodyElements: DebugElement[];
+
+      labelElements = fixture.debugElement
+        .queryAll(By.css('.mdc-tab.custom-label-class.one-more-label-class'));
+      bodyElements = fixture.debugElement
+        .queryAll(By.css('mat-tab-body.custom-body-class.one-more-body-class'));
+      expect(labelElements.length).toBe(0);
+      expect(bodyElements.length).toBe(0);
+
+      fixture.componentInstance.labelClassList = ['custom-label-class', 'one-more-label-class'];
+      fixture.componentInstance.bodyClassList = ['custom-body-class', 'one-more-body-class'];
+      fixture.detectChanges();
+
+      labelElements = fixture.debugElement
+        .queryAll(By.css('.mdc-tab.custom-label-class.one-more-label-class'));
+      bodyElements = fixture.debugElement
+        .queryAll(By.css('mat-tab-body.custom-body-class.one-more-body-class'));
+      expect(labelElements.length).toBe(2);
+      expect(bodyElements.length).toBe(2);
+
+      delete fixture.componentInstance.labelClassList;
+      delete fixture.componentInstance.bodyClassList;
+      fixture.detectChanges();
+
+      labelElements = fixture.debugElement
+        .queryAll(By.css('.mdc-tab.custom-label-class.one-more-label-class'));
+      bodyElements = fixture.debugElement
+        .queryAll(By.css('mat-tab-body.custom-body-class.one-more-body-class'));
+      expect(labelElements.length).toBe(0);
+      expect(bodyElements.length).toBe(0);
+    });
+  });
+
   /**
    * Checks that the `selectedIndex` has been updated; checks that the label and body have their
    * respective `active` classes
@@ -935,6 +1030,7 @@ class SimpleTabsTestApp {
   animationDone() { }
 }
 
+
 @Component({
   template: `
     <mat-tab-group class="tab-group"
@@ -965,6 +1061,7 @@ class SimpleDynamicTabsTestApp {
   }
 }
 
+
 @Component({
   template: `
     <mat-tab-group class="tab-group" [(selectedIndex)]="selectedIndex">
@@ -990,8 +1087,8 @@ class BindedTabsTestApp {
   }
 }
 
+
 @Component({
-  selector: 'test-app',
   template: `
     <mat-tab-group class="tab-group">
       <mat-tab>
@@ -1014,6 +1111,7 @@ class DisabledTabsTestApp {
   isDisabled = false;
 }
 
+
 @Component({
   template: `
     <mat-tab-group class="tab-group">
@@ -1059,7 +1157,6 @@ class TabGroupWithSimpleApi {
 
 
 @Component({
-  selector: 'nested-tabs',
   template: `
     <mat-tab-group>
       <mat-tab label="One">Tab one content</mat-tab>
@@ -1077,8 +1174,8 @@ class NestedTabs {
   @ViewChildren(MatTabGroup) groups: QueryList<MatTabGroup>;
 }
 
+
 @Component({
-  selector: 'template-tabs',
   template: `
     <mat-tab-group>
       <mat-tab label="One">
@@ -1091,11 +1188,11 @@ class NestedTabs {
       </mat-tab>
     </mat-tab-group>
   `,
- })
- class TemplateTabs {}
+})
+class TemplateTabs {}
 
 
- @Component({
+@Component({
   template: `
   <mat-tab-group>
     <mat-tab [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"></mat-tab>
@@ -1160,6 +1257,7 @@ class TabGroupWithInkBarFitToContent {
   fitInkBarToContent = true;
 }
 
+
 @Component({
   template: `
     <div style="height: 300px; background-color: aqua">
@@ -1202,3 +1300,31 @@ class TabGroupWithSpaceAbove {
 })
 class NestedTabGroupWithLabel {
 }
+
+
+@Component({
+  template: `
+    <mat-tab-group class="tab-group">
+      <mat-tab label="Tab One">
+        Tab one content
+      </mat-tab>
+      <mat-tab label="Tab Two" [class]="labelClassList">
+        Tab two content
+      </mat-tab>
+      <mat-tab label="Tab Three" [bodyClass]="bodyClassList">
+        Tab three content
+      </mat-tab>
+      <mat-tab label="Tab Four" [class]="labelClassList" [bodyClass]="bodyClassList">
+        Tab four content
+      </mat-tab>
+      <mat-tab label="Tab Five" class="hardcoded label classes" bodyClass="hardcoded body classes">
+        Tab five content
+      </mat-tab>
+    </mat-tab-group>
+  `,
+})
+class TabsWithClassesTestApp {
+  @ViewChildren(MatTab) tabs: QueryList<MatTab>;
+  labelClassList?: string | string[];
+  bodyClassList?: string | string[];
+}

src/material-experimental/mdc-tabs/tab.ts

@@ -12,6 +12,8 @@ import {
   ViewEncapsulation,
   TemplateRef,
   ContentChild,
+  OnChanges,
+  SimpleChanges,
 } from '@angular/core';
 import {MatTab as BaseMatTab, MAT_TAB} from '@angular/material/tabs';
 import {MatTabContent} from './tab-content';
@@ -30,7 +32,7 @@ import {MatTabLabel} from './tab-label';
   exportAs: 'matTab',
   providers: [{provide: MAT_TAB, useExisting: MatTab}]
 })
-export class MatTab extends BaseMatTab {
+export class MatTab extends BaseMatTab implements OnChanges {
   /**
    * Template provided in the tab content that will be used if present, used to enable lazy-loading
    */
@@ -41,4 +43,16 @@ export class MatTab extends BaseMatTab {
   @ContentChild(MatTabLabel)
   override get templateLabel(): MatTabLabel { return this._templateLabel; }
   override set templateLabel(value: MatTabLabel) { this._setTemplateLabelInput(value); }
+
+  override ngOnChanges(changes: SimpleChanges): void {
+    super.ngOnChanges(changes);
+
+    // Triggering ChangeDetectorRef.markForCheck()
+    if (changes.hasOwnProperty('ariaLabel')
+      || changes.hasOwnProperty('ariaLabelledby')
+      || changes.hasOwnProperty('labelClass')
+      || changes.hasOwnProperty('bodyClass')) {
+      this._stateChanges.next();
+    }
+  }
 }