fix(progress-spinner): default strokeWidth to 10% of the diameter (#7746

)

Currently the default stroke of a spinner is always 10px which doesn't look great on anything that's smaller than the default. These changes switch it to be 10% of the circle's diameter.

src/lib/progress-spinner/progress-spinner.spec.ts

@@ -1,7 +1,7 @@
 import {TestBed, async} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {MatProgressSpinnerModule} from './index';
+import {MatProgressSpinnerModule, MatProgressSpinner} from './index';
 
 
 describe('MatProgressSpinner', () => {
@@ -80,6 +80,16 @@ describe('MatProgressSpinner', () => {
     expect(progressComponent.value).toBe(0);
   });
 
+  it('should default to a stroke width that is 10% of the diameter', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerCustomDiameter);
+    const spinner = fixture.debugElement.query(By.directive(MatProgressSpinner));
+
+    fixture.componentInstance.diameter = 67;
+    fixture.detectChanges();
+
+    expect(spinner.componentInstance.strokeWidth).toBe(6.7);
+  });
+
   it('should allow a custom diameter', () => {
     const fixture = TestBed.createComponent(ProgressSpinnerCustomDiameter);
     const spinner = fixture.debugElement.query(By.css('mat-progress-spinner')).nativeElement;
@@ -97,7 +107,7 @@ describe('MatProgressSpinner', () => {
     expect(parseInt(svgElement.style.height))
         .toBe(32, 'Expected the custom diameter to be applied to the svg element height.');
     expect(svgElement.getAttribute('viewBox'))
-        .toBe('0 0 32 32', 'Expected the custom diameter to be applied to the svg viewBox.');
+        .toBe('0 0 25.2 25.2', 'Expected the custom diameter to be applied to the svg viewBox.');
   });
 
   it('should allow a custom stroke width', () => {

src/lib/progress-spinner/progress-spinner.ts

@@ -21,6 +21,7 @@ import {
 import {CanColor, mixinColor} from '@angular/material/core';
 import {Platform} from '@angular/cdk/platform';
 import {DOCUMENT} from '@angular/common';
+import {coerceNumberProperty} from '@angular/cdk/coercion';
 
 /** Possible mode for a progress spinner. */
 export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
@@ -87,6 +88,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   private readonly _baseSize = 100;
   private readonly _baseStrokeWidth = 10;
   private _fallbackAnimation = false;
+  private _strokeWidth: number;
 
   /** The width and height of the host element. Will grow with stroke width. **/
   _elementSize = this._baseSize;
@@ -112,7 +114,15 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   _diameter = this._baseSize;
 
   /** Stroke width of the progress spinner. */
-  @Input() strokeWidth: number = 10;
+  @Input()
+  get strokeWidth(): number {
+    return this._strokeWidth || this.diameter / 10;
+  }
+
+  set strokeWidth(value: number) {
+    this._strokeWidth = coerceNumberProperty(value);
+  }
+
 
   /** Mode of the progress circle */
   @Input() mode: ProgressSpinnerMode = 'determinate';