feat(material-experimental/mdc-tabs): default to stretched tabs (#23406)

Defaults the MDC tabs to stretch in order to align closer with the spec. A new `stretchTabs` input can be used to opt out.

Fixes #23295.

Author: crisbeto

src/dev-app/mdc-tabs/mdc-tabs-demo.html

@@ -26,8 +26,8 @@ <h2>Themed tabs</h2>
     <mat-tab label="Fourth" disabled>Content 4</mat-tab>
   </mat-tab-group>
 
-  <h2>Stretched tabs</h2>
-  <mat-tab-group mat-stretch-tabs>
+  <h2>Non-Stretched tabs</h2>
+  <mat-tab-group mat-stretch-tabs="false">
     <mat-tab label="First">Content 1</mat-tab>
     <mat-tab label="Second">Content 2</mat-tab>
     <mat-tab label="Third">Content 3</mat-tab>

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

@@ -7,9 +7,8 @@
 .mat-mdc-tab {
   @include tabs-common.tab;
 
-  // Note that we only want to target direct descendant tabs. Also note that
-  // `mat-stretch-tabs` is part of the public API so it should not be changed to `mat-mdc-`.
-  .mat-mdc-tab-group[mat-stretch-tabs] > .mat-mdc-tab-header & {
+  // Note that we only want to target direct descendant tabs.
+  .mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs > .mat-mdc-tab-header & {
     flex-grow: 1;
   }
 }

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

@@ -54,6 +54,7 @@ import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
     'class': 'mat-mdc-tab-group',
     '[class.mat-mdc-tab-group-dynamic-height]': 'dynamicHeight',
     '[class.mat-mdc-tab-group-inverted-header]': 'headerPosition === "below"',
+    '[class.mat-mdc-tab-group-stretch-tabs]': 'stretchTabs',
   },
 })
 export class MatTabGroup extends _MatTabGroupBase {
@@ -72,6 +73,16 @@ export class MatTabGroup extends _MatTabGroupBase {
   }
   private _fitInkBarToContent = false;
 
+  /** Whether tabs should be stretched to fill the header. */
+  @Input('mat-stretch-tabs')
+  get stretchTabs(): boolean {
+    return this._stretchTabs;
+  }
+  set stretchTabs(v: BooleanInput) {
+    this._stretchTabs = coerceBooleanProperty(v);
+  }
+  private _stretchTabs = true;
+
   constructor(
     elementRef: ElementRef,
     changeDetectorRef: ChangeDetectorRef,

src/material-experimental/mdc-tabs/tab-nav-bar/tab-link.scss

@@ -16,9 +16,8 @@
     opacity: 0.4;
   }
 
-  // Note that we only want to target direct descendant tabs. Also note that
-  // `mat-stretch-tabs` is part of the public API so it should not be changed to `mat-mdc-`.
-  .mat-mdc-tab-header[mat-stretch-tabs] & {
+  // Note that we only want to target direct descendant tabs.
+  .mat-mdc-tab-header.mat-mdc-tab-nav-bar-stretch-tabs & {
     flex-grow: 1;
   }
 }

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

@@ -60,6 +60,7 @@ import {takeUntil} from 'rxjs/operators';
     'class': 'mat-mdc-tab-nav-bar mat-mdc-tab-header',
     '[class.mat-mdc-tab-header-pagination-controls-enabled]': '_showPaginationControls',
     '[class.mat-mdc-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
+    '[class.mat-mdc-tab-nav-bar-stretch-tabs]': 'stretchTabs',
     '[class.mat-primary]': 'color !== "warn" && color !== "accent"',
     '[class.mat-accent]': 'color === "accent"',
     '[class.mat-warn]': 'color === "warn"',
@@ -81,6 +82,16 @@ export class MatTabNav extends _MatTabNavBase implements AfterContentInit {
   }
   _fitInkBarToContent = new BehaviorSubject(false);
 
+  /** Whether tabs should be stretched to fill the header. */
+  @Input('mat-stretch-tabs')
+  get stretchTabs(): boolean {
+    return this._stretchTabs;
+  }
+  set stretchTabs(v: BooleanInput) {
+    this._stretchTabs = coerceBooleanProperty(v);
+  }
+  private _stretchTabs = true;
+
   @ContentChildren(forwardRef(() => MatTabLink), {descendants: true}) _items: QueryList<MatTabLink>;
   @ViewChild('tabListContainer', {static: true}) _tabListContainer: ElementRef;
   @ViewChild('tabList', {static: true}) _tabList: ElementRef;