From c00cd1c25ca213bcc638a082979fe6b44f5432c1 Mon Sep 17 00:00:00 2001
From: Amy Sorto <8575252+amysorto@users.noreply.github.com>
Date: Wed, 26 Jun 2024 14:31:38 -0400
Subject: [PATCH] docs(material/tabs): Update description and examples for
 color input description on API page (#29336)

---
 .../material/tabs/index.ts                    |  1 -
 .../tab-group-theme-example.css               |  4 ---
 .../tab-group-theme-example.html              | 27 -------------------
 .../tab-group-theme-example.ts                | 15 -----------
 .../tab-nav-bar-basic-example.html            |  5 +---
 .../tab-nav-bar-basic-example.ts              |  6 -----
 src/dev-app/tabs/tabs-demo.html               |  2 --
 src/dev-app/tabs/tabs-demo.ts                 |  2 --
 src/material/tabs/tab-group.ts                | 15 +++++++++--
 src/material/tabs/tab-nav-bar/tab-nav-bar.ts  |  8 +++++-
 10 files changed, 21 insertions(+), 64 deletions(-)
 delete mode 100644 src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.css
 delete mode 100644 src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.html
 delete mode 100644 src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.ts

diff --git a/src/components-examples/material/tabs/index.ts b/src/components-examples/material/tabs/index.ts
index 81390209a1e4..5e64e11dc4e7 100644
--- a/src/components-examples/material/tabs/index.ts
+++ b/src/components-examples/material/tabs/index.ts
@@ -10,7 +10,6 @@ export {TabGroupHeaderBelowExample} from './tab-group-header-below/tab-group-hea
 export {TabGroupLazyLoadedExample} from './tab-group-lazy-loaded/tab-group-lazy-loaded-example';
 export {TabGroupPreserveContentExample} from './tab-group-preserve-content/tab-group-preserve-content-example';
 export {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
-export {TabGroupThemeExample} from './tab-group-theme/tab-group-theme-example';
 export {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
 export {TabGroupPaginatedExample} from './tab-group-paginated/tab-group-paginated-example';
 export {TabGroupInvertedExample} from './tab-group-inverted/tab-group-inverted-example';
diff --git a/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.css b/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.css
deleted file mode 100644
index f54020caf2b7..000000000000
--- a/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.example-button-toggle-label {
-  display: inline-block;
-  margin: 16px;
-}
diff --git a/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.html b/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.html
deleted file mode 100644
index 651c8ae08043..000000000000
--- a/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div>
-  <mat-button-toggle-group #colorToggle="matButtonToggleGroup"
-                           value="primary"
-                           aria-label="Change color">
-    <mat-button-toggle value="primary">Primary</mat-button-toggle>
-    <mat-button-toggle value="accent">Accent</mat-button-toggle>
-    <mat-button-toggle value="warn">Warn</mat-button-toggle>
-  </mat-button-toggle-group>
-  <span class="example-button-toggle-label">Color</span>
-</div>
-
-<div>
-  <mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup"
-                           value="primary"
-                           aria-label="Change color">
-    <mat-button-toggle value="primary">Primary</mat-button-toggle>
-    <mat-button-toggle value="accent">Accent</mat-button-toggle>
-    <mat-button-toggle value="warn">Warn</mat-button-toggle>
-  </mat-button-toggle-group>
-  <span class="example-button-toggle-label">Background Color</span>
-</div>
-
-<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
-  <mat-tab label="First">Content 1</mat-tab>
-  <mat-tab label="Second">Content 2</mat-tab>
-  <mat-tab label="Third">Content 3</mat-tab>
-</mat-tab-group>
diff --git a/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.ts b/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.ts
deleted file mode 100644
index 2aae41a4656f..000000000000
--- a/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import {Component} from '@angular/core';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatButtonToggleModule} from '@angular/material/button-toggle';
-
-/**
- * @title Customizing the theme options on the tab group
- */
-@Component({
-  selector: 'tab-group-theme-example',
-  templateUrl: 'tab-group-theme-example.html',
-  styleUrl: 'tab-group-theme-example.css',
-  standalone: true,
-  imports: [MatButtonToggleModule, MatTabsModule],
-})
-export class TabGroupThemeExample {}
diff --git a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html
index b3f3d959cac8..c6ed16b9e0da 100644
--- a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html
+++ b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html
@@ -1,5 +1,5 @@
 <!-- #docregion mat-tab-nav -->
-<nav mat-tab-nav-bar [backgroundColor]="background" [tabPanel]="tabPanel">
+<nav mat-tab-nav-bar [tabPanel]="tabPanel">
   @for (link of links; track link) {
     <a mat-tab-link
       (click)="activeLink = link"
@@ -10,9 +10,6 @@
 <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
 <!-- #enddocregion mat-tab-nav -->
 
-<button mat-raised-button class="example-action-button" (click)="toggleBackground()">
-  Toggle background
-</button>
 <button mat-raised-button class="example-action-button" (click)="addLink()">
   Add link
 </button>
diff --git a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
index 84a3467c1a98..cd7cc335946a 100644
--- a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
+++ b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {ThemePalette} from '@angular/material/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatTabsModule} from '@angular/material/tabs';
 
@@ -16,11 +15,6 @@ import {MatTabsModule} from '@angular/material/tabs';
 export class TabNavBarBasicExample {
   links = ['First', 'Second', 'Third'];
   activeLink = this.links[0];
-  background: ThemePalette = undefined;
-
-  toggleBackground() {
-    this.background = this.background ? undefined : 'primary';
-  }
 
   addLink() {
     this.links.push(`Link ${this.links.length + 1}`);
diff --git a/src/dev-app/tabs/tabs-demo.html b/src/dev-app/tabs/tabs-demo.html
index 5d77820d1d44..20aed4baf36b 100644
--- a/src/dev-app/tabs/tabs-demo.html
+++ b/src/dev-app/tabs/tabs-demo.html
@@ -16,8 +16,6 @@ <h3>Tab group with lazy loaded content</h3>
 <tab-group-lazy-loaded-example></tab-group-lazy-loaded-example>
 <h3>Tab group stretched</h3>
 <tab-group-stretched-example></tab-group-stretched-example>
-<h3>Tab group theming</h3>
-<tab-group-theme-example></tab-group-theme-example>
 <h3>Tab navigation bar basic</h3>
 <tab-nav-bar-basic-example></tab-nav-bar-basic-example>
 <h3>Paginated Tabs</h3>
diff --git a/src/dev-app/tabs/tabs-demo.ts b/src/dev-app/tabs/tabs-demo.ts
index c663142939db..889509b1f95c 100644
--- a/src/dev-app/tabs/tabs-demo.ts
+++ b/src/dev-app/tabs/tabs-demo.ts
@@ -22,7 +22,6 @@ import {
   TabGroupPaginatedExample,
   TabGroupPreserveContentExample,
   TabGroupStretchedExample,
-  TabGroupThemeExample,
   TabNavBarBasicExample,
 } from '@angular/components-examples/material/tabs';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
@@ -37,7 +36,6 @@ import {MatTabsModule} from '@angular/material/tabs';
     TabGroupInvertedExample,
     TabGroupPaginatedExample,
     TabNavBarBasicExample,
-    TabGroupThemeExample,
     TabGroupStretchedExample,
     TabGroupPreserveContentExample,
     TabGroupLazyLoadedExample,
diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
index 1f2f5fa0a69a..d4c0049566ea 100644
--- a/src/material/tabs/tab-group.ts
+++ b/src/material/tabs/tab-group.ts
@@ -120,7 +120,13 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes
   /** Subscription to changes in the tab labels. */
   private _tabLabelSubscription = Subscription.EMPTY;
 
-  /** Theme color of the tab group. */
+  /**
+   * Theme color of the tab group. This API is supported in M2 themes only, it
+   * has no effect in M3 themes.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.io/guide/theming#using-component-color-variants.
+   */
   @Input()
   color: ThemePalette;
 
@@ -204,7 +210,12 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes
   preserveContent: boolean = false;
 
   /**
-   * Background color of the tab group.
+   * Theme color of the background of the tab group. This API is supported in M2 themes only, it
+   * has no effect in M3 themes.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.io/guide/theming#using-component-color-variants.
+   *
    * @deprecated The background color should be customized through Sass theming APIs.
    * @breaking-change 20.0.0 Remove this input
    */
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
index 614b41a66d84..fe2d2c0b8025 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -112,7 +112,13 @@ export class MatTabNav
   /** Query list of all tab links of the tab navigation. */
   @ContentChildren(forwardRef(() => MatTabLink), {descendants: true}) _items: QueryList<MatTabLink>;
 
-  /** Background color of the tab nav. */
+  /**
+   * Theme color of the background of the tab nav. This API is supported in M2 themes only, it
+   * has no effect in M3 themes.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.io/guide/theming#using-component-color-variants.
+   */
   @Input()
   get backgroundColor(): ThemePalette {
     return this._backgroundColor;