fix(material-experimental/mdc-form-filed): missing focus and hover effect for fill

We recently updated to the latest canary version of MDC, but did not
account for a new breaking change to the MDC text-field that required
us to explicitly specify a `ripple` container element.

material-components/material-components-web@c541ebe#diff-fa38508bb43a471ee25b746d85527fb5

Thinking more about the ripple styles in the MDC text-field unveiled
that we should just provide our own implementation of the focus overlay
since MDC ripples are too much bloat for the simple case of showing
a focus and hover effect. We don't want to create a `MdcRipple` runtime
instance, nor do we want to include CSS selectors for interaction
ripples which are not used in the text-field at all.

Author: devversion

src/material-experimental/mdc-form-field/BUILD.bazel

@@ -82,13 +82,15 @@ sass_library(
     name = "form_field_partials",
     srcs = [
         "_form-field-bottom-line.scss",
+        "_form-field-focus-overlay.scss",
         "_form-field-sizing.scss",
         "_form-field-subscript.scss",
         "_mdc-text-field-structure-overrides.scss",
         "_mdc-text-field-textarea-overrides.scss",
     ],
     deps = [
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 

src/material-experimental/mdc-form-field/_form-field-focus-overlay.scss

@@ -0,0 +1,34 @@
+@use '@material/ripple/functions' as ripple-functions;
+@import '@material/textfield/mixins.import';
+@import '../../material/core/style/layout-common';
+
+// MDC text-field uses `@material/ripple` in order to show a focus and hover effect for
+// text-fields. This is unnecessary because the ripples bring in a lot of unnecessary
+// styles and runtime code while the actual goal for the text-field is simply showing a
+// focus and hover effect. The ripples will unnecessarily provide CSS selectors and JS
+// runtime code for launching interaction ripples at pointer location. This is not needed
+// for the text-field, so we create our own minimal focus overlay styles. Our focus overlay
+// uses the exact same logic to compute the colors as in the default MDC text-field ripples.
+@mixin _mat-form-field-focus-overlay() {
+  .mat-mdc-form-field-focus-overlay {
+    @include mat-fill;
+    opacity: 0;
+  }
+}
+
+@mixin _mat-form-field-focus-overlay-theme() {
+  $focus-opacity: ripple-functions.states-opacity($mdc-text-field-ink-color, focus);
+  $hover-opacity: ripple-functions.states-opacity($mdc-text-field-ink-color, hover);
+
+  .mat-mdc-form-field-focus-overlay {
+    background-color: $mdc-text-field-ink-color;
+  }
+
+  .mat-mdc-form-field:hover .mat-mdc-form-field-focus-overlay {
+    opacity: $hover-opacity;
+  }
+
+  .mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay {
+    opacity: $focus-opacity;
+  }
+}

src/material-experimental/mdc-form-field/_mdc-form-field.scss

@@ -5,6 +5,7 @@
 @import '../mdc-helpers/mdc-helpers';
 @import 'form-field-subscript';
 @import 'form-field-bottom-line';
+@import 'form-field-focus-overlay';
 @import 'mdc-text-field-theme-variable-refresh';
 
 // Mixin that overwrites the default MDC text-field color styles to be based on
@@ -34,12 +35,13 @@
 @mixin mat-form-field-theme-mdc($theme) {
   @include mat-using-mdc-theme($theme) {
     @include _mdc-text-field-refresh-theme-variables() {
-      @include mdc-text-field-core-styles($query: $mat-theme-styles-query);
+      @include mdc-text-field-without-ripple($query: $mat-theme-styles-query);
       @include mdc-floating-label-core-styles($query: $mat-theme-styles-query);
       @include mdc-notched-outline-core-styles($query: $mat-base-styles-query);
       @include mdc-line-ripple-core-styles($query: $mat-theme-styles-query);
       @include _mat-form-field-subscript-theme();
       @include _mat-form-field-bottom-line-theme();
+      @include _mat-form-field-focus-overlay-theme();
 
       .mat-mdc-form-field.mat-accent {
         @include _mdc-text-field-color-styles(secondary);
@@ -48,25 +50,13 @@
       .mat-mdc-form-field.mat-warn {
         @include _mdc-text-field-color-styles(error);
       }
-
-      // MDC text-field intends to hide the ripples in the outline appearance. The styles for
-      // this collide with other styles from the structure styles. This is because the ripples
-      // are made invisible by using the `mdc-ripple.states-base-color` mixin. The mixin makes the
-      // ripples `transparent` by generating `content: none` instead. This means that the style
-      // will collide with the default `content` for ripple pseudo elements. Depending on how
-      // themes and component styles are inserted, the ripples will not hide properly. To ensure
-      // that the ripples are not rendered in the outline appearance, we copy the mixin call but
-      // increase the specificity.
-      .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
-        @include mdc-ripple.states-base-color(transparent);
-      }
     }
   }
 }
 
 @mixin mat-form-field-typography-mdc($config) {
   @include mat-using-mdc-typography($config) {
-    @include mdc-text-field-core-styles($query: $mat-typography-styles-query);
+    @include mdc-text-field-without-ripple($query: $mat-typography-styles-query);
     @include mdc-floating-label-core-styles($query: $mat-typography-styles-query);
     @include mdc-text-field-core-styles($query: $mat-typography-styles-query);
     @include _mat-form-field-subscript-typography($config);

src/material-experimental/mdc-form-field/form-field.html

@@ -25,6 +25,7 @@
      [class.mdc-text-field--disabled]="_control.disabled"
      [class.mdc-text-field--invalid]="_control.errorState"
      (click)="_control.onContainerClick && _control.onContainerClick($event)">
+  <div class="mat-mdc-form-field-focus-overlay" *ngIf="!_hasOutline()"></div>
   <div class="mat-mdc-form-field-flex">
     <div *ngIf="_hasOutline()" matFormFieldNotchedOutline
          [matFormFieldNotchedOutlineOpen]="_shouldLabelFloat()"

src/material-experimental/mdc-form-field/form-field.scss

@@ -3,22 +3,24 @@
 @import 'form-field-sizing';
 @import 'form-field-subscript';
 @import 'form-field-bottom-line';
+@import 'form-field-focus-overlay';
 @import 'mdc-text-field-textarea-overrides';
 @import 'mdc-text-field-structure-overrides';
 
-// Base styles for MDC notched-outline, MDC floating label and MDC text-field.
+// Base styles for MDC text-field, notched-outline, floating label and line-ripple.
+@include mdc-text-field-without-ripple($query: $mat-base-styles-without-animation-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();
 @include _mat-mdc-text-field-structure-overrides();
 
-// Include the subscript and bottom-line styles.
+// Include the subscript, bottom-line and focus-overlay styles.
 @include _mat-form-field-subscript();
 @include _mat-form-field-bottom-line();
+@include _mat-form-field-focus-overlay();
 
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.
@@ -57,8 +59,8 @@
 // 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-text-field-without-ripple($query: animation);
   @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);
 }