Skip to content

Commit bfdf323

Browse files
devversionmmalerba
authored andcommitted
refactor(material): deprecate MAT_LABEL_GLOBAL_OPTIONS in favo… (#18017)
As of Angular Material version 9, the `MAT_LABEL_GLOBAL_OPTIONS` injection token is deprecated. The default floating label behavior should be set through the `MAT_FORM_FIELD_DEFAULT_OPTIONS` token. DEPRECATED: `MAT_LABEL_GLOBAL_OPTIONS` exported in `@angular/material/core` is deprecated. Use `MAT_FORM_FIELD_DEFAULT_OPTIONS` from `@angular/material/form-field`. Note that the property `float` is now matching the input name `floatLabel`. DEPRECATED: `FloatLabelType` exported in `@angular/material/core` is deprecated. Import the symbol from `@angular/material/from-field`.
1 parent 5fe233a commit bfdf323

File tree

4 files changed

+47
-7
lines changed

4 files changed

+47
-7
lines changed

src/material/core/label/label-options.ts

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,27 @@
88

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

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

15-
/** Type for the available floatLabel values. */
20+
/**
21+
* Type for the available floatLabel values.
22+
* @deprecated Use `FloatLabelType` from `@angular/material/form-field` instead.
23+
* @breaking-change 11.0.0
24+
*/
1625
export type FloatLabelType = 'always' | 'never' | 'auto';
1726

18-
/** Configurable options for floating labels. */
27+
/**
28+
* Configurable options for floating labels.
29+
* @deprecated Use `MatFormFieldDefaultOptions` from `@angular/material/form-field` instead.
30+
* @breaking-change 11.0.0
31+
*/
1932
export interface LabelOptions {
2033
/**
2134
* Whether the label should float `always`, `never`, or `auto` (only when necessary).

src/material/form-field/form-field.ts

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import {
3030
} from '@angular/core';
3131
import {
3232
CanColor, CanColorCtor,
33-
FloatLabelType,
3433
LabelOptions,
3534
MAT_LABEL_GLOBAL_OPTIONS,
3635
mixinColor,
@@ -83,13 +82,21 @@ const _MatFormFieldMixinBase: CanColorCtor & typeof MatFormFieldBase =
8382
*/
8483
export type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';
8584

85+
/** Possible values for the "floatLabel" form-field input. */
86+
export type FloatLabelType = 'always' | 'never' | 'auto';
87+
8688
/**
8789
* Represents the default options for the form field that can be configured
8890
* using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
8991
*/
9092
export interface MatFormFieldDefaultOptions {
9193
appearance?: MatFormFieldAppearance;
9294
hideRequiredMarker?: boolean;
95+
/**
96+
* Whether the label for form-fields should by default float `always`,
97+
* `never`, or `auto` (only when necessary).
98+
*/
99+
floatLabel?: FloatLabelType;
93100
}
94101

95102
/**
@@ -227,7 +234,7 @@ export class MatFormField extends _MatFormFieldMixinBase
227234
}
228235
set floatLabel(value: FloatLabelType) {
229236
if (value !== this._floatLabel) {
230-
this._floatLabel = value || this._labelOptions.float || 'auto';
237+
this._floatLabel = value || this._getDefaultFloatLabelState();
231238
this._changeDetectorRef.markForCheck();
232239
}
233240
}
@@ -280,7 +287,7 @@ export class MatFormField extends _MatFormFieldMixinBase
280287
super(_elementRef);
281288

282289
this._labelOptions = labelOptions ? labelOptions : {};
283-
this.floatLabel = this._labelOptions.float || 'auto';
290+
this.floatLabel = this._getDefaultFloatLabelState();
284291
this._animationsEnabled = _animationMode !== 'NoopAnimations';
285292

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

483+
/** Gets the default float label state. */
484+
private _getDefaultFloatLabelState(): FloatLabelType {
485+
return (this._defaults && this._defaults.floatLabel) || this._labelOptions.float || 'auto';
486+
}
487+
476488
/**
477489
* Sets the list of element IDs that describe the child control. This allows the control to update
478490
* its `aria-describedby` attribute accordingly.

src/material/input/input.spec.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ describe('MatInput without forms', () => {
6161
'Expected MatInput to set floatingLabel to auto by default.');
6262
}));
6363

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

76+
it('should default to floating label type provided by global default options', fakeAsync(() => {
77+
let fixture = createComponent(MatInputWithId, [{
78+
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {floatLabel: 'always'}
79+
}]);
80+
fixture.detectChanges();
81+
82+
let formField = fixture.debugElement.query(By.directive(MatFormField))!
83+
.componentInstance as MatFormField;
84+
expect(formField.floatLabel).toBe('always',
85+
'Expected MatInput to set floatingLabel to always from global option.');
86+
}));
87+
7688
it('should not be treated as empty if type is date', fakeAsync(() => {
7789
const platform = new Platform();
7890

tools/public_api_guard/material/form-field.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
export declare type FloatLabelType = 'always' | 'never' | 'auto';
2+
13
export declare function getMatFormFieldDuplicatedHintError(align: string): Error;
24

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

8991
export interface MatFormFieldDefaultOptions {
9092
appearance?: MatFormFieldAppearance;
93+
floatLabel?: FloatLabelType;
9194
hideRequiredMarker?: boolean;
9295
}
9396

0 commit comments

Comments
 (0)