MDC-based form-field doesn't inherit custom typography

kaspnilsson commented 3 years ago

Affected component[s]: Form field

Observed behavior:

Outlined input's floating label does not comply with custom typography -- only applies to MDC component.

In addition, MDC component does not shrink in height the same way the non-MDC component does -- not sure why this would be

To actually reproduce this, you unfortunately need to create two separate modules and export two separate components so the [matInput] directives don't collide, but this is the gist of the repro case:

Code:

<div class="non-mdc">
  <mat-form-field appearance="outline">
    <mat-label>Non-MDC label</mat-label>
    <input matInput placeholder="A placeholder"  />
  </mat-form-field>
</div>
<div class="mdc">
  <mat-form-field appearance="outline">
    <mat-label>MDC label</mat-label>
    <input matInput placeholder="A placeholder"  />
  </mat-form-field>
</div>

.non-mdc {
  @include mat.form-field-theme($app-theme); // some init theme
}

$small-typography: mat.define-typography-level(12px, 16px, 400, $roboto-font, 0.3px);

$form-field-typography: mat.define-typography-config(
  $body-2: $small-typography,
  $subheading-1: $small-typography,
  $input: $small-typography,
);

.mdc {
  @include mat.mdc-form-field-theme($app-theme); // some init theme
  @include mat.mdc-form-field-typography($form-field-typography);
}

.mdc,
.non-mdc {
  font-size: 12px;
}

Screen recording:

https://user-images.githubusercontent.com/5749398/131729202-5c30d0b1-8a58-4b43-95ae-adc931757455.mp4

Expected behavior:

Floating label is definitely wrong
Feature parity with upgrade re: input height auto-resizing may be desirable, not sure. May also be related to the first problem somehow

jelbourn commented 3 years ago

cc @mmalerba

mmalerba commented 3 years ago

The floating label is a known issue that we have a PR for here: https://github.com/angular/components/pull/23005, we're just trying to resolve some presubmit issues in google3 so we can get it in.

The fact that the form-field doesn't resize in response to the font size is actually WAI. The old version of form-field extrapolated from the spec to support that, but it was never a real thing in the spec. The spec has since added support for density which is the officially supported way to change the height of the form-field (you can use @include mat.mdc-form-field-density(...) to change it).

angular / components