diff --git a/src/lib/progress-spinner/progress-spinner.spec.ts b/src/lib/progress-spinner/progress-spinner.spec.ts index 03c6a9358bc..5aff4b50992 100644 --- a/src/lib/progress-spinner/progress-spinner.spec.ts +++ b/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', () => { diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts index bcc55cf3602..f2c55071e1b 100644 --- a/src/lib/progress-spinner/progress-spinner.ts +++ b/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';