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

demos/text-field.html

@@ -145,13 +145,13 @@ <h2>Outlined Text Field</h2>
             <input type="text" id="tf-outlined-input" class="mdc-text-field__input"
                    aria-controls="name-validation-message"
                    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">
+                 <label for="tf-outlined-input" class="mdc-floating-label">Your Name</label>
+               </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>
@@ -211,27 +211,27 @@ <h2>Text Field - Leading/Trailing icons</h2>
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon" data-demo-no-auto-js>
             <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
             <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">
+                 <label for="tf-outlined-leading" class="mdc-floating-label">Your other name</label>
+               </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">
           <div id="tf-outlined-trailing-example"
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-outlined-trailing" class="mdc-text-field__input">
-            <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">
+                 <label for="tf-outlined-trailing" class="mdc-floating-label">Your other name</label>
+               </div>
+               <div class="mdc-notched-outline__trailing"></div>
+             </div>
           </div>
         </div>
         <div>

demos/theme/index.html

@@ -784,13 +784,13 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
                    id="demo-text-field"
                    aria-controls="demo-text-field-helper-text"
                    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">
+                 <label for="demo-text-field" class="mdc-floating-label">Outlined Text Field</label>
+               </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/_variables.scss

@@ -20,5 +20,5 @@
 // THE SOFTWARE.
 //
 
-$mdc-floating-label-position-y: 100%;
+$mdc-floating-label-position-y: 50%;
 $mdc-floating-label-transition-duration: 150ms;

packages/mdc-floating-label/constants.js

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

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

@@ -36,7 +36,6 @@
     @include mdc-typography(subtitle1);
 
     position: absolute;
-    bottom: 8px;
     /* @noflip */
     left: 0;
     /* @noflip */

packages/mdc-notched-outline/README.md

@@ -34,14 +34,20 @@ 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">
+    <label class="mdc-floating-label">Label</label>
+  </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).
+> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when
+> used together with MDC Notched Outline.
+
+> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and
+> [MDC Select](../mdc-select/README.md#outlined-select) documentation for
+> information on using Notched Outline in the context of those components.
 
 ### Styles
 
@@ -67,59 +73,24 @@ CSS Class | Description
 --- | ---
 `mdc-notched-outline` | Mandatory. Container for the SVG of the notched outline path.
 `mdc-notched-outline--notched` | Class to open notch outline.
-`mdc-notched-outline__path` | Mandatory. The path of the SVG of the notched outline.
-`mdc-notched-outline__idle` | Mandatory. The full outline when the notch is hidden.
+`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).
+`mdc-notched-outline__notch` | Mandatory. Element representing the notch.
+`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).
 
 ### Sass Mixins
 
 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-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
-`mdc-notched-outline-idle-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element in idle state with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
-
-
-### Sass Functions
-
-Function | Description
---- | ---
-`mdc-notched-outline-get-notch-padded-position($cornerSize)` | Returns the notch padded position based on given radius. This is 'x' position where the floating label starts.
-
-#### Calling Mixins with Parent Selectors
-
-Because notched-outline has sibling elements, you need to call the "idle" Sass mixins with parent selectors.
-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>
-  <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:
-```scss
-.foo__child {
-  @include mdc-notched-outline-color($fooColor);
-}
-```
-But in order to customize any "idle" part of the notched-outline, you must use the .foo__parent CSS selector:
-```scss
-.foo__parent {
-  @include mdc-notched-outline-idle-color($fooColor);
-}
-```
+`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.
 
 ## `MDCNotchedOutline` Properties and Methods
 
 Method Signature | Description
 --- | ---
-`notch(notchWidth: number, isRtl: boolean) => void` | Updates notched outline to open notch in outline path.
+`notch(notchWidth: number) => void` | Updates notched outline to open notch in outline path.
 `closeNotch() => void` | Updates the notched outline to close notch in outline path.
 
 ## Usage Within Frameworks
@@ -130,17 +101,13 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 
 Method Signature | Description
 --- | ---
-`getWidth() => number` | Returns the width of the notched outline element.
-`getHeight() => number` | Returns the height of the notched outline element.
 `addClass(className: string) => void` | Adds a class to the notched outline element.
 `removeClass(className: string) => void` | Removes a class from the notched outline element.
-`setOutlinePathAttr(value: string) => void` | Sets the "d" attribute of the notched outline element's SVG path.
-`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of a given css `propertyName`.
+`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.
 
 ### `MDCNotchedOutlineFoundation`
 
 Method Signature | Description
 --- | ---
-`notch(notchWidth: number, isRtl: boolean) => void` | Adds the `mdc-notched-outline--notched` selector and updates the notched outline path based off notchWidth and isRtl.
+`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` selector and updates the notched outline path based off notchWidth and isRtl.
 `closeNotch() => void` | Removes the outline notched selector.
-`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.

packages/mdc-notched-outline/_mixins.scss

@@ -22,31 +22,56 @@
 
 @import "@material/theme/mixins";
 @import "@material/shape/mixins";
-
-@mixin mdc-notched-outline-idle-color($color) {
-  .mdc-notched-outline__idle {
-    @include mdc-theme-prop(border-color, $color);
-  }
-}
+@import "@material/rtl/mixins";
+@import "./variables";
 
 @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-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true);
+
+    @if ($radius > $mdc-notched-outline-leading-width) {
+      width: $radius;
+    }
+  }
+
+  .mdc-notched-outline__trailing {
+    @include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true);
+  }
 }
 
-@mixin mdc-notched-outline-idle-shape-radius($radius, $rtl-reflexive: false) {
-  .mdc-notched-outline__idle {
-    @include mdc-shape-radius($radius, $rtl-reflexive);
+@mixin mdc-notched-outline-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
+  @include mdc-floating-label-float-position($positionY + $mdc-notched-outline-label-adjust, $positionX, 1);
+
+  .mdc-floating-label--float-above {
+    font-size: ($scale * 1rem);
+  }
+
+  // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.
+  &.mdc-notched-outline--upgraded,
+  .mdc-notched-outline--upgraded {
+    @include mdc-floating-label-float-position($positionY, $positionX, $scale);
+
+    // stylelint-disable-next-line no-descending-specificity
+    .mdc-floating-label--float-above {
+      font-size: 1rem;
+    }
   }
 }

packages/mdc-notched-outline/_variables.scss

@@ -26,3 +26,8 @@ $mdc-notched-outline-min-leading-stroke-edge-position: 12px;
 // The gap between the stroke end and floating label
 // Keep this in sync with constants.numbers.NOTCH_GUTTER_SIZE
 $mdc-notched-outline-notch-gutter-size: 4px;
+$mdc-notched-outline-leading-width: 12px;
+$mdc-notched-outline-padding: 4px;
+// This variable keeps the before/after JS label centered in the notch when the font-size is changed.
+$mdc-notched-outline-label-adjust: 14%;
+

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;