diff --git a/src/material-experimental/mdc-form-field/_form-field-density.scss b/src/material-experimental/mdc-form-field/_form-field-density.scss index 61e9785284b2..2f75b9942faa 100644 --- a/src/material-experimental/mdc-form-field/_form-field-density.scss +++ b/src/material-experimental/mdc-form-field/_form-field-density.scss @@ -88,7 +88,8 @@ .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above { --mat-mdc-form-field-label-transform: translateY( - -#{mdc-textfield.get-outlined-label-position-y($height)}) scale(0.75); + -#{mdc-textfield.get-outlined-label-position-y($height)}) + scale(var(--mat-mdc-form-field-floating-label-scale, 0.75)); transform: var(--mat-mdc-form-field-label-transform); } diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.scss b/src/material-experimental/mdc-form-field/_form-field-theme.scss index 0675714d9e29..2ebb598fec08 100644 --- a/src/material-experimental/mdc-form-field/_form-field-theme.scss +++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss @@ -89,7 +89,8 @@ // For the non-upgraded notch label (i.e. when rendered on the server), also // use the correct `body1` typography level. .mdc-floating-label--float-above { - font-size: mdc-typography.get-size(body1) * 0.75; + font-size: calc(#{ + mdc-typography.get-size(body1)} * var(--mat-mdc-form-field-floating-label-scale, 0.75)); } .mdc-notched-outline--upgraded .mdc-floating-label--float-above { font-size: mdc-typography.get-size(body1); diff --git a/src/material-experimental/mdc-form-field/directives/notched-outline.ts b/src/material-experimental/mdc-form-field/directives/notched-outline.ts index 2270734aad67..dcca4f417c7a 100644 --- a/src/material-experimental/mdc-form-field/directives/notched-outline.ts +++ b/src/material-experimental/mdc-form-field/directives/notched-outline.ts @@ -35,8 +35,8 @@ import { encapsulation: ViewEncapsulation.None, }) export class MatFormFieldNotchedOutline implements AfterViewInit { - /** Width of the notch. */ - @Input('matFormFieldNotchedOutlineWidth') width: number = 0; + /** Width of the label (original scale) */ + @Input('matFormFieldNotchedOutlineLabelWidth') labelWidth: number = 0; /** Whether the notch should be opened. */ @Input('matFormFieldNotchedOutlineOpen') open: boolean = false; @@ -62,7 +62,9 @@ export class MatFormFieldNotchedOutline implements AfterViewInit { _getNotchWidth() { if (this.open) { const NOTCH_ELEMENT_PADDING = 8; - return `${this.width > 0 ? this.width + NOTCH_ELEMENT_PADDING : 0}px`; + return this.labelWidth > 0 + ? `calc(${this.labelWidth}px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + ${NOTCH_ELEMENT_PADDING}px)` + : '0px'; } return null; diff --git a/src/material-experimental/mdc-form-field/form-field.html b/src/material-experimental/mdc-form-field/form-field.html index 644d9c951a0f..12a3f43e6585 100644 --- a/src/material-experimental/mdc-form-field/form-field.html +++ b/src/material-experimental/mdc-form-field/form-field.html @@ -46,7 +46,7 @@
+ [matFormFieldNotchedOutlineLabelWidth]="_labelWidth"> diff --git a/src/material-experimental/mdc-form-field/form-field.scss b/src/material-experimental/mdc-form-field/form-field.scss index 775a6d30e91c..bc033815da5c 100644 --- a/src/material-experimental/mdc-form-field/form-field.scss +++ b/src/material-experimental/mdc-form-field/form-field.scss @@ -36,6 +36,9 @@ // Host element of the form-field. It contains the mdc-text-field wrapper // and the subscript wrapper. .mat-mdc-form-field { + // The scale to use for the form-field's label when its in the floating position. + --mat-mdc-form-field-floating-label-scale: 0.75; + display: inline-flex; // This container contains the text-field and the subscript. The subscript // should be displayed below the text-field. Hence the column direction. diff --git a/src/material-experimental/mdc-form-field/form-field.ts b/src/material-experimental/mdc-form-field/form-field.ts index 1a6ae6a06dca..94e06cf22b71 100644 --- a/src/material-experimental/mdc-form-field/form-field.ts +++ b/src/material-experimental/mdc-form-field/form-field.ts @@ -114,9 +114,6 @@ const FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM = `translateY(-50%)`; */ const WRAPPER_HORIZONTAL_PADDING = 16; -/** Amount by which to scale the label when the form field is focused. */ -const LABEL_SCALE = 0.75; - /** Container for form controls that applies Material Design styling and behavior. */ @Component({ selector: 'mat-form-field', @@ -270,8 +267,8 @@ export class MatFormField /** State of the mat-hint and mat-error animations. */ _subscriptAnimationState = ''; - /** Width of the outline notch. */ - _outlineNotchWidth = 0; + /** Width of the label element (at scale=1). */ + _labelWidth = 0; /** Gets the current form field control */ get _control(): MatFormFieldControl { @@ -558,10 +555,7 @@ export class MatFormField if (!this._hasOutline() || !this._floatingLabel) { return; } - // The outline notch should be based on the label width, but needs to respect the scaling - // applied to the label if it actively floats. Since the label always floats when the notch - // is open, the MDC text-field floating label scaling is respected in notch width calculation. - this._outlineNotchWidth = this._floatingLabel.getWidth() * LABEL_SCALE; + this._labelWidth = this._floatingLabel.getWidth(); } /** Does any extra processing that is required when handling the hints. */