feat(material/progress-spinner): add color to default options (#24356)

closes #24352
angular · Feb 11, 2022 · ca1aaae · ca1aaae
1 parent 68e7bd0
commit ca1aaae
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 1 deletion.
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
@@ -340,6 +340,28 @@ describe('MDC-based MatProgressSpinner', () => {
     expect(progressElement.componentInstance.strokeWidth).toBe(7);
   });
 
+  it('should be able to set a default color', () => {
+    TestBed.resetTestingModule()
+      .configureTestingModule({
+        imports: [MatProgressSpinnerModule],
+        declarations: [BasicProgressSpinner],
+        providers: [
+          {
+            provide: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
+            useValue: {color: 'warn'},
+          },
+        ],
+      })
+      .compileComponents();
+
+    const fixture = TestBed.createComponent(BasicProgressSpinner);
+    fixture.detectChanges();
+
+    const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    expect(progressElement.componentInstance.color).toBe('warn');
+    expect(progressElement.nativeElement.classList).toContain('mat-warn');
+  });
+
   it('should set `aria-valuenow` to the current value in determinate mode', () => {
     const fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode);
     const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;

diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -120,6 +120,10 @@ export class MatProgressSpinner
       animationMode === 'NoopAnimations' && !!defaults && !defaults._forceAnimations;
 
     if (defaults) {
+      if (defaults.color) {
+        this.color = this.defaultColor = defaults.color;
+      }
+
       if (defaults.diameter) {
         this.diameter = defaults.diameter;
       }

diff --git a/src/material/progress-spinner/progress-spinner.spec.ts b/src/material/progress-spinner/progress-spinner.spec.ts
@@ -407,6 +407,28 @@ describe('MatProgressSpinner', () => {
     expect(progressElement.componentInstance.strokeWidth).toBe(7);
   });
 
+  it('should be able to set a default color', () => {
+    TestBed.resetTestingModule()
+      .configureTestingModule({
+        imports: [MatProgressSpinnerModule],
+        declarations: [BasicProgressSpinner],
+        providers: [
+          {
+            provide: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
+            useValue: {color: 'warn'},
+          },
+        ],
+      })
+      .compileComponents();
+
+    const fixture = TestBed.createComponent(BasicProgressSpinner);
+    fixture.detectChanges();
+
+    const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    expect(progressElement.componentInstance.color).toBe('warn');
+    expect(progressElement.nativeElement.classList).toContain('mat-warn');
+  });
+
   it('should set `aria-valuenow` to the current value in determinate mode', () => {
     const fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode);
     const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;

diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts
@@ -24,7 +24,7 @@ import {
   OnDestroy,
   NgZone,
 } from '@angular/core';
-import {CanColor, mixinColor} from '@angular/material/core';
+import {CanColor, mixinColor, ThemePalette} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {Subscription} from 'rxjs';
 
@@ -54,6 +54,8 @@ const _MatProgressSpinnerBase = mixinColor(
 
 /** Default `mat-progress-spinner` options that can be overridden. */
 export interface MatProgressSpinnerDefaultOptions {
+  /** Default color of the spinner. */
+  color?: ThemePalette;
   /** Diameter of the spinner. */
   diameter?: number;
   /** Width of the spinner's stroke. */
@@ -228,6 +230,10 @@ export class MatProgressSpinner
       animationMode === 'NoopAnimations' && !!defaults && !defaults._forceAnimations;
 
     if (defaults) {
+      if (defaults.color) {
+        this.color = this.defaultColor = defaults.color;
+      }
+
       if (defaults.diameter) {
         this.diameter = defaults.diameter;
       }

diff --git a/tools/public_api_guard/material/progress-spinner.md b/tools/public_api_guard/material/progress-spinner.md
@@ -18,6 +18,7 @@ import { NumberInput } from '@angular/cdk/coercion';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
+import { ThemePalette } from '@angular/material/core';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 
 // @public
@@ -57,6 +58,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerBase implements OnIni
 
 // @public
 export interface MatProgressSpinnerDefaultOptions {
+    color?: ThemePalette;
     diameter?: number;
     _forceAnimations?: boolean;
     strokeWidth?: number;