feat(stepper): add theming support (#20424)

Adds `color` inputs to `mat-step`, `mat-vertical-stepper` and `mat-horizontal-stepper` so that their color can be changed from the default `primary`.

Fixes #20416.

Author: crisbeto

src/cdk/stepper/step-header.ts

@@ -17,7 +17,7 @@ import {FocusableOption} from '@angular/cdk/a11y';
   },
 })
 export class CdkStepHeader implements FocusableOption {
-  constructor(protected _elementRef: ElementRef<HTMLElement>) {}
+  constructor(public _elementRef: ElementRef<HTMLElement>) {}
 
   /** Focuses the step header. */
   focus() {

src/dev-app/stepper/BUILD.bazel

@@ -9,8 +9,10 @@ ng_module(
     deps = [
         "//src/material/button",
         "//src/material/checkbox",
+        "//src/material/core",
         "//src/material/form-field",
         "//src/material/input",
+        "//src/material/select",
         "//src/material/stepper",
         "@npm//@angular/forms",
         "@npm//@angular/router",

src/dev-app/stepper/stepper-demo-module.ts

@@ -14,6 +14,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
 import {MatStepperModule} from '@angular/material/stepper';
+import {MatSelectModule} from '@angular/material/select';
 import {RouterModule} from '@angular/router';
 import {StepperDemo} from './stepper-demo';
 
@@ -26,6 +27,7 @@ import {StepperDemo} from './stepper-demo';
     MatFormFieldModule,
     MatInputModule,
     MatStepperModule,
+    MatSelectModule,
     ReactiveFormsModule,
     RouterModule.forChild([{path: '', component: StepperDemo}]),
   ],

src/dev-app/stepper/stepper-demo.html

@@ -1,15 +1,27 @@
-<mat-checkbox [(ngModel)]="isNonLinear">Disable linear mode</mat-checkbox>
-<mat-checkbox [(ngModel)]="disableRipple">Disable header ripple</mat-checkbox>
+<p>
+  <mat-checkbox [(ngModel)]="isNonLinear">Disable linear mode</mat-checkbox>
+</p>
+<p>
+  <mat-checkbox [(ngModel)]="disableRipple">Disable header ripple</mat-checkbox>
+</p>
 <p>
   <button mat-stroked-button (click)="showLabelBottom = !showLabelBottom">
     Toggle label position
   </button>
 </p>
+<p>
+  <mat-form-field>
+    <mat-label>Theme</mat-label>
+    <mat-select [(ngModel)]="theme">
+      <mat-option *ngFor="let theme of availableThemes" [value]="theme.value">{{theme.name}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+</p>
 
 <h3>Linear Vertical Stepper Demo using a single form</h3>
 <form [formGroup]="formGroup">
   <mat-vertical-stepper #linearVerticalStepper="matVerticalStepper" formArrayName="formArray"
-                        [linear]="!isNonLinear" [disableRipple]="disableRipple">
+                        [linear]="!isNonLinear" [disableRipple]="disableRipple" [color]="theme">
     <mat-step formGroupName="0" [stepControl]="formArray?.get([0]) === null ? undefined! : formArray?.get([0])!">
       <ng-template matStepLabel>Fill out your name</ng-template>
       <mat-form-field>
@@ -58,7 +70,8 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
 <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
 <mat-horizontal-stepper #linearHorizontalStepper="matHorizontalStepper" [linear]="!isNonLinear"
                         [disableRipple]="disableRipple"
-                        [labelPosition]="showLabelBottom ? 'bottom' : 'end'">
+                        [labelPosition]="showLabelBottom ? 'bottom' : 'end'"
+                        [color]="theme">
   <mat-step [stepControl]="nameFormGroup">
     <form [formGroup]="nameFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
@@ -107,7 +120,7 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
 
 <h3>Vertical Stepper Demo</h3>
 <mat-checkbox [(ngModel)]="isNonEditable">Make steps non-editable</mat-checkbox>
-<mat-vertical-stepper>
+<mat-vertical-stepper [color]="theme">
   <mat-step [editable]="!isNonEditable">
     <ng-template matStepLabel>Fill out your name</ng-template>
     <mat-form-field>
@@ -162,7 +175,7 @@ <h3>Vertical Stepper Demo</h3>
 </mat-vertical-stepper>
 
 <h3>Horizontal Stepper Demo with Text Label</h3>
-<mat-horizontal-stepper>
+<mat-horizontal-stepper [color]="theme">
   <mat-step label="Fill out your name">
     <mat-form-field>
       <mat-label>First name</mat-label>
@@ -209,7 +222,7 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
 </mat-horizontal-stepper>
 
 <h3>Horizontal Stepper Demo with Templated Label</h3>
-<mat-horizontal-stepper>
+<mat-horizontal-stepper [color]="theme">
   <mat-step *ngFor="let step of steps">
     <ng-template matStepLabel>{{step.label}}</ng-template>
     <mat-form-field>
@@ -224,7 +237,7 @@ <h3>Horizontal Stepper Demo with Templated Label</h3>
 </mat-horizontal-stepper>
 
 <h3>Stepper with autosize textarea</h3>
-<mat-horizontal-stepper>
+<mat-horizontal-stepper [color]="theme">
   <mat-step label="Step 1">
     <mat-form-field>
       <mat-label>Autosize textarea</mat-label>

src/dev-app/stepper/stepper-demo.ts

@@ -7,6 +7,7 @@
  */
 
 import {Component, OnInit} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
 import {AbstractControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 
@@ -31,6 +32,14 @@ export class StepperDemo implements OnInit {
     {label: 'You are now done', content: 'Finished!'}
   ];
 
+  availableThemes: {value: ThemePalette, name: string}[] = [
+    {value: 'primary', name: 'Primary'},
+    {value: 'accent', name: 'Accent'},
+    {value: 'warn', name: 'Warn'}
+  ];
+
+  theme = this.availableThemes[0].value;
+
   /** Returns a FormArray with the name 'formArray'. */
   get formArray(): AbstractControl | null { return this.formGroup.get('formArray'); }
 

src/material/stepper/_stepper-theme.scss

@@ -10,6 +10,7 @@
   $foreground: map-get($config, foreground);
   $background: map-get($config, background);
   $primary: map-get($config, primary);
+  $accent: map-get($config, accent);
   $warn: map-get($config, warn);
 
   .mat-step-header {
@@ -49,6 +50,32 @@
       color: mat-color($primary, default-contrast);
     }
 
+    &.mat-accent {
+      .mat-step-icon {
+        color: mat-color($accent, default-contrast);
+      }
+
+      .mat-step-icon-selected,
+      .mat-step-icon-state-done,
+      .mat-step-icon-state-edit {
+        background-color: mat-color($accent);
+        color: mat-color($accent, default-contrast);
+      }
+    }
+
+    &.mat-warn {
+      .mat-step-icon {
+        color: mat-color($warn, default-contrast);
+      }
+
+      .mat-step-icon-selected,
+      .mat-step-icon-state-done,
+      .mat-step-icon-state-edit {
+        background-color: mat-color($warn);
+        color: mat-color($warn, default-contrast);
+      }
+    }
+
     .mat-step-icon-state-error {
       background-color: transparent;
       color: mat-color($warn, text);
@@ -118,7 +145,7 @@
     }
 
     .mat-stepper-label-position-bottom .mat-horizontal-stepper-header,
-    .mat-vertical-stepper-header, {
+    .mat-vertical-stepper-header {
       padding: $vertical-padding $mat-stepper-side-gap;
     }
 

src/material/stepper/step-header.ts

@@ -23,20 +23,34 @@ import {MatStepLabel} from './step-label';
 import {MatStepperIntl} from './stepper-intl';
 import {MatStepperIconContext} from './stepper-icon';
 import {CdkStepHeader, StepState} from '@angular/cdk/stepper';
+import {CanColorCtor, mixinColor, CanColor} from '@angular/material/core';
 
 
+// Boilerplate for applying mixins to MatStepHeader.
+/** @docs-private */
+class MatStepHeaderBase extends CdkStepHeader {
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
+  }
+}
+
+const _MatStepHeaderMixinBase: CanColorCtor & typeof MatStepHeaderBase =
+    mixinColor(MatStepHeaderBase, 'primary');
+
 @Component({
   selector: 'mat-step-header',
   templateUrl: 'step-header.html',
   styleUrls: ['step-header.css'],
+  inputs: ['color'],
   host: {
     'class': 'mat-step-header mat-focus-indicator',
     'role': 'tab',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDestroy {
+export class MatStepHeader extends _MatStepHeaderMixinBase implements AfterViewInit, OnDestroy,
+  CanColor {
   private _intlSubscription: Subscription;
 
   /** State of the given step. */

src/material/stepper/stepper-horizontal.html

@@ -19,7 +19,8 @@
                      [optional]="step.optional"
                      [errorMessage]="step.errorMessage"
                      [iconOverrides]="_iconOverrides"
-                     [disableRipple]="disableRipple">
+                     [disableRipple]="disableRipple"
+                     [color]="step.color || color">
     </mat-step-header>
     <div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>
   </ng-container>

src/material/stepper/stepper-vertical.html

@@ -18,7 +18,8 @@
                    [optional]="step.optional"
                    [errorMessage]="step.errorMessage"
                    [iconOverrides]="_iconOverrides"
-                   [disableRipple]="disableRipple">
+                   [disableRipple]="disableRipple"
+                   [color]="step.color || color">
   </mat-step-header>
 
   <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">

src/material/stepper/stepper.spec.ts

@@ -41,7 +41,7 @@ import {
   Validators,
   FormBuilder
 } from '@angular/forms';
-import {MatRipple} from '@angular/material/core';
+import {MatRipple, ThemePalette} from '@angular/material/core';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Observable, Subject} from 'rxjs';
@@ -880,6 +880,43 @@ describe('MatStepper', () => {
 
       expect(headerRipples.every(ripple => ripple.disabled)).toBe(true);
     });
+
+    it('should be able to set the theme for all steps', () => {
+      const fixture = createComponent(SimpleMatVerticalStepperApp);
+      fixture.detectChanges();
+
+      const headers =
+          Array.from<HTMLElement>(fixture.nativeElement.querySelectorAll('.mat-step-header'));
+
+      expect(headers.every(element => element.classList.contains('mat-primary'))).toBe(true);
+      expect(headers.some(element => element.classList.contains('mat-accent'))).toBe(false);
+      expect(headers.some(element => element.classList.contains('mat-warn'))).toBe(false);
+
+      fixture.componentInstance.stepperTheme = 'accent';
+      fixture.detectChanges();
+
+      expect(headers.some(element => element.classList.contains('mat-accent'))).toBe(true);
+      expect(headers.some(element => element.classList.contains('mat-primary'))).toBe(false);
+      expect(headers.some(element => element.classList.contains('mat-warn'))).toBe(false);
+    });
+
+    it('should be able to set the theme for a specific step', () => {
+      const fixture = createComponent(SimpleMatVerticalStepperApp);
+      fixture.detectChanges();
+
+      const headers =
+          Array.from<HTMLElement>(fixture.nativeElement.querySelectorAll('.mat-step-header'));
+
+      expect(headers.every(element => element.classList.contains('mat-primary'))).toBe(true);
+
+      fixture.componentInstance.secondStepTheme = 'accent';
+      fixture.detectChanges();
+
+      expect(headers[0].classList.contains('mat-primary')).toBe(true);
+      expect(headers[1].classList.contains('mat-primary')).toBe(false);
+      expect(headers[2].classList.contains('mat-primary')).toBe(true);
+      expect(headers[1].classList.contains('mat-accent')).toBe(true);
+    });
   });
 
   describe('horizontal stepper', () => {
@@ -937,6 +974,43 @@ describe('MatStepper', () => {
 
       expect(headerRipples.every(ripple => ripple.disabled)).toBe(true);
     });
+
+    it('should be able to set the theme for all steps', () => {
+      const fixture = createComponent(SimpleMatHorizontalStepperApp);
+      fixture.detectChanges();
+
+      const headers =
+          Array.from<HTMLElement>(fixture.nativeElement.querySelectorAll('.mat-step-header'));
+
+      expect(headers.every(element => element.classList.contains('mat-primary'))).toBe(true);
+      expect(headers.some(element => element.classList.contains('mat-accent'))).toBe(false);
+      expect(headers.some(element => element.classList.contains('mat-warn'))).toBe(false);
+
+      fixture.componentInstance.stepperTheme = 'accent';
+      fixture.detectChanges();
+
+      expect(headers.some(element => element.classList.contains('mat-accent'))).toBe(true);
+      expect(headers.some(element => element.classList.contains('mat-primary'))).toBe(false);
+      expect(headers.some(element => element.classList.contains('mat-warn'))).toBe(false);
+    });
+
+    it('should be able to set the theme for a specific step', () => {
+      const fixture = createComponent(SimpleMatHorizontalStepperApp);
+      fixture.detectChanges();
+
+      const headers =
+          Array.from<HTMLElement>(fixture.nativeElement.querySelectorAll('.mat-step-header'));
+
+      expect(headers.every(element => element.classList.contains('mat-primary'))).toBe(true);
+
+      fixture.componentInstance.secondStepTheme = 'accent';
+      fixture.detectChanges();
+
+      expect(headers[0].classList.contains('mat-primary')).toBe(true);
+      expect(headers[1].classList.contains('mat-primary')).toBe(false);
+      expect(headers[2].classList.contains('mat-primary')).toBe(true);
+      expect(headers[1].classList.contains('mat-accent')).toBe(true);
+    });
   });
 
   describe('linear stepper with valid step', () => {
@@ -1395,7 +1469,7 @@ class MatHorizontalStepperWithErrorsApp implements OnInit {
 
 @Component({
   template: `
-    <mat-horizontal-stepper [disableRipple]="disableRipple">
+    <mat-horizontal-stepper [disableRipple]="disableRipple" [color]="stepperTheme">
       <mat-step>
         <ng-template matStepLabel>Step 1</ng-template>
         Content 1
@@ -1404,7 +1478,7 @@ class MatHorizontalStepperWithErrorsApp implements OnInit {
           <button mat-button matStepperNext>Next</button>
         </div>
       </mat-step>
-      <mat-step>
+      <mat-step [color]="secondStepTheme">
         <ng-template matStepLabel>Step 2</ng-template>
         Content 2
         <div>
@@ -1425,11 +1499,13 @@ class MatHorizontalStepperWithErrorsApp implements OnInit {
 class SimpleMatHorizontalStepperApp {
   inputLabel = 'Step 3';
   disableRipple = false;
+  stepperTheme: ThemePalette;
+  secondStepTheme: ThemePalette;
 }
 
 @Component({
   template: `
-    <mat-vertical-stepper [disableRipple]="disableRipple">
+    <mat-vertical-stepper [disableRipple]="disableRipple" [color]="stepperTheme">
       <mat-step>
         <ng-template matStepLabel>Step 1</ng-template>
         Content 1
@@ -1438,7 +1514,7 @@ class SimpleMatHorizontalStepperApp {
           <button mat-button matStepperNext>Next</button>
         </div>
       </mat-step>
-      <mat-step *ngIf="showStepTwo">
+      <mat-step *ngIf="showStepTwo" [color]="secondStepTheme">
         <ng-template matStepLabel>Step 2</ng-template>
         Content 2
         <div>
@@ -1460,6 +1536,8 @@ class SimpleMatVerticalStepperApp {
   inputLabel = 'Step 3';
   showStepTwo = true;
   disableRipple = false;
+  stepperTheme: ThemePalette;
+  secondStepTheme: ThemePalette;
 }
 
 @Component({