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

packages/mdc-notched-outline/README.md

@@ -48,6 +48,16 @@ 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.
+`mdc-notched-outline-idle-corner-radius($radius)` | Sets the corner radius of the notched outline element in idle state.
+> NOTE:
+> 1. Having 2 corner radius mixins is intentional. Combining the mixins into one
+> causes the CSS output to be overly specific. The main cause of this is the fact that
+> `.mdc-notched-outline__idle` is sibling to `.mdc-notched-outline`. The future fix
+> is move `.mdc-notched-outline__idle` as a child to `.mdc-notched-outline`.
+> 1. Please be considerate of how you nest the `idle` and `notched` state Sass Mixins.
+> You may be overly specific in some cases, which should be avoided.
 
 ### `MDCNotchedOutline`
 

packages/mdc-notched-outline/_mixins.scss

@@ -27,3 +27,19 @@
     @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) {
+  border-radius: $radius;
+}
+
+@mixin mdc-notched-outline-idle-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;
 }
@@ -189,6 +185,20 @@
   }
 }
 
+@mixin mdc-text-field-outline-corner-radius_($radius) {
+  // NOTE: idle and notched state border radius mixins
+  // are broken into 2 different mixins, otherwise
+  // we would be overly specific (big no, no). The cause of
+  // this is because .mdc-notched-outline and .mdc-notched-outline__idle
+  // are siblings. .mdc-notched-outline__idle needs to be a child of
+  // .mdc-notched-outline in order to remedy this issue.
+  .mdc-notched-outline {
+    @include mdc-notched-outline-corner-radius($radius);
+  }
+
+  @include mdc-notched-outline-idle-corner-radius($radius);
+}
+
 // Outlined
 
 @mixin mdc-text-field-outlined-disabled_ {
@@ -207,9 +217,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_ {
@@ -237,6 +245,7 @@
   @include mdc-text-field-focused-outline-color(primary);
   @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
   @include mdc-floating-label-shake-animation(text-field-outlined);
+  @include mdc-text-field-outline-corner-radius_($mdc-text-field-border-radius);
 
   height: 56px;
   border: none;
@@ -261,14 +270,13 @@
   .mdc-text-field__icon {
     z-index: 2;
   }
-
-  .mdc-notched-outline,
-  .mdc-notched-outline__idle {
-    @include mdc-text-field-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 +287,12 @@
     .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;

scripts/webpack/js-bundle-factory.js

@@ -138,6 +138,7 @@ class JsBundleFactory {
         lineRipple: getAbsolutePath('/packages/mdc-line-ripple/index.js'),
         linearProgress: getAbsolutePath('/packages/mdc-linear-progress/index.js'),
         menu: getAbsolutePath('/packages/mdc-menu/index.js'),
+        notchedOutline: getAbsolutePath('/packages/mdc-notched-outline/index.js'),
         radio: getAbsolutePath('/packages/mdc-radio/index.js'),
         ripple: getAbsolutePath('/packages/mdc-ripple/index.js'),
         select: getAbsolutePath('/packages/mdc-select/index.js'),