From a6cc98fa6e750ff38b59ab1f2155f3d716b0a007 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 30 Jan 2019 23:00:35 +0100 Subject: [PATCH] feat(stepper): allow disabling ripples of headers (#14972) * Adds a way for developers to disable ripples of the `MatStepHeader`. This is useful because currently developers have no way of specifically disabling ripples for a stepper (only disabling globally is possible) Closes #14940. --- src/dev-app/stepper/stepper-demo.html | 7 +++-- src/dev-app/stepper/stepper-demo.ts | 1 + src/lib/stepper/BUILD.bazel | 1 + src/lib/stepper/step-header.html | 5 ++- src/lib/stepper/step-header.ts | 3 ++ src/lib/stepper/stepper-horizontal.html | 5 +-- src/lib/stepper/stepper-vertical.html | 5 +-- src/lib/stepper/stepper.spec.ts | 41 +++++++++++++++++++++++-- src/lib/stepper/stepper.ts | 3 ++ tools/public_api_guard/lib/stepper.d.ts | 2 ++ 10 files changed, 63 insertions(+), 10 deletions(-) diff --git a/src/dev-app/stepper/stepper-demo.html b/src/dev-app/stepper/stepper-demo.html index 67b2a97237b..d932ec3c1be 100644 --- a/src/dev-app/stepper/stepper-demo.html +++ b/src/dev-app/stepper/stepper-demo.html @@ -1,8 +1,10 @@ Disable linear mode +Disable header ripple

Linear Vertical Stepper Demo using a single form

- + Fill out your name @@ -48,7 +50,8 @@

Linear Horizontal Stepper Demo using a different form for each step

- +
Fill out your name diff --git a/src/dev-app/stepper/stepper-demo.ts b/src/dev-app/stepper/stepper-demo.ts index 4a683982901..e192d42988f 100644 --- a/src/dev-app/stepper/stepper-demo.ts +++ b/src/dev-app/stepper/stepper-demo.ts @@ -19,6 +19,7 @@ export class StepperDemo implements OnInit { formGroup: FormGroup; isNonLinear = false; isNonEditable = false; + disableRipple = false; nameFormGroup: FormGroup; emailFormGroup: FormGroup; diff --git a/src/lib/stepper/BUILD.bazel b/src/lib/stepper/BUILD.bazel index 2ac9807ea7f..2cdec9e12b7 100644 --- a/src/lib/stepper/BUILD.bazel +++ b/src/lib/stepper/BUILD.bazel @@ -62,6 +62,7 @@ ng_test_library( "//src/cdk/testing", "//src/lib/form-field", "//src/lib/input", + "//src/lib/core", ":stepper", ] ) diff --git a/src/lib/stepper/step-header.html b/src/lib/stepper/step-header.html index be0493f18a7..4faa85eb57f 100644 --- a/src/lib/stepper/step-header.html +++ b/src/lib/stepper/step-header.html @@ -1,4 +1,7 @@ -
+
+
- + [iconOverrides]="_iconOverrides" + [disableRipple]="disableRipple">
diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html index 6953b8cfc6f..7d830fd2a7e 100644 --- a/src/lib/stepper/stepper-vertical.html +++ b/src/lib/stepper/stepper-vertical.html @@ -1,5 +1,5 @@
- + [iconOverrides]="_iconOverrides" + [disableRipple]="disableRipple">
diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts index dbb9b1ef34b..09ba8859221 100644 --- a/src/lib/stepper/stepper.spec.ts +++ b/src/lib/stepper/stepper.spec.ts @@ -28,11 +28,12 @@ import { Validators, FormBuilder } from '@angular/forms'; +import {MatRipple} from '@angular/material/core'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Observable, Subject} from 'rxjs'; import {map, take} from 'rxjs/operators'; -import {MatStepperModule} from './index'; +import {MatStepHeader, MatStepperModule} from './index'; import {MatHorizontalStepper, MatStep, MatStepper, MatVerticalStepper} from './stepper'; import {MatStepperNext, MatStepperPrevious} from './stepper-button'; import {MatStepperIntl} from './stepper-intl'; @@ -795,6 +796,22 @@ describe('MatStepper', () => { let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); assertArrowKeyInteractionInRtl(fixture, stepHeaders); }); + + it('should be able to disable ripples', () => { + const fixture = createComponent(SimpleMatVerticalStepperApp); + fixture.detectChanges(); + + const stepHeaders = fixture.debugElement.queryAll(By.directive(MatStepHeader)); + const headerRipples = stepHeaders.map(headerDebugEl => + headerDebugEl.query(By.directive(MatRipple)).injector.get(MatRipple)); + + expect(headerRipples.every(ripple => ripple.disabled)).toBe(false); + + fixture.componentInstance.disableRipple = true; + fixture.detectChanges(); + + expect(headerRipples.every(ripple => ripple.disabled)).toBe(true); + }); }); describe('horizontal stepper', () => { @@ -836,6 +853,22 @@ describe('MatStepper', () => { assertArrowKeyInteractionInRtl(fixture, stepHeaders); }); + + it('should be able to disable ripples', () => { + const fixture = createComponent(SimpleMatHorizontalStepperApp); + fixture.detectChanges(); + + const stepHeaders = fixture.debugElement.queryAll(By.directive(MatStepHeader)); + const headerRipples = stepHeaders.map(headerDebugEl => + headerDebugEl.query(By.directive(MatRipple)).injector.get(MatRipple)); + + expect(headerRipples.every(ripple => ripple.disabled)).toBe(false); + + fixture.componentInstance.disableRipple = true; + fixture.detectChanges(); + + expect(headerRipples.every(ripple => ripple.disabled)).toBe(true); + }); }); describe('linear stepper with valid step', () => { @@ -1200,7 +1233,7 @@ class MatHorizontalStepperWithErrorsApp implements OnInit { @Component({ template: ` - + Step 1 Content 1 @@ -1229,11 +1262,12 @@ class MatHorizontalStepperWithErrorsApp implements OnInit { }) class SimpleMatHorizontalStepperApp { inputLabel = 'Step 3'; + disableRipple = false; } @Component({ template: ` - + Step 1 Content 1 @@ -1263,6 +1297,7 @@ class SimpleMatHorizontalStepperApp { class SimpleMatVerticalStepperApp { inputLabel = 'Step 3'; showStepTwo = true; + disableRipple = false; } @Component({ diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index ebde9063562..bd3d69a31ec 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -97,6 +97,9 @@ export class MatStepper extends CdkStepper implements AfterContentInit { /** Event emitted when the current step is done transitioning in. */ @Output() readonly animationDone: EventEmitter = new EventEmitter(); + /** Whether ripples should be disabled for the step headers. */ + @Input() disableRipple: boolean; + /** Consumer-specified template-refs to be used to override the header icons. */ _iconOverrides: {[key: string]: TemplateRef} = {}; diff --git a/tools/public_api_guard/lib/stepper.d.ts b/tools/public_api_guard/lib/stepper.d.ts index cd9f4d2255e..a96b7f9186a 100644 --- a/tools/public_api_guard/lib/stepper.d.ts +++ b/tools/public_api_guard/lib/stepper.d.ts @@ -19,6 +19,7 @@ export declare class MatStep extends CdkStep implements ErrorStateMatcher { export declare class MatStepHeader extends CdkStepHeader implements OnDestroy { _intl: MatStepperIntl; active: boolean; + disableRipple: boolean; errorMessage: string; iconOverrides: { [key: string]: TemplateRef; @@ -49,6 +50,7 @@ export declare class MatStepper extends CdkStepper implements AfterContentInit { _stepHeader: QueryList; _steps: QueryList; readonly animationDone: EventEmitter; + disableRipple: boolean; ngAfterContentInit(): void; }