fix(text-field): Make outline visibility directly linked to floating labels (#2073)

Author: lynnmercier

packages/mdc-textfield/_mixins.scss

@@ -195,14 +195,6 @@
 }
 
 @mixin mdc-text-field-outlined-focused_ {
-  .mdc-text-field__idle-outline {
-    opacity: 0;
-  }
-
-  .mdc-text-field__outline {
-    opacity: 1;
-  }
-
   .mdc-text-field__outline-path {
     stroke-width: 2px;
   }
@@ -237,8 +229,6 @@
   height: 56px;
   border: none;
 
-  // stylelint-disable plugin/selector-bem-pattern
-
   .mdc-text-field__input {
     display: flex;
     height: 30px;
@@ -260,22 +250,14 @@
     z-index: 2;
   }
 
-  .mdc-text-field__label--float-above ~ .mdc-text-field__idle-outline {
-    opacity: 0;
-  }
-
+  // stylelint-disable plugin/selector-bem-pattern
   .mdc-text-field__input:hover ~ .mdc-text-field__idle-outline {
     border: 1px solid;
   }
 
   .mdc-text-field__icon:hover ~ .mdc-text-field__idle-outline {
     border: 1px solid $mdc-text-field-outlined-hover-border;
   }
-
-  .mdc-text-field__label--float-above ~ .mdc-text-field__outline {
-    opacity: 1;
-  }
-
   // stylelint-enable plugin/selector-bem-pattern
 }
 

packages/mdc-textfield/mdc-text-field.scss

@@ -255,3 +255,15 @@
 .mdc-text-field--textarea.mdc-text-field--disabled {
   @include mdc-text-field-textarea-disabled_;
 }
+
+// Never show the idle outline when the label is floating, otherwise the label
+// will collide with the idle outline.
+.mdc-text-field__label--float-above ~ .mdc-text-field__idle-outline {
+  opacity: 0;
+}
+
+// Show the outline when the label is floating, since the outline has a
+// notch for the label to fit into.
+.mdc-text-field__label--float-above ~ .mdc-text-field__outline {
+  opacity: 1;
+}