Skip to content

refactor(material): deprecate MAT_LABEL_GLOBAL_OPTIONS in favor of form-field global defaults #18017

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.

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
Show file tree
Hide file tree
Changes from all commits
Commits
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
19 changes: 16 additions & 3 deletions src/material/core/label/label-options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,27 @@

import {InjectionToken} from '@angular/core';

/** InjectionToken that can be used to specify the global label options. */
/**
* InjectionToken that can be used to specify the global label options.
* @deprecated Use `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token from
* `@angular/material/form-field` instead.
* @breaking-change 11.0.0
*/
export const MAT_LABEL_GLOBAL_OPTIONS =
new InjectionToken<LabelOptions>('mat-label-global-options');

/** Type for the available floatLabel values. */
/**
* Type for the available floatLabel values.
* @deprecated Use `FloatLabelType` from `@angular/material/form-field` instead.
* @breaking-change 11.0.0
*/
export type FloatLabelType = 'always' | 'never' | 'auto';

/** Configurable options for floating labels. */
/**
* Configurable options for floating labels.
* @deprecated Use `MatFormFieldDefaultOptions` from `@angular/material/form-field` instead.
* @breaking-change 11.0.0
*/
export interface LabelOptions {
/**
* Whether the label should float `always`, `never`, or `auto` (only when necessary).
Expand Down
18 changes: 15 additions & 3 deletions src/material/form-field/form-field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import {
} from '@angular/core';
import {
CanColor, CanColorCtor,
FloatLabelType,
LabelOptions,
MAT_LABEL_GLOBAL_OPTIONS,
mixinColor,
Expand Down Expand Up @@ -83,13 +82,21 @@ const _MatFormFieldMixinBase: CanColorCtor & typeof MatFormFieldBase =
*/
export type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';

/** Possible values for the "floatLabel" form-field input. */
export type FloatLabelType = 'always' | 'never' | 'auto';

/**
* Represents the default options for the form field that can be configured
* using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
*/
export interface MatFormFieldDefaultOptions {
appearance?: MatFormFieldAppearance;
hideRequiredMarker?: boolean;
/**
* Whether the label for form-fields should by default float `always`,
* `never`, or `auto` (only when necessary).
*/
floatLabel?: FloatLabelType;
}

/**
Expand Down Expand Up @@ -227,7 +234,7 @@ export class MatFormField extends _MatFormFieldMixinBase
}
set floatLabel(value: FloatLabelType) {
if (value !== this._floatLabel) {
this._floatLabel = value || this._labelOptions.float || 'auto';
this._floatLabel = value || this._getDefaultFloatLabelState();
this._changeDetectorRef.markForCheck();
}
}
Expand Down Expand Up @@ -280,7 +287,7 @@ export class MatFormField extends _MatFormFieldMixinBase
super(_elementRef);

this._labelOptions = labelOptions ? labelOptions : {};
this.floatLabel = this._labelOptions.float || 'auto';
this.floatLabel = this._getDefaultFloatLabelState();
this._animationsEnabled = _animationMode !== 'NoopAnimations';

// Set the default through here so we invoke the setter on the first run.
Expand Down Expand Up @@ -473,6 +480,11 @@ export class MatFormField extends _MatFormFieldMixinBase
}
}

/** Gets the default float label state. */
private _getDefaultFloatLabelState(): FloatLabelType {
return (this._defaults && this._defaults.floatLabel) || this._labelOptions.float || 'auto';
}

/**
* Sets the list of element IDs that describe the child control. This allows the control to update
* its `aria-describedby` attribute accordingly.
Expand Down
14 changes: 13 additions & 1 deletion src/material/input/input.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe('MatInput without forms', () => {
'Expected MatInput to set floatingLabel to auto by default.');
}));

it('should default to global floating label type', fakeAsync(() => {
it('should default to floating label type from deprecated global label options', fakeAsync(() => {
let fixture = createComponent(MatInputWithId, [{
provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}
}]);
Expand All @@ -73,6 +73,18 @@ describe('MatInput without forms', () => {
'Expected MatInput to set floatingLabel to always from global option.');
}));

it('should default to floating label type provided by global default options', fakeAsync(() => {
let fixture = createComponent(MatInputWithId, [{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {floatLabel: 'always'}
}]);
fixture.detectChanges();

let formField = fixture.debugElement.query(By.directive(MatFormField))!
.componentInstance as MatFormField;
expect(formField.floatLabel).toBe('always',
'Expected MatInput to set floatingLabel to always from global option.');
}));

it('should not be treated as empty if type is date', fakeAsync(() => {
const platform = new Platform();

Expand Down
3 changes: 3 additions & 0 deletions tools/public_api_guard/material/form-field.d.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export declare type FloatLabelType = 'always' | 'never' | 'auto';

export declare function getMatFormFieldDuplicatedHintError(align: string): Error;

export declare function getMatFormFieldMissingControlError(): Error;
Expand Down Expand Up @@ -88,6 +90,7 @@ export declare abstract class MatFormFieldControl<T> {

export interface MatFormFieldDefaultOptions {
appearance?: MatFormFieldAppearance;
floatLabel?: FloatLabelType;
hideRequiredMarker?: boolean;
}

Expand Down