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

demos/text-field.html

@@ -140,12 +140,12 @@ <h2>Outlined Text Field</h2>
             <input type="text" id="tf-outlined-input" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
             <label for="tf-outlined-input" class="mdc-floating-label">Your Name</label>
-            <div class="mdc-text-field__outline">
+            <div class="mdc-notched-outline">
               <svg>
-                <path class="mdc-text-field__outline-path"/>
+                <path class="mdc-notched-outline__path"/>
               </svg>
             </div>
-            <div class="mdc-text-field__idle-outline"></div>
+            <div class="mdc-notched-outline__idle"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
              id="name-validation-message">
@@ -263,12 +263,12 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <i class="material-icons mdc-text-field__icon" tabindex="0">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-text-field__outline">
+            <div class="mdc-notched-outline">
               <svg>
-                <path class="mdc-text-field__outline-path"/>
+                <path class="mdc-notched-outline__path"/>
               </svg>
             </div>
-            <div class="mdc-text-field__idle-outline"></div>
+            <div class="mdc-notched-outline__idle"></div>
           </div>
         </div>
         <div id="demo-tf-outlined-trailing-wrapper">
@@ -277,12 +277,12 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <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">delete</i>
-            <div class="mdc-text-field__outline">
+            <div class="mdc-notched-outline">
               <svg>
-                <path class="mdc-text-field__outline-path"/>
+                <path class="mdc-notched-outline__path"/>
               </svg>
             </div>
-            <div class="mdc-text-field__idle-outline"></div>
+            <div class="mdc-notched-outline__idle"></div>
           </div>
         </div>
         <div>

package.json

@@ -140,6 +140,7 @@
           "linear-progress",
           "list",
           "menu",
+          "notched-outline",
           "radio",
           "ripple",
           "rtl",
@@ -175,6 +176,7 @@
     "mdc-icon-toggle",
     "mdc-line-ripple",
     "mdc-menu",
+    "mdc-notched-outline",
     "mdc-radio",
     "mdc-ripple",
     "mdc-selection-control",

packages/material-components-web/index.js

@@ -27,6 +27,7 @@ import * as iconToggle from '@material/icon-toggle/index';
 import * as linearProgress from '@material/linear-progress/index';
 import * as lineRipple from '@material/line-ripple/index';
 import * as menu from '@material/menu/index';
+import * as notchedOutline from '@material/notched-outline/index';
 import * as radio from '@material/radio/index';
 import * as ripple from '@material/ripple/index';
 import * as select from '@material/select/index';
@@ -52,6 +53,7 @@ autoInit.register('MDCGridList', gridList.MDCGridList);
 autoInit.register('MDCIconToggle', iconToggle.MDCIconToggle);
 autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
 autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
+autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
 autoInit.register('MDCRadio', radio.MDCRadio);
 autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
 autoInit.register('MDCTab', tabs.MDCTab);
@@ -78,6 +80,7 @@ export {
   lineRipple,
   linearProgress,
   menu,
+  notchedOutline,
   radio,
   ripple,
   select,

packages/material-components-web/material-components-web.scss

@@ -32,6 +32,7 @@
 @import "@material/linear-progress/mdc-linear-progress";
 @import "@material/list/mdc-list";
 @import "@material/menu/mdc-menu";
+@import "@material/notched-outline/mdc-notched-outline";
 @import "@material/radio/mdc-radio";
 @import "@material/ripple/mdc-ripple";
 @import "@material/select/mdc-select";

packages/material-components-web/package.json

@@ -34,6 +34,7 @@
     "@material/linear-progress": "^0.30.0",
     "@material/list": "^0.32.0",
     "@material/menu": "^0.31.0",
+    "@material/notched-outline": "0.0.0",
     "@material/radio": "^0.32.0",
     "@material/ripple": "^0.32.0",
     "@material/rtl": "^0.30.0",

packages/mdc-notched-outline/README.md

@@ -0,0 +1,103 @@
+<!--docs:
+title: "Notched Outline"
+layout: detail
+section: components
+excerpt: "The notched outline is a border around either a text field or select element"
+iconId: text_field
+path: /catalog/input-controls/notched-outline
+-->
+
+# Notched Outline
+
+The outline is a border around all sides of either a text field or select component. This is used for the Outlined variant of either a Text Field or Select.
+
+## Design & API Documentation
+
+<ul class="icon-list">
+  <li class="icon-list-item icon-list-item--spec">
+    <a href="https://material.io/guidelines/components/text-fields.html#text-fields-field-variations">Material Design guidelines: Text Field Variations</a>
+  </li>
+</ul>
+
+## Usage
+
+### HTML Structure
+
+```html
+<div class="mdc-notched-outline">
+  <svg>
+    <path class="mdc-notched-outline__path"/>
+  </svg>
+</div>
+<div class="mdc-notched-outline__idle"></div>
+```
+
+> For usage within a text field see [here](../mdc-textfield/README.md#outlined/).
+
+### CSS Classes
+
+CSS Class | Description
+--- | ---
+`mdc-notched-outline` | Mandatory. Container for the SVG of the notched outline path.
+`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.
+
+### 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-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:
+> 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-line-ripple-parent">
+>   <div class="mdc-notched-outline foo-line-ripple">
+>     <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-line-ripple CSS selector:
+> ```scss
+> .foo-line-ripple {
+>   @include mdc-notched-outline-color($fooColor);
+> }
+> ```
+> But in order to customize any "idle" part of the notched-outline, you must use the .foo-line-ripple-parent CSS selector:
+> ```scss
+> .foo-line-ripple-parent {
+>   @include mdc-notched-outline-idle-color($fooColor);
+> }
+> ```
+
+### `MDCNotchedOutline`
+
+Method Signature | Description
+--- | ---
+`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG of the outline element with a notch calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.
+
+### `MDCNotchedOutlineAdapter`
+
+Method Signature | Description
+--- | ---
+`getWidth() => number` | Returns the width of the outline element.
+`getHeight() => number` | Returns the height of the outline element.
+`setOutlinePathAttr(value: string) => void` | Sets the "d" attribute of the outline element's SVG path.
+`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of a given css `propertyName`.
+
+### `MDCNotchedOutlineFoundation`
+
+Method Signature | Description
+--- | ---
+`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given notchWidth and the RTL context.
+
+
+[//]: <> (TODO(mattgoo): add how to hide/show notch in outline)

packages/mdc-notched-outline/_mixins.scss

@@ -0,0 +1,45 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/theme/mixins";
+
+@mixin mdc-notched-outline-idle-color($color) {
+  .mdc-notched-outline__idle {
+    @include mdc-theme-prop(border-color, $color);
+  }
+}
+
+@mixin mdc-notched-outline-color($color) {
+  .mdc-notched-outline__path {
+    @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/outline/adapter.js → packages/mdc-notched-outline/adapter.js

@@ -18,16 +18,16 @@
 /* eslint no-unused-vars: [2, {"args": "none"}] */
 
 /**
- * Adapter for MDC Text Field Outline.
+ * Adapter for MDC Notched Outline.
  *
  * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Text Field outline into your framework. See
+ * adapter to integrate the Notched Outline into your framework. See
  * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
  * for more information.
  *
  * @record
  */
-class MDCTextFieldOutlineAdapter {
+class MDCNotchedOutlineAdapter {
   /**
    * Returns the width of the root element.
    * @return {number}
@@ -55,4 +55,4 @@ class MDCTextFieldOutlineAdapter {
   getIdleOutlineStyleValue(propertyName) {}
 }
 
-export default MDCTextFieldOutlineAdapter;
+export default MDCNotchedOutlineAdapter;

packages/mdc-textfield/outline/constants.js → packages/mdc-notched-outline/constants.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2016 Google Inc. All Rights Reserved.
+ * Copyright 2018 Google Inc. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,8 +17,8 @@
 
 /** @enum {string} */
 const strings = {
-  PATH_SELECTOR: '.mdc-text-field__outline-path',
-  IDLE_OUTLINE_SELECTOR: '.mdc-text-field__idle-outline',
+  PATH_SELECTOR: '.mdc-notched-outline__path',
+  IDLE_OUTLINE_SELECTOR: '.mdc-notched-outline__idle',
 };
 
 export {strings};

packages/mdc-textfield/outline/foundation.js → packages/mdc-notched-outline/foundation.js

@@ -16,26 +16,26 @@
  */
 
 import MDCFoundation from '@material/base/foundation';
-import MDCTextFieldOutlineAdapter from './adapter';
+import MDCNotchedOutlineAdapter from './adapter';
 import {strings} from './constants';
 
 /**
- * @extends {MDCFoundation<!MDCTextFieldOutlineAdapter>}
+ * @extends {MDCFoundation<!MDCNotchedOutlineAdapter>}
  * @final
  */
-class MDCTextFieldOutlineFoundation extends MDCFoundation {
+class MDCNotchedOutlineFoundation extends MDCFoundation {
   /** @return enum {string} */
   static get strings() {
     return strings;
   }
 
   /**
-   * {@see MDCTextFieldOutlineAdapter} for typing information on parameters and return
+   * {@see MDCNotchedOutlineAdapter} for typing information on parameters and return
    * types.
-   * @return {!MDCTextFieldOutlineAdapter}
+   * @return {!MDCNotchedOutlineAdapter}
    */
   static get defaultAdapter() {
-    return /** @type {!MDCTextFieldOutlineAdapter} */ ({
+    return /** @type {!MDCNotchedOutlineAdapter} */ ({
       getWidth: () => {},
       getHeight: () => {},
       setOutlinePathAttr: () => {},
@@ -44,19 +44,19 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
   }
 
   /**
-   * @param {!MDCTextFieldOutlineAdapter} adapter
+   * @param {!MDCNotchedOutlineAdapter} adapter
    */
   constructor(adapter) {
-    super(Object.assign(MDCTextFieldOutlineFoundation.defaultAdapter, adapter));
+    super(Object.assign(MDCNotchedOutlineFoundation.defaultAdapter, adapter));
   }
 
   /**
-   * Updates the SVG path of the focus outline element based on the given width of the
-   * label element and the RTL context.
-   * @param {number} labelWidth
+   * Updates the SVG path of the focus outline element based on the notchWidth
+   * and the RTL context.
+   * @param {number} notchWidth
    * @param {boolean=} isRtl
    */
-  updateSvgPath(labelWidth, isRtl = false) {
+  updateSvgPath(notchWidth, isRtl = false) {
     // 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');
@@ -65,7 +65,7 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
     const height = this.adapter_.getHeight();
     const cornerWidth = radius + 1.2;
     const leadingStrokeLength = Math.abs(11 - cornerWidth);
-    const paddedLabelWidth = labelWidth + 8;
+    const paddedNotchWidth = notchWidth + 8;
 
     // The right, bottom, and left sides of the outline follow the same SVG path.
     const pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius
@@ -78,19 +78,19 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
 
     let path;
     if (!isRtl) {
-      path = 'M' + (cornerWidth + leadingStrokeLength + paddedLabelWidth) + ',' + 1
-        + 'h' + (width - (2 * cornerWidth) - paddedLabelWidth - leadingStrokeLength)
+      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) - paddedLabelWidth - leadingStrokeLength);
+        + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength);
     }
 
     this.adapter_.setOutlinePathAttr(path);
   }
 }
 
-export default MDCTextFieldOutlineFoundation;
+export default MDCNotchedOutlineFoundation;