From 4712abfec3d083c74e546014cf808694a5b4f463 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sun, 31 Aug 2025 09:49:19 +0200 Subject: [PATCH] refactor(multiple): remove remaining references to NoopAnimationsModule Cleans up the remaining references to `NoopAnimationsModule` in comments and in tests. --- src/cdk/overlay/BUILD.bazel | 1 - src/cdk/overlay/overlay-directives.spec.ts | 3 +-- src/cdk/overlay/overlay.spec.ts | 15 ++++++++++----- src/material/button-toggle/button-toggle.ts | 2 +- src/material/core/ripple/ripple.md | 2 +- src/material/core/ripple/ripple.ts | 6 +++--- .../expansion/expansion-panel-header.scss | 1 - src/material/progress-spinner/progress-spinner.ts | 4 ++-- src/material/sidenav/drawer.scss | 1 - 9 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/cdk/overlay/BUILD.bazel b/src/cdk/overlay/BUILD.bazel index 4c5f74971043..e4df4e482b74 100644 --- a/src/cdk/overlay/BUILD.bazel +++ b/src/cdk/overlay/BUILD.bazel @@ -68,7 +68,6 @@ ts_project( ":overlay", "//:node_modules/@angular/common", "//:node_modules/@angular/core", - "//:node_modules/@angular/platform-browser", "//:node_modules/rxjs", "//src/cdk/bidi", "//src/cdk/keycodes", diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts index 7db6aa293b4a..22a161ba1889 100644 --- a/src/cdk/overlay/overlay-directives.spec.ts +++ b/src/cdk/overlay/overlay-directives.spec.ts @@ -1,6 +1,5 @@ import {Component, ElementRef, Injector, signal, ViewChild, WritableSignal} from '@angular/core'; import {ComponentFixture, fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing'; -import {By} from '@angular/platform-browser'; import {Subject} from 'rxjs'; import {Direction} from '../bidi'; import {A, ESCAPE} from '../keycodes'; @@ -381,7 +380,7 @@ describe('Overlay directives', () => { }); it('should set the offsetY', () => { - const trigger = fixture.debugElement.query(By.css('button'))!.nativeElement; + const trigger = fixture.nativeElement.querySelector('button'); trigger.style.position = 'absolute'; trigger.style.top = '30px'; trigger.style.height = '20px'; diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts index b33f7514bb91..20fcb3f9d5b1 100644 --- a/src/cdk/overlay/overlay.spec.ts +++ b/src/cdk/overlay/overlay.spec.ts @@ -1,12 +1,13 @@ import {Location} from '@angular/common'; import {SpyLocation} from '@angular/common/testing'; import { + ANIMATION_MODULE_TYPE, Component, ErrorHandler, EventEmitter, Injectable, Injector, - Type, + Provider, ViewChild, ViewContainerRef, WritableSignal, @@ -21,7 +22,6 @@ import { tick, waitForAsync, } from '@angular/core/testing'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Direction, Directionality} from '../bidi'; import {CdkPortal, ComponentPortal, TemplatePortal} from '../portal'; import {dispatchFakeEvent} from '../testing/private'; @@ -47,16 +47,16 @@ describe('Overlay', () => { let dir: WritableSignal; let mockLocation: SpyLocation; - function setup(imports: Type[] = []) { + function setup(providers: Provider[] = []) { dir = signal('ltr'); TestBed.configureTestingModule({ - imports, providers: [ provideFakeDirectionality(dir), { provide: Location, useClass: SpyLocation, }, + ...providers, ], }); @@ -892,7 +892,12 @@ describe('Overlay', () => { it('should set a class on the backdrop when animations are disabled', () => { cleanup(); TestBed.resetTestingModule(); - setup([NoopAnimationsModule]); + setup([ + { + provide: ANIMATION_MODULE_TYPE, + useValue: 'NoopAnimations', + }, + ]); let overlayRef = createOverlayRef(injector, config); overlayRef.attach(componentPortal); diff --git a/src/material/button-toggle/button-toggle.ts b/src/material/button-toggle/button-toggle.ts index 002b8a133b46..d438568875ac 100644 --- a/src/material/button-toggle/button-toggle.ts +++ b/src/material/button-toggle/button-toggle.ts @@ -725,7 +725,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy { // This serves two purposes: // 1. We don't want the animation to fire on the first render for pre-checked toggles so we // delay adding the class until the view is rendered. - // 2. We don't want animation if the `NoopAnimationsModule` is provided. + // 2. We don't want to animate if animations are disabled. if (!this._animationDisabled) { this._elementRef.nativeElement.classList.add('mat-button-toggle-animations-enabled'); } diff --git a/src/material/core/ripple/ripple.md b/src/material/core/ripple/ripple.md index 3985e4c35300..54ab1baa5d36 100644 --- a/src/material/core/ripple/ripple.md +++ b/src/material/core/ripple/ripple.md @@ -118,7 +118,7 @@ const globalRippleConfig: RippleGlobalOptions = { }; ``` -**Note**: Ripples will also have no animation if the `NoopAnimationsModule` is being used. This +**Note**: Ripples will also have no animation if animations are disabled globally. This also means that the durations in the `animation` configuration won't be taken into account. ### Animation behavior diff --git a/src/material/core/ripple/ripple.ts b/src/material/core/ripple/ripple.ts index c5e6c603c2fe..cbc742b05325 100644 --- a/src/material/core/ripple/ripple.ts +++ b/src/material/core/ripple/ripple.ts @@ -34,7 +34,7 @@ export interface RippleGlobalOptions { /** * Default configuration for the animation duration of the ripples. There are two phases with * different durations for the ripples: `enter` and `leave`. The durations will be overwritten - * by the value of `matRippleAnimation` or if the `NoopAnimationsModule` is included. + * by the value of `matRippleAnimation` or if animations are disabled. */ animation?: RippleAnimationConfig; @@ -88,8 +88,8 @@ export class MatRipple implements OnInit, OnDestroy, RippleTarget { /** * Configuration for the ripple animation. Allows modifying the enter and exit animation - * duration of the ripples. The animation durations will be overwritten if the - * `NoopAnimationsModule` is being used. + * duration of the ripples. The animation durations will be overwritten if animations are + * disabled. */ @Input('matRippleAnimation') animation: RippleAnimationConfig; diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss index 8cb8369c4e05..bbf6ef69f864 100644 --- a/src/material/expansion/expansion-panel-header.scss +++ b/src/material/expansion/expansion-panel-header.scss @@ -56,7 +56,6 @@ $fallbacks: m3-expansion.get-tokens(); } } - // If the `NoopAnimationsModule` is used, disable the height transition. &._mat-animation-noopable { transition: none; } diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts index ecec729e465a..d865732af797 100644 --- a/src/material/progress-spinner/progress-spinner.ts +++ b/src/material/progress-spinner/progress-spinner.ts @@ -38,8 +38,8 @@ export interface MatProgressSpinnerDefaultOptions { /** Width of the spinner's stroke. */ strokeWidth?: number; /** - * Whether the animations should be force to be enabled, ignoring if the current environment is - * using NoopAnimationsModule. + * Whether the animations should be force to be enabled, ignoring if the current environment + * disables them. */ _forceAnimations?: boolean; } diff --git a/src/material/sidenav/drawer.scss b/src/material/sidenav/drawer.scss index edb8a720f011..b84d79c8260f 100644 --- a/src/material/sidenav/drawer.scss +++ b/src/material/sidenav/drawer.scss @@ -54,7 +54,6 @@ $fallbacks: m3-sidenav.get-tokens(); z-index: $drawer-backdrop-z-index; } - // Note that the `NoopAnimationsModule` is being handled inside of the component code. &.ng-animate-disabled, .ng-animate-disabled & { .mat-drawer-backdrop,