chore(notched-outline): separate outline from text-field

packages/mdc-notched-outline/README.md

@@ -48,6 +48,8 @@ Mixin | Description
 --- | ---
 `mdc-notched-outline-color($color)` | Customizes the border color of the notched outlined.
 `mdc-notched-outline-idle-color($color)` | Customizes the border color of the idle outline.
+`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.
+`mdc-notched-outline-corner-radius($radius)` | Sets the corner radius of the notched outline element to the given number.
 
 ### `MDCNotchedOutline`
 

packages/mdc-notched-outline/_mixins.scss

@@ -27,3 +27,16 @@
     @include mdc-theme-prop(stroke, $color);
   }
 }
+
+@mixin mdc-notched-outline-stroke-width($width) {
+  .mdc-notched-outline__path {
+    stroke-width: $width;
+  }
+}
+
+@mixin mdc-notched-outline-corner-radius($radius) {
+  &,
+  ~ .mdc-notched-outline__idle {
+    border-radius: $radius;
+  }
+}

packages/mdc-textfield/_mixins.scss

@@ -22,10 +22,6 @@
 @import "icon/mixins";
 @import "icon/variables";
 
-@mixin mdc-text-field-outline-corner-radius($radius) {
-  border-radius: $radius;
-}
-
 @mixin mdc-text-field-box-corner-radius($radius) {
   border-radius: $radius $radius 0 0;
 }
@@ -207,9 +203,7 @@
 }
 
 @mixin mdc-text-field-outlined-focused_ {
-  .mdc-notched-outline__path {
-    stroke-width: 2px;
-  }
+  @include mdc-notched-outline-stroke-width(2px);
 }
 
 @mixin mdc-text-field-outlined-dense_ {
@@ -262,13 +256,17 @@
     z-index: 2;
   }
 
-  .mdc-notched-outline,
-  .mdc-notched-outline__idle {
-    @include mdc-text-field-outline-corner-radius($mdc-text-field-border-radius);
+  .mdc-notched-outline {
+    @include mdc-notched-outline-corner-radius($mdc-text-field-border-radius);
   }
 }
 
 @mixin mdc-text-field-outline-color_($color) {
+  /** NOTE: outlined version of text-field wants the "idle" and
+   * "notched" outline to have the same color. This covers two cases:
+   * 1) text field renders with NO value in the "idle" state
+   * 2) text field renders with a value in the "notched" state
+   */
   @include mdc-notched-outline-idle-color($color);
   @include mdc-notched-outline-color($color);
 }
@@ -279,6 +277,13 @@
     .mdc-text-field__icon:hover ~ {
       @include mdc-notched-outline-idle-color($color);
 
+      /** tldr; this doesn't break BEM:
+       * We need to wrap this mixin with the .mdc-notched-outline
+       * selector, because of the sibling selector '~'. The notched
+       * outline html structure has .mdc-notched-outline
+       * and .mdc-notched-outline__idle as siblings, while
+       * .mdc-notched-outline__path is a child of .mdc-notched-outline
+       */
       .mdc-notched-outline {
         @include mdc-notched-outline-color($color);
       }

packages/mdc-textfield/adapter.js

@@ -16,9 +16,6 @@
  */
 
 /* eslint-disable no-unused-vars */
-import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
-import MDCLineRippleFoundation from '@material/line-ripple/foundation';
-import MDCNotchedOutlineFoundation from '@material/notched-outline/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
 
@@ -39,11 +36,8 @@ let NativeInputType;
 
 /**
  * @typedef {{
- *   lineRipple: (!MDCLineRippleFoundation|undefined),
  *   helperText: (!MDCTextFieldHelperTextFoundation|undefined),
  *   icon: (!MDCTextFieldIconFoundation|undefined),
- *   label: (!MDCFloatingLabelFoundation|undefined),
- *   outline: (!MDCNotchedOutlineFoundation|undefined)
  * }}
  */
 let FoundationMapType;