Skip to content

feat(material-experimental/mdc-form-field): support for disabling animations #18397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 7, 2020
Merged

feat(material-experimental/mdc-form-field): support for disabling animations #18397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions src/material-experimental/mdc-form-field/form-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@
@import 'mdc-text-field-structure-overrides';

// Base styles for MDC notched-outline, MDC floating label and MDC text-field.
@include mdc-notched-outline-core-styles($query: $mat-base-styles-query);
@include mdc-floating-label-core-styles($query: $mat-base-styles-query);
@include mdc-text-field-core-styles($query: $mat-base-styles-query);
@include mdc-notched-outline-core-styles($query: $mat-base-styles-without-animation-query);
@include mdc-floating-label-core-styles($query: $mat-base-styles-without-animation-query);
@include mdc-text-field-core-styles($query: $mat-base-styles-without-animation-query);
@include mdc-line-ripple-core-styles($query: $mat-base-styles-without-animation-query);

// MDC text-field overwrites.
@include _mat-mdc-text-field-textarea-overrides();
Expand Down Expand Up @@ -52,3 +53,12 @@
min-height: $mdc-text-field-height;
box-sizing: border-box;
}

// In order to make it possible for developers to disable animations for form-fields,
// we only activate the animation styles if animations are not explicitly disabled.
.mat-mdc-form-field:not(.mat-form-field-no-animations) {
@include mdc-notched-outline-core-styles($query: animation);
@include mdc-floating-label-core-styles($query: animation);
@include mdc-text-field-core-styles($query: animation);
@include mdc-line-ripple-core-styles($query: animation);
}
9 changes: 2 additions & 7 deletions src/material-experimental/mdc-form-field/form-field.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ const DEFAULT_FLOAT_LABEL: FloatLabelType = 'auto';
'[class.mat-form-field-invalid]': '_control.errorState',
'[class.mat-form-field-disabled]': '_control.disabled',
'[class.mat-form-field-autofilled]': '_control.autofilled',
'[class.mat-form-field-no-animations]': '_animationMode === "NoopAnimations"',
'[class.mat-focused]': '_control.focused',
'[class.mat-accent]': 'color == "accent"',
'[class.mat-warn]': 'color == "warn"',
Expand All @@ -103,7 +104,6 @@ const DEFAULT_FLOAT_LABEL: FloatLabelType = 'auto';
'[class.ng-valid]': '_shouldForward("valid")',
'[class.ng-invalid]': '_shouldForward("invalid")',
'[class.ng-pending]': '_shouldForward("pending")',
'[class._mat-animation-noopable]': '!_animationsEnabled',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
Expand Down Expand Up @@ -175,9 +175,6 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
// Unique id for the internal form field label.
_labelId = `mat-form-field-label-${nextUniqueId++}`;

/** Whether the Angular animations are enabled. */
_animationsEnabled: boolean;

/** State of the mat-hint and mat-error animations. */
_subscriptAnimationState: string = '';

Expand Down Expand Up @@ -260,9 +257,7 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
@Optional() @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS)
private _defaults?: MatFormFieldDefaultOptions,
@Optional() @Inject(MAT_LABEL_GLOBAL_OPTIONS) private _labelOptions?: LabelOptions,
@Optional() @Inject(ANIMATION_MODULE_TYPE) _animationMode?: string) {
this._animationsEnabled = _animationMode !== 'NoopAnimations';

@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
if (_defaults && _defaults.appearance) {
this.appearance = _defaults.appearance;
} else if (_defaults && _defaults.hideRequiredMarker) {
Expand Down
26 changes: 20 additions & 6 deletions src/material-experimental/mdc-input/input.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import {
ShowOnDirtyErrorStateMatcher,
} from '@angular/material/core';
import {By} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
import {MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule} from './index';

describe('MatMdcInput without forms', () => {
Expand Down Expand Up @@ -400,6 +400,15 @@ describe('MatMdcInput without forms', () => {
expect(selectEl.disabled).toBe(true);
}));

it('should add a class to the form-field if animations are disabled', () => {
configureTestingModule(MatInputWithId, {animations: false});
const fixture = TestBed.createComponent(MatInputWithId);
fixture.detectChanges();

const formFieldEl = fixture.nativeElement.querySelector('.mat-mdc-form-field');
expect(formFieldEl.classList).toContain('mat-form-field-no-animations');
});

it('should add a class to the form field if it has a native select', fakeAsync(() => {
const fixture = createComponent(MatInputSelect);
fixture.detectChanges();
Expand Down Expand Up @@ -1139,16 +1148,15 @@ describe('MatFormField default options', () => {

});

function createComponent<T>(component: Type<T>,
providers: Provider[] = [],
imports: any[] = [],
declarations: any[] = []): ComponentFixture<T> {
function configureTestingModule(component: Type<any>, options:
{providers?: Provider[], imports?: any[], declarations?: any[], animations?: boolean} = {}) {
const {providers = [], imports = [], declarations = [], animations = true} = options;
TestBed.configureTestingModule({
imports: [
FormsModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
animations ? BrowserAnimationsModule : NoopAnimationsModule,
PlatformModule,
ReactiveFormsModule,
...imports
Expand All @@ -1163,7 +1171,13 @@ function createComponent<T>(component: Type<T>,
...providers
],
}).compileComponents();
}

function createComponent<T>(component: Type<T>,
providers: Provider[] = [],
imports: any[] = [],
declarations: any[] = []): ComponentFixture<T> {
configureTestingModule(component, {providers, imports, declarations});
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that I intentionally kept the parameters for createComponent untouched. It's out of scope for this PR to refactor how tests create the component.

return TestBed.createComponent<T>(component);
}

Expand Down