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

) BREAKING CHANGE: The notched outline has been changed from using an SVG for the outline to using 3 div elements. This approach resolves initial rendering issues as well as inconsistencies between the different types of outlines. Please refer to the Readme or the screenshot test pages for details and examples.
material-components · Dec 4, 2018 · 9741233 · 9741233
1 parent 77195bb
commit 9741233
Show file tree

Hide file tree

Showing 116 changed files with 2,056 additions and 1,779 deletions.
diff --git a/demos/text-field.html b/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>

diff --git a/demos/theme/index.html b/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">

diff --git a/packages/mdc-floating-label/_variables.scss b/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;
diff --git a/packages/mdc-floating-label/constants.js b/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};
diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -36,7 +36,6 @@
     @include mdc-typography(subtitle1);
 
     position: absolute;
-    bottom: 8px;
     /* @noflip */
     left: 0;
     /* @noflip */

diff --git a/packages/mdc-notched-outline/README.md b/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.
diff --git a/packages/mdc-notched-outline/_functions.scss b/packages/mdc-notched-outline/_functions.scss
diff --git a/packages/mdc-notched-outline/_mixins.scss b/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;
+    }
   }
 }
diff --git a/packages/mdc-notched-outline/_variables.scss b/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%;
+
diff --git a/packages/mdc-notched-outline/adapter.js b/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;