refactor(notched-outline): Refactor notched outline to use 3 divs

demos/text-field.html

@@ -147,11 +147,10 @@ <h2>Outlined Text Field</h2>
                    aria-describedby="name-validation-message">
             <label for="tf-outlined-input" class="mdc-floating-label">Your Name</label>
             <div class="mdc-notched-outline">
-              <svg>
-                <path class="mdc-notched-outline__path"/>
-              </svg>
-            </div>
-            <div class="mdc-notched-outline__idle"></div>
+               <div class="mdc-notched-outline__leading"></div>
+               <div class="mdc-notched-outline__notch"></div>
+               <div class="mdc-notched-outline__trailing"></div>
+             </div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
              id="name-validation-message">Helper Text</p>
@@ -213,11 +212,10 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <input type="text" id="tf-outlined-leading" class="mdc-text-field__input">
             <label for="tf-outlined-leading" class="mdc-floating-label">Your other name</label>
             <div class="mdc-notched-outline">
-              <svg>
-                <path class="mdc-notched-outline__path"/>
-              </svg>
-            </div>
-            <div class="mdc-notched-outline__idle"></div>
+               <div class="mdc-notched-outline__leading"></div>
+               <div class="mdc-notched-outline__notch"></div>
+               <div class="mdc-notched-outline__trailing"></div>
+             </div>
           </div>
         </div>
         <div id="demo-tf-outlined-trailing-wrapper" class="demo-text-field-wrapper demo-tf-add-space">
@@ -227,11 +225,10 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <label for="tf-outlined-trailing" class="mdc-floating-label">Your other name</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">delete</i>
             <div class="mdc-notched-outline">
-              <svg>
-                <path class="mdc-notched-outline__path"/>
-              </svg>
-            </div>
-            <div class="mdc-notched-outline__idle"></div>
+               <div class="mdc-notched-outline__leading"></div>
+               <div class="mdc-notched-outline__notch"></div>
+               <div class="mdc-notched-outline__trailing"></div>
+             </div>
           </div>
         </div>
         <div>

demos/theme/index.html

@@ -786,11 +786,10 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
                    aria-describedby="demo-text-field-helper-text">
             <label for="demo-text-field" class="mdc-floating-label">Outlined Text Field</label>
             <div class="mdc-notched-outline">
-              <svg>
-                <path class="mdc-notched-outline__path"/>
-              </svg>
-            </div>
-            <div class="mdc-notched-outline__idle"></div>
+               <div class="mdc-notched-outline__leading"></div>
+               <div class="mdc-notched-outline__notch"></div>
+               <div class="mdc-notched-outline__trailing"></div>
+             </div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-helper-text"
              aria-hidden="true">

packages/mdc-floating-label/constants.js

@@ -25,6 +25,8 @@
 const cssClasses = {
   LABEL_FLOAT_ABOVE: 'mdc-floating-label--float-above',
   LABEL_SHAKE: 'mdc-floating-label--shake',
+  ROOT: 'mdc-floating-label',
+  UPGRADED: 'mdc-floating-label--upgraded',
 };
 
 export {cssClasses};

packages/mdc-floating-label/mdc-floating-label.scss

@@ -73,6 +73,11 @@
     cursor: auto;
   }
 
+  //.mdc-floating-label--upgraded {
+  //  .mdc-floating-label--float-above {
+  //  }
+  //}
+
   @at-root {
     @include mdc-floating-label-float-position($mdc-floating-label-position-y);
     @include mdc-floating-label-shake-animation(standard);

packages/mdc-notched-outline/README.md

@@ -34,11 +34,10 @@ npm install @material/notched-outline
 
 ```html
 <div class="mdc-notched-outline">
-  <svg>
-    <path class="mdc-notched-outline__path"/>
-  </svg>
+  <div class="mdc-notched-outline__leading"></div>
+  <div class="mdc-notched-outline__notch"></div>
+  <div class="mdc-notched-outline__trailing"></div>
 </div>
-<div class="mdc-notched-outline__idle"></div>
 ```
 
 > For usage within a text field see [here](../mdc-textfield/README.md#outlined).
@@ -95,11 +94,10 @@ Consider the following example HTML:
 ```html
 <div class="foo__parent">
   <div class="mdc-notched-outline foo__child">
-    <svg>
-      <path class="mdc-notched-outline__path"/>
-    </svg>
+    <div class="mdc-notched-outline__leading"></div>
+    <div class="mdc-notched-outline__notch"></div>
+    <div class="mdc-notched-outline__trailing"></div>
   </div>
-  <div class="mdc-notched-outline__idle"></div>
 </div>
 ```
 In order to customize any "non-idle" part of notched-outline, use the .foo__child CSS selector:

packages/mdc-notched-outline/_mixins.scss

@@ -22,6 +22,7 @@
 
 @import "@material/theme/mixins";
 @import "@material/shape/mixins";
+@import "@material/rtl/mixins";
 
 @mixin mdc-notched-outline-idle-color($color) {
   .mdc-notched-outline__idle {
@@ -30,19 +31,36 @@
 }
 
 @mixin mdc-notched-outline-color($color) {
-  .mdc-notched-outline__path {
-    @include mdc-theme-prop(stroke, $color);
+  .mdc-notched-outline__leading,
+  .mdc-notched-outline__notch,
+  .mdc-notched-outline__trailing {
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
 @mixin mdc-notched-outline-stroke-width($width) {
-  .mdc-notched-outline__path {
-    stroke-width: $width;
+  .mdc-notched-outline__leading,
+  .mdc-notched-outline__notch,
+  .mdc-notched-outline__trailing {
+    border-width: $width;
   }
 }
 
 @mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false) {
   @include mdc-shape-radius($radius, $rtl-reflexive);
+  $radius: mdc-shape-prop-value($radius);
+
+  .mdc-notched-outline__leading {
+    @include mdc-rtl-reflexive(border-radius, 0 $radius $radius 0, border-radius, $radius 0 0 $radius);
+
+    @if ($radius > 12px) {
+      width: $radius;
+    }
+  }
+
+  .mdc-notched-outline__trailing {
+    @include mdc-rtl-reflexive(border-radius, $radius 0 0 $radius, border-radius, 0 $radius $radius 0);
+  }
 }
 
 @mixin mdc-notched-outline-idle-shape-radius($radius, $rtl-reflexive: false) {

packages/mdc-notched-outline/adapter.js

@@ -34,18 +34,6 @@
  * @record
  */
 class MDCNotchedOutlineAdapter {
-  /**
-   * Returns the width of the root element.
-   * @return {number}
-   */
-  getWidth() {}
-
-  /**
-   * Returns the height of the root element.
-   * @return {number}
-   */
-  getHeight() {}
-
   /**
    * Adds a class to the root element.
    * @param {string} className
@@ -59,18 +47,10 @@ class MDCNotchedOutlineAdapter {
   removeClass(className) {}
 
   /**
-   * Sets the "d" attribute of the outline element's SVG path.
-   * @param {string} value
-   */
-  setOutlinePathAttr(value) {}
-
-  /**
-   * Returns the idle outline element's computed style value of the given css property `propertyName`.
-   * We achieve this via `getComputedStyle(...).getPropertyValue(propertyName)`.
-   * @param {string} propertyName
-   * @return {string}
+   * Sets the width style property of the notch element.
+   * @param {number} width
    */
-  getIdleOutlineStyleValue(propertyName) {}
+  setNotchWidthProperty(width) {}
 }
 
 export default MDCNotchedOutlineAdapter;

packages/mdc-notched-outline/constants.js

@@ -23,19 +23,12 @@
 
 /** @enum {string} */
 const strings = {
-  PATH_SELECTOR: '.mdc-notched-outline__path',
-  IDLE_OUTLINE_SELECTOR: '.mdc-notched-outline__idle',
+  NOTCH_ELEMENT_SELECTOR: '.mdc-notched-outline__notch',
 };
 
 /** @enum {string} */
 const cssClasses = {
   OUTLINE_NOTCHED: 'mdc-notched-outline--notched',
 };
 
-/** @enum {number} */
-const numbers = {
-  NOTCH_GUTTER_SIZE: 4,
-  MIN_LEADING_STROKE_EDGE_POSITION: 12,
-};
-
-export {cssClasses, strings, numbers};
+export {cssClasses, strings};

packages/mdc-notched-outline/foundation.js

@@ -23,7 +23,7 @@
 
 import MDCFoundation from '@material/base/foundation';
 import MDCNotchedOutlineAdapter from './adapter';
-import {cssClasses, strings, numbers} from './constants';
+import {cssClasses, strings} from './constants';
 
 /**
  * @extends {MDCFoundation<!MDCNotchedOutlineAdapter>}
@@ -40,24 +40,16 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
     return cssClasses;
   }
 
-  /** @return enum {number} */
-  static get numbers() {
-    return numbers;
-  }
-
   /**
    * {@see MDCNotchedOutlineAdapter} for typing information on parameters and return
    * types.
    * @return {!MDCNotchedOutlineAdapter}
    */
   static get defaultAdapter() {
     return /** @type {!MDCNotchedOutlineAdapter} */ ({
-      getWidth: () => {},
-      getHeight: () => {},
       addClass: () => {},
       removeClass: () => {},
-      setOutlinePathAttr: () => {},
-      getIdleOutlineStyleValue: () => {},
+      setNotchWidthProperty: () => {},
     });
   }
 
@@ -70,14 +62,18 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
 
   /**
    * Adds the outline notched selector and updates the notch width
-   * calculated based off of notchWidth and isRtl.
+   * calculated based off of notchWidth.
    * @param {number} notchWidth
-   * @param {boolean=} isRtl
    */
-  notch(notchWidth, isRtl = false) {
+  notch(notchWidth) {
     const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
+
+    if (notchWidth > 0) {
+      notchWidth += 8; // Add padding from left/right.
+    }
+
+    this.adapter_.setNotchWidthProperty(notchWidth);
     this.adapter_.addClass(OUTLINE_NOTCHED);
-    this.updateSvgPath_(notchWidth, isRtl);
   }
 
   /**
@@ -86,54 +82,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
   closeNotch() {
     const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
     this.adapter_.removeClass(OUTLINE_NOTCHED);
-  }
-
-  /**
-   * Updates the SVG path of the focus outline element based on the notchWidth
-   * and the RTL context.
-   * @param {number} notchWidth
-   * @param {boolean=} isRtl
-   * @private
-   */
-  updateSvgPath_(notchWidth, isRtl) {
-    // Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
-    const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
-        this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
-    const radius = parseFloat(radiusStyleValue);
-    const width = this.adapter_.getWidth();
-    const height = this.adapter_.getHeight();
-    const cornerWidth = radius + 1.2;
-    const leadingStrokeLength = Math.max(0, numbers.MIN_LEADING_STROKE_EDGE_POSITION - radius - 1.2);
-
-    // If the notchWidth is 0, the the notched outline doesn't need to add padding.
-    let paddedNotchWidth = 0;
-    if (notchWidth > 0) {
-      paddedNotchWidth = notchWidth + 2 * numbers.NOTCH_GUTTER_SIZE;
-    }
-
-    // The right, bottom, and left sides of the outline follow the same SVG path.
-    const pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius
-      + 'v' + (height - (2 * cornerWidth))
-      + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius
-      + 'h' + (-width + (2 * cornerWidth))
-      + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius
-      + 'v' + (-height + (2 * cornerWidth))
-      + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius;
-
-    let path;
-    if (!isRtl) {
-      path = 'M' + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + ',' + 1
-        + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength)
-        + pathMiddle
-        + 'h' + leadingStrokeLength;
-    } else {
-      path = 'M' + (width - cornerWidth - leadingStrokeLength) + ',' + 1
-        + 'h' + leadingStrokeLength
-        + pathMiddle
-        + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength);
-    }
-
-    this.adapter_.setOutlinePathAttr(path);
+    this.adapter_.setNotchWidthProperty(0);
   }
 }