From 63f469601d8ffbdf2ecc3f3d86185b57b2a2b7cb Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 25 Jul 2018 15:22:31 -0700
Subject: [PATCH 1/6] WIP: closure

---
 package.json                      |   1 +
 packages/mdc-select/adapter.js    | 121 ++++++++++++++++++++++++++++++
 packages/mdc-select/constants.js  |   3 +
 packages/mdc-select/foundation.js |  35 ++++++++-
 packages/mdc-select/index.js      |  99 +++++++++++++++++++-----
 5 files changed, 239 insertions(+), 20 deletions(-)
 create mode 100644 packages/mdc-select/adapter.js

diff --git a/package.json b/package.json
index f6a64c93120..5e0ff4d943c 100644
--- a/package.json
+++ b/package.json
@@ -223,6 +223,7 @@
     "mdc-notched-outline",
     "mdc-radio",
     "mdc-ripple",
+    "mdc-select",
     "mdc-selection-control",
     "mdc-slider",
     "mdc-tab",
diff --git a/packages/mdc-select/adapter.js b/packages/mdc-select/adapter.js
new file mode 100644
index 00000000000..90be14c5c0d
--- /dev/null
+++ b/packages/mdc-select/adapter.js
@@ -0,0 +1,121 @@
+/**
+ * @license
+ * 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.
+ */
+
+/* eslint no-unused-vars: [2, {"args": "none"}] */
+
+/**
+ * Adapter for MDC Select. Provides an interface for managing
+ * - classes
+ * - dom
+ * - event handlers
+ *
+ * Additionally, provides type information for the adapter to the Closure
+ * compiler.
+ *
+ * Implement this adapter for your framework of choice to delegate updates to
+ * the component in your framework of choice. See architecture documentation
+ * for more details.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
+ *
+ * @record
+ */
+
+
+class MDCSelectAdapter {
+  /**
+   * Adds class to root element
+   * @param {string} className
+   */
+  addClass(className) {}
+
+  /**
+   * Removes a class from the root Element.
+   * @param {string} className
+   */
+  removeClass(className) {}
+
+  /**
+   * Returns true if the root element contains the given class name.
+   * @param {string} className
+   * @return {boolean}
+   */
+  hasClass(className) {}
+
+  /**
+   * Floats label determined based off of the shouldFloat argument.
+   * @param {boolean} shouldFloat
+   */
+  floatLabel(shouldFloat) {}
+
+  /**
+   * Activates the bottom line, showing a focused state.
+   */
+  activateBottomLine() {}
+
+  /**
+   * Deactivates the bottom line.
+   */
+  deactivateBottomLine() {}
+
+  /**
+   * Returns the selected value of the select element.
+   * @return {string}
+   */
+  getValue() {}
+
+  /**
+   * Returns true if the direction of the root element is set to RTL.
+   * @return {boolean}
+   */
+  isRtl() {}
+
+  /**
+   * Returns true if label element exists, false if it doesn't.
+   * @return {boolean}
+   */
+  hasLabel() {}
+
+  /**
+   * Only implement if label exists.
+   * Returns width of label in pixels.
+   * @return {number}
+   */
+  getLabelWidth() {}
+
+  /**
+   * Returns true if outline element exists, false if it doesn't.
+   * @return {boolean}
+   */
+  hasOutline() {}
+
+  /**
+   * Only implement if outline element exists.
+   * Updates SVG Path and outline element based on the
+   * label element width and RTL context.
+   * @param {number} labelWidth
+   * @param {boolean=} isRtl
+   */
+  notchOutline(labelWidth, isRtl) {}
+
+  /**
+   * Only implement if outline element exists.
+   * Closes notch in outline element.
+   */
+  closeOutline() {}
+}
+
+export default MDCSelectAdapter;
diff --git a/packages/mdc-select/constants.js b/packages/mdc-select/constants.js
index 36d42b64a17..d876208f6d1 100644
--- a/packages/mdc-select/constants.js
+++ b/packages/mdc-select/constants.js
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+/** @enum {string} */
 const cssClasses = {
   BOX: 'mdc-select--box',
   DISABLED: 'mdc-select--disabled',
@@ -20,6 +22,7 @@ const cssClasses = {
   OUTLINED: 'mdc-select--outlined',
 };
 
+/** @enum {string} */
 const strings = {
   CHANGE_EVENT: 'MDCSelect:change',
   LINE_RIPPLE_SELECTOR: '.mdc-line-ripple',
diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
index 1bb741c64d0..6c66e1b5056 100644
--- a/packages/mdc-select/foundation.js
+++ b/packages/mdc-select/foundation.js
@@ -15,23 +15,36 @@
  */
 
 import {MDCFoundation} from '@material/base/index';
+import MDCSelectAdapter from './adapter';
 import {cssClasses, strings, numbers} from './constants';
 
+/**
+ * @extends {MDCFoundation<!MDCSelectAdapter>}
+ * @final
+ */
 export default class MDCSelectFoundation extends MDCFoundation {
+  /** @return enum {string} */
   static get cssClasses() {
     return cssClasses;
   }
 
+  /** @return enum {number} */
   static get numbers() {
     return numbers;
   }
 
+  /** @return enum {string} */
   static get strings() {
     return strings;
   }
 
+  /**
+   * {@see MDCSelectAdapter} for typing information on parameters and return
+   * types.
+   * @return {!MDCSelectAdapter}
+   */
   static get defaultAdapter() {
-    return {
+    return /** @type {!MDCSelectAdapter} */ ({
       addClass: (/* className: string */) => {},
       removeClass: (/* className: string */) => {},
       hasClass: (/* className: string */) => false,
@@ -45,16 +58,25 @@ export default class MDCSelectFoundation extends MDCFoundation {
       hasOutline: () => {},
       notchOutline: () => {},
       closeOutline: () => {},
-    };
+    });
   }
 
+  /**
+   * @param {!MDCSelectAdapter} adapter
+   */
   constructor(adapter) {
     super(Object.assign(MDCSelectFoundation.defaultAdapter, adapter));
 
+    /** @private {function(): undefined} */
     this.focusHandler_ = (evt) => this.handleFocus_(evt);
+    /** @private {function(): undefined} */
     this.blurHandler_ = (evt) => this.handleBlur_(evt);
   }
 
+  /**
+   * Updates the styles of the select to show the disasbled state.
+   * @param {boolean} disabled
+   */
   updateDisabledStyle(disabled) {
     const {DISABLED} = MDCSelectFoundation.cssClasses;
     if (disabled) {
@@ -64,18 +86,27 @@ export default class MDCSelectFoundation extends MDCFoundation {
     }
   }
 
+  /**
+   * Handles value event changes.
+   */
   handleChange() {
     const optionHasValue = this.adapter_.getValue().length > 0;
     this.adapter_.floatLabel(optionHasValue);
     this.notchOutline(optionHasValue);
   }
 
+  /**
+   * Handles focus events from root element.
+   */
   handleFocus() {
     this.adapter_.floatLabel(true);
     this.notchOutline(true);
     this.adapter_.activateBottomLine();
   }
 
+  /**
+   * Handles blur events from root element.
+   */
   handleBlur() {
     this.handleChange();
     this.adapter_.deactivateBottomLine();
diff --git a/packages/mdc-select/index.js b/packages/mdc-select/index.js
index 9799ca0d706..3f0ea88d762 100644
--- a/packages/mdc-select/index.js
+++ b/packages/mdc-select/index.js
@@ -21,37 +21,77 @@ import {MDCRipple, MDCRippleFoundation} from '@material/ripple/index';
 import {MDCNotchedOutline} from '@material/notched-outline/index';
 
 import MDCSelectFoundation from './foundation';
+import MDCSelectAdapter from './adapter';
 import {cssClasses, strings} from './constants';
 
 export {MDCSelectFoundation};
 
 export class MDCSelect extends MDCComponent {
+  /**
+   * @param {...?} args
+   */
+  constructor(...args) {
+    super(...args);
+    /** @private {?Element} */
+    this.nativeControl_;
+    /** @type {?MDCRipple} */
+    this.ripple;
+    /** @private {?MDCLineRipple} */
+    this.lineRipple_;
+    /** @private {?MDCFloatingLabel} */
+    this.label_;
+    /** @private {?MDCNotchedOutline} */
+    this.outline_;
+  }
+
+  /**
+   * @param {!Element} root
+   * @return {!MDCSelect}
+   */
   static attachTo(root) {
     return new MDCSelect(root);
   }
 
+  /**
+   * @return {string} The value of the select.
+   */
   get value() {
     return this.nativeControl_.value;
   }
 
+  /**
+   * @param {string} value The value to set on the select.
+   */
   set value(value) {
     this.nativeControl_.value = value;
     this.foundation_.handleChange();
   }
 
+  /**
+   * @return {number} The selected index of the select.
+   */
   get selectedIndex() {
     return this.nativeControl_.selectedIndex;
   }
 
+  /**
+   * @param {number} selectedIndex The index of the option to be set on the select.
+   */
   set selectedIndex(selectedIndex) {
     this.nativeControl_.selectedIndex = selectedIndex;
     this.foundation_.handleChange();
   }
 
+  /**
+   * @return {boolean} True if the Select is disabled.
+   */
   get disabled() {
     return this.nativeControl_.disabled;
   }
 
+  /**
+   * @param {boolean} disabled Sets the Select disabled or enabled.
+   */
   set disabled(disabled) {
     this.nativeControl_.disabled = disabled;
     this.foundation_.updateDisabledStyle(disabled);
@@ -65,6 +105,15 @@ export class MDCSelect extends MDCComponent {
     this.foundation_.notchOutline(openNotch);
   }
 
+
+  /**
+   * @param {(function(!Element): !MDCLineRipple)=} lineRippleFactory A function which
+   * creates a new MDCLineRipple.
+   * @param {(function(!Element): !MDCFloatingLabel)=} labelFactory A function which
+   * creates a new MDCFloatingLabel.
+   * @param {(function(!Element): !MDCNotchedOutline)=} outlineFactory A function which
+   * creates a new MDCNotchedOutline.
+   */
   initialize(
     labelFactory = (el) => new MDCFloatingLabel(el),
     lineRippleFactory = (el) => new MDCLineRipple(el),
@@ -88,6 +137,10 @@ export class MDCSelect extends MDCComponent {
     }
   }
 
+  /**
+   * @private
+   * @return {!MDCRipple}
+   */
   initRipple_() {
     const adapter = Object.assign(MDCRipple.createAdapter(this), {
       registerInteractionHandler: (type, handler) => this.nativeControl_.addEventListener(type, handler),
@@ -97,6 +150,10 @@ export class MDCSelect extends MDCComponent {
     return new MDCRipple(this.root_, foundation);
   }
 
+  /**
+   * Initiliazes the Select's event listeners and internal state based
+   * on the environment's state.
+   */
   initialSyncWithDOM() {
     this.handleChange_ = () => this.foundation_.handleChange();
     this.handleFocus_ = () => this.foundation_.handleFocus();
@@ -129,32 +186,38 @@ export class MDCSelect extends MDCComponent {
     super.destroy();
   }
 
+  /**
+   * @return {!MDCSelectFoundation}
+   */
   getDefaultFoundation() {
-    return new MDCSelectFoundation((Object.assign({
-      addClass: (className) => this.root_.classList.add(className),
-      removeClass: (className) => this.root_.classList.remove(className),
-      hasClass: (className) => this.root_.classList.contains(className),
-      activateBottomLine: () => {
-        if (this.lineRipple_) {
-          this.lineRipple_.activate();
-        }
-      },
-      deactivateBottomLine: () => {
-        if (this.lineRipple_) {
-          this.lineRipple_.deactivate();
-        }
+    return new MDCSelectFoundation(
+      /** @type {!MDCSelectAdapter} */ (Object.assign({
+        addClass: (className) => this.root_.classList.add(className),
+        removeClass: (className) => this.root_.classList.remove(className),
+        hasClass: (className) => this.root_.classList.contains(className),
+        activateBottomLine: () => {
+          if (this.lineRipple_) {
+            this.lineRipple_.activate();
+          }
+        },
+        deactivateBottomLine: () => {
+          if (this.lineRipple_) {
+            this.lineRipple_.deactivate();
+          }
+        },
+        isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
+        getValue: () => this.nativeControl_.value,
       },
-      isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
-      getValue: () => this.nativeControl_.value,
-    },
-    this.getOutlineAdapterMethods_(),
-    this.getLabelAdapterMethods_()))
+      this.getOutlineAdapterMethods_(),
+      this.getLabelAdapterMethods_())
+      )
     );
   }
 
   /**
    * @return {!{
    *   notchOutline: function(number, boolean): undefined,
+   *   closeOutline: function(): undefined,
    *   hasOutline: function(): boolean,
    * }}
    */

From e63a2ed3c65eb8040c60163bacbc391ba071bccd Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 25 Jul 2018 17:10:25 -0700
Subject: [PATCH 2/6] WIP: Closure

---
 packages/mdc-ripple/adapter.js    |  1 +
 packages/mdc-select/adapter.js    |  3 +--
 packages/mdc-select/constants.js  |  1 +
 packages/mdc-select/foundation.js | 11 +++++------
 packages/mdc-select/index.js      |  9 ++++++---
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/mdc-ripple/adapter.js b/packages/mdc-ripple/adapter.js
index 3103503628c..4febae6f88e 100644
--- a/packages/mdc-ripple/adapter.js
+++ b/packages/mdc-ripple/adapter.js
@@ -38,6 +38,7 @@
  *
  * @record
  */
+
 class MDCRippleAdapter {
   /** @return {boolean} */
   browserSupportsCssVars() {}
diff --git a/packages/mdc-select/adapter.js b/packages/mdc-select/adapter.js
index 90be14c5c0d..dbc69c6d213 100644
--- a/packages/mdc-select/adapter.js
+++ b/packages/mdc-select/adapter.js
@@ -34,10 +34,9 @@
  * @record
  */
 
-
 class MDCSelectAdapter {
   /**
-   * Adds class to root element
+   * Adds class to root element.
    * @param {string} className
    */
   addClass(className) {}
diff --git a/packages/mdc-select/constants.js b/packages/mdc-select/constants.js
index d876208f6d1..9ad8a5add11 100644
--- a/packages/mdc-select/constants.js
+++ b/packages/mdc-select/constants.js
@@ -1,4 +1,5 @@
 /**
+ * @license
  * Copyright 2016 Google Inc. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
index 6c66e1b5056..cfce6b07f74 100644
--- a/packages/mdc-select/foundation.js
+++ b/packages/mdc-select/foundation.js
@@ -15,14 +15,16 @@
  */
 
 import {MDCFoundation} from '@material/base/index';
+/* eslint-disable no-unused-vars */
 import MDCSelectAdapter from './adapter';
+/* eslint-enable no-unused-vars */
 import {cssClasses, strings, numbers} from './constants';
 
 /**
  * @extends {MDCFoundation<!MDCSelectAdapter>}
  * @final
  */
-export default class MDCSelectFoundation extends MDCFoundation {
+class MDCSelectFoundation extends MDCFoundation {
   /** @return enum {string} */
   static get cssClasses() {
     return cssClasses;
@@ -66,11 +68,6 @@ export default class MDCSelectFoundation extends MDCFoundation {
    */
   constructor(adapter) {
     super(Object.assign(MDCSelectFoundation.defaultAdapter, adapter));
-
-    /** @private {function(): undefined} */
-    this.focusHandler_ = (evt) => this.handleFocus_(evt);
-    /** @private {function(): undefined} */
-    this.blurHandler_ = (evt) => this.handleBlur_(evt);
   }
 
   /**
@@ -131,3 +128,5 @@ export default class MDCSelectFoundation extends MDCFoundation {
     }
   }
 }
+
+export default MDCSelectFoundation;
diff --git a/packages/mdc-select/index.js b/packages/mdc-select/index.js
index 3f0ea88d762..0802bb4eaf7 100644
--- a/packages/mdc-select/index.js
+++ b/packages/mdc-select/index.js
@@ -24,9 +24,10 @@ import MDCSelectFoundation from './foundation';
 import MDCSelectAdapter from './adapter';
 import {cssClasses, strings} from './constants';
 
-export {MDCSelectFoundation};
-
-export class MDCSelect extends MDCComponent {
+/**
+ * @extends MDCComponent<!MDCSelectFoundation>
+ */
+class MDCSelect extends MDCComponent {
   /**
    * @param {...?} args
    */
@@ -260,3 +261,5 @@ export class MDCSelect extends MDCComponent {
     };
   }
 }
+
+export {MDCSelect, MDCSelectFoundation};

From 0ee43f889a2c08e2fde6c4072940bca5b99aede5 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 26 Jul 2018 10:06:58 -0700
Subject: [PATCH 3/6] WIP: update readme

---
 packages/mdc-select/README.md     | 13 ++++++++++---
 packages/mdc-select/foundation.js | 18 +++++++++---------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
index bed761707dc..3b5e17d5307 100644
--- a/packages/mdc-select/README.md
+++ b/packages/mdc-select/README.md
@@ -242,12 +242,19 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 
 | Method Signature | Description |
 | --- | --- |
-| `addClass(className: string) => void` | Adds a class to the root element. |
-| `removeClass(className: string) => void` | Removes a class from the root element. |
-| `floatLabel(value: boolean) => void` | Floats or defloats label. |
 | `activateBottomLine() => void` | Activates the bottom line component. |
+| `addClass(className: string) => void` | Adds a class to the root element. |
+| `closeOutline() => void` | Switches the notched outline element to its closed state. |
 | `deactivateBottomLine() => void` | Deactivates the bottom line component. |
+| `floatLabel(value: boolean) => void` | Floats or defloats label. |
+| `getLabelWidth() => number` | Returns the offsetWidth of the label element. |
 | `getValue() => string` | Returns the value selected on the `select` element. |
+| `hasClass(className: string) => boolean` | Returns true if the root element has the className in its classList. |
+| `hasLabel() => boolean` | Returns true if the `select` has a label associated with it. |
+| `hasOutlined() => boolean` | Returns true if the `select` has the notched outline element. |
+| `isRtl() => boolean` | Returns true if a parent of the root element is in RTL. |
+| `notchOutline(labelWidth: number, isRtl, boolean) => void` | Switches the notched outline element to its "notched state." |
+| `removeClass(className: string) => void` | Removes a class from the root element. |
 
 ### `MDCSelectFoundation`
 
diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
index cfce6b07f74..53707e0321f 100644
--- a/packages/mdc-select/foundation.js
+++ b/packages/mdc-select/foundation.js
@@ -47,19 +47,19 @@ class MDCSelectFoundation extends MDCFoundation {
    */
   static get defaultAdapter() {
     return /** @type {!MDCSelectAdapter} */ ({
-      addClass: (/* className: string */) => {},
-      removeClass: (/* className: string */) => {},
-      hasClass: (/* className: string */) => false,
-      floatLabel: (/* value: boolean */) => {},
       activateBottomLine: () => {},
+      addClass: (/* className: string */) => {},
+      closeOutline: () => {},
       deactivateBottomLine: () => {},
+      floatLabel: (/* value: boolean */) => {},
+      getLabelWidth: () => {},
       getValue: () => {},
+      hasClass: (/* className: string */) => false,
+      hasLabel: () => false,
+      hasOutline: () => false,
       isRtl: () => false,
-      hasLabel: () => {},
-      getLabelWidth: () => {},
-      hasOutline: () => {},
-      notchOutline: () => {},
-      closeOutline: () => {},
+      notchOutline: (/* labelWidth: number, isRtl: boolean */) => {},
+      removeClass: (/* className: string */) => {},
     });
   }
 

From 9967eb8f208dd422cbe92fe27962def523dd7128 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 26 Jul 2018 11:44:58 -0700
Subject: [PATCH 4/6] WIP: closure test

---
 packages/mdc-select/index.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/mdc-select/index.js b/packages/mdc-select/index.js
index 0802bb4eaf7..3d241d6f85d 100644
--- a/packages/mdc-select/index.js
+++ b/packages/mdc-select/index.js
@@ -43,6 +43,12 @@ class MDCSelect extends MDCComponent {
     this.label_;
     /** @private {?MDCNotchedOutline} */
     this.outline_;
+    /** @private {!Function} */
+    this.handleChange_;
+    /** @private {!Function} */
+    this.handleFocus_;
+    /** @private {!Function} */
+    this.handleBlur_;
   }
 
   /**

From 044830e8464820a357f879d992d162e198ae1eb6 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 26 Jul 2018 15:23:17 -0700
Subject: [PATCH 5/6] fix: PR updates

---
 packages/mdc-ripple/adapter.js    |  1 -
 packages/mdc-select/README.md     | 18 +++++++++---------
 packages/mdc-select/adapter.js    | 11 ++++-------
 packages/mdc-select/foundation.js | 18 +++++++++---------
 4 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/packages/mdc-ripple/adapter.js b/packages/mdc-ripple/adapter.js
index 4febae6f88e..3103503628c 100644
--- a/packages/mdc-ripple/adapter.js
+++ b/packages/mdc-ripple/adapter.js
@@ -38,7 +38,6 @@
  *
  * @record
  */
-
 class MDCRippleAdapter {
   /** @return {boolean} */
   browserSupportsCssVars() {}
diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
index 3b5e17d5307..219729524b9 100644
--- a/packages/mdc-select/README.md
+++ b/packages/mdc-select/README.md
@@ -242,19 +242,19 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 
 | Method Signature | Description |
 | --- | --- |
-| `activateBottomLine() => void` | Activates the bottom line component. |
 | `addClass(className: string) => void` | Adds a class to the root element. |
+| `removeClass(className: string) => void` | Removes a class from the root element. |
+| `hasClass(className: string) => boolean` | Returns true if the root element has the className in its classList. |
+| `getValue() => string` | Returns the value selected on the `select` element. |
 | `closeOutline() => void` | Switches the notched outline element to its closed state. |
-| `deactivateBottomLine() => void` | Deactivates the bottom line component. |
+| `notchOutline(labelWidth: number, isRtl, boolean) => void` | Switches the notched outline element to its "notched state." |
+| `hasOutline() => boolean` | Returns true if the `select` has the notched outline element. |
+| `isRtl() => boolean` | Returns true if a parent of the root element is in RTL. |
 | `floatLabel(value: boolean) => void` | Floats or defloats label. |
-| `getLabelWidth() => number` | Returns the offsetWidth of the label element. |
-| `getValue() => string` | Returns the value selected on the `select` element. |
-| `hasClass(className: string) => boolean` | Returns true if the root element has the className in its classList. |
 | `hasLabel() => boolean` | Returns true if the `select` has a label associated with it. |
-| `hasOutlined() => boolean` | Returns true if the `select` has the notched outline element. |
-| `isRtl() => boolean` | Returns true if a parent of the root element is in RTL. |
-| `notchOutline(labelWidth: number, isRtl, boolean) => void` | Switches the notched outline element to its "notched state." |
-| `removeClass(className: string) => void` | Removes a class from the root element. |
+| `getLabelWidth() => number` | Returns the offsetWidth of the label element. |
+| `activateBottomLine() => void` | Activates the bottom line component. |
+| `deactivateBottomLine() => void` | Deactivates the bottom line component. |
 
 ### `MDCSelectFoundation`
 
diff --git a/packages/mdc-select/adapter.js b/packages/mdc-select/adapter.js
index dbc69c6d213..6f56588ab16 100644
--- a/packages/mdc-select/adapter.js
+++ b/packages/mdc-select/adapter.js
@@ -42,7 +42,7 @@ class MDCSelectAdapter {
   addClass(className) {}
 
   /**
-   * Removes a class from the root Element.
+   * Removes a class from the root element.
    * @param {string} className
    */
   removeClass(className) {}
@@ -89,8 +89,7 @@ class MDCSelectAdapter {
   hasLabel() {}
 
   /**
-   * Only implement if label exists.
-   * Returns width of label in pixels.
+   * Returns width of label in pixels, if the label exists.
    * @return {number}
    */
   getLabelWidth() {}
@@ -102,17 +101,15 @@ class MDCSelectAdapter {
   hasOutline() {}
 
   /**
-   * Only implement if outline element exists.
    * Updates SVG Path and outline element based on the
-   * label element width and RTL context.
+   * label element width and RTL context, if the outline exists.
    * @param {number} labelWidth
    * @param {boolean=} isRtl
    */
   notchOutline(labelWidth, isRtl) {}
 
   /**
-   * Only implement if outline element exists.
-   * Closes notch in outline element.
+   * Closes notch in outline element, if the outline exists.
    */
   closeOutline() {}
 }
diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
index 53707e0321f..366e06b2f1c 100644
--- a/packages/mdc-select/foundation.js
+++ b/packages/mdc-select/foundation.js
@@ -47,19 +47,19 @@ class MDCSelectFoundation extends MDCFoundation {
    */
   static get defaultAdapter() {
     return /** @type {!MDCSelectAdapter} */ ({
-      activateBottomLine: () => {},
       addClass: (/* className: string */) => {},
-      closeOutline: () => {},
-      deactivateBottomLine: () => {},
-      floatLabel: (/* value: boolean */) => {},
-      getLabelWidth: () => {},
-      getValue: () => {},
+      removeClass: (/* className: string */) => {},
       hasClass: (/* className: string */) => false,
       hasLabel: () => false,
-      hasOutline: () => false,
+      floatLabel: (/* value: boolean */) => {},
+      getLabelWidth: () => {},
       isRtl: () => false,
+      getValue: () => {},
       notchOutline: (/* labelWidth: number, isRtl: boolean */) => {},
-      removeClass: (/* className: string */) => {},
+      closeOutline: () => {},
+      hasOutline: () => false,
+      activateBottomLine: () => {},
+      deactivateBottomLine: () => {},
     });
   }
 
@@ -84,7 +84,7 @@ class MDCSelectFoundation extends MDCFoundation {
   }
 
   /**
-   * Handles value event changes.
+   * Handles value changes, via change event or programmatic updates.
    */
   handleChange() {
     const optionHasValue = this.adapter_.getValue().length > 0;

From 1776e5cef653c79f4b79a785d75eaa8a8a6d26e6 Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@google.com>
Date: Mon, 30 Jul 2018 11:46:56 -0400
Subject: [PATCH 6/6] WIP Consistency and typo fixes

---
 packages/mdc-select/README.md     | 12 ++++++------
 packages/mdc-select/adapter.js    | 12 ++++++------
 packages/mdc-select/foundation.js | 10 +++++-----
 packages/mdc-select/index.js      | 27 ++++++++++++---------------
 4 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
index 219729524b9..238fdec6c85 100644
--- a/packages/mdc-select/README.md
+++ b/packages/mdc-select/README.md
@@ -245,16 +245,16 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 | `addClass(className: string) => void` | Adds a class to the root element. |
 | `removeClass(className: string) => void` | Removes a class from the root element. |
 | `hasClass(className: string) => boolean` | Returns true if the root element has the className in its classList. |
+| `activateBottomLine() => void` | Activates the bottom line component. |
+| `deactivateBottomLine() => void` | Deactivates the bottom line component. |
 | `getValue() => string` | Returns the value selected on the `select` element. |
-| `closeOutline() => void` | Switches the notched outline element to its closed state. |
-| `notchOutline(labelWidth: number, isRtl, boolean) => void` | Switches the notched outline element to its "notched state." |
-| `hasOutline() => boolean` | Returns true if the `select` has the notched outline element. |
 | `isRtl() => boolean` | Returns true if a parent of the root element is in RTL. |
-| `floatLabel(value: boolean) => void` | Floats or defloats label. |
 | `hasLabel() => boolean` | Returns true if the `select` has a label associated with it. |
+| `floatLabel(value: boolean) => void` | Floats or defloats label. |
 | `getLabelWidth() => number` | Returns the offsetWidth of the label element. |
-| `activateBottomLine() => void` | Activates the bottom line component. |
-| `deactivateBottomLine() => void` | Deactivates the bottom line component. |
+| `hasOutline() => boolean` | Returns true if the `select` has the notched outline element. |
+| `notchOutline(labelWidth: number, isRtl, boolean) => void` | Switches the notched outline element to its "notched state." |
+| `closeOutline() => void` | Switches the notched outline element to its closed state. |
 
 ### `MDCSelectFoundation`
 
diff --git a/packages/mdc-select/adapter.js b/packages/mdc-select/adapter.js
index 6f56588ab16..faec916dfc4 100644
--- a/packages/mdc-select/adapter.js
+++ b/packages/mdc-select/adapter.js
@@ -54,12 +54,6 @@ class MDCSelectAdapter {
    */
   hasClass(className) {}
 
-  /**
-   * Floats label determined based off of the shouldFloat argument.
-   * @param {boolean} shouldFloat
-   */
-  floatLabel(shouldFloat) {}
-
   /**
    * Activates the bottom line, showing a focused state.
    */
@@ -88,6 +82,12 @@ class MDCSelectAdapter {
    */
   hasLabel() {}
 
+  /**
+   * Floats label determined based off of the shouldFloat argument.
+   * @param {boolean} shouldFloat
+   */
+  floatLabel(shouldFloat) {}
+
   /**
    * Returns width of label in pixels, if the label exists.
    * @return {number}
diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
index 366e06b2f1c..d4742685fb9 100644
--- a/packages/mdc-select/foundation.js
+++ b/packages/mdc-select/foundation.js
@@ -50,16 +50,16 @@ class MDCSelectFoundation extends MDCFoundation {
       addClass: (/* className: string */) => {},
       removeClass: (/* className: string */) => {},
       hasClass: (/* className: string */) => false,
+      activateBottomLine: () => {},
+      deactivateBottomLine: () => {},
+      getValue: () => {},
+      isRtl: () => false,
       hasLabel: () => false,
       floatLabel: (/* value: boolean */) => {},
       getLabelWidth: () => {},
-      isRtl: () => false,
-      getValue: () => {},
+      hasOutline: () => false,
       notchOutline: (/* labelWidth: number, isRtl: boolean */) => {},
       closeOutline: () => {},
-      hasOutline: () => false,
-      activateBottomLine: () => {},
-      deactivateBottomLine: () => {},
     });
   }
 
diff --git a/packages/mdc-select/index.js b/packages/mdc-select/index.js
index 3d241d6f85d..e491bd3ea86 100644
--- a/packages/mdc-select/index.js
+++ b/packages/mdc-select/index.js
@@ -90,14 +90,14 @@ class MDCSelect extends MDCComponent {
   }
 
   /**
-   * @return {boolean} True if the Select is disabled.
+   * @return {boolean} True if the select is disabled.
    */
   get disabled() {
     return this.nativeControl_.disabled;
   }
 
   /**
-   * @param {boolean} disabled Sets the Select disabled or enabled.
+   * @param {boolean} disabled Sets the select disabled or enabled.
    */
   set disabled(disabled) {
     this.nativeControl_.disabled = disabled;
@@ -114,12 +114,9 @@ class MDCSelect extends MDCComponent {
 
 
   /**
-   * @param {(function(!Element): !MDCLineRipple)=} lineRippleFactory A function which
-   * creates a new MDCLineRipple.
-   * @param {(function(!Element): !MDCFloatingLabel)=} labelFactory A function which
-   * creates a new MDCFloatingLabel.
-   * @param {(function(!Element): !MDCNotchedOutline)=} outlineFactory A function which
-   * creates a new MDCNotchedOutline.
+   * @param {(function(!Element): !MDCLineRipple)=} lineRippleFactory A function which creates a new MDCLineRipple.
+   * @param {(function(!Element): !MDCFloatingLabel)=} labelFactory A function which creates a new MDCFloatingLabel.
+   * @param {(function(!Element): !MDCNotchedOutline)=} outlineFactory A function which creates a new MDCNotchedOutline.
    */
   initialize(
     labelFactory = (el) => new MDCFloatingLabel(el),
@@ -158,7 +155,7 @@ class MDCSelect extends MDCComponent {
   }
 
   /**
-   * Initiliazes the Select's event listeners and internal state based
+   * Initializes the select's event listeners and internal state based
    * on the environment's state.
    */
   initialSyncWithDOM() {
@@ -202,6 +199,8 @@ class MDCSelect extends MDCComponent {
         addClass: (className) => this.root_.classList.add(className),
         removeClass: (className) => this.root_.classList.remove(className),
         hasClass: (className) => this.root_.classList.contains(className),
+        getValue: () => this.nativeControl_.value,
+        isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
         activateBottomLine: () => {
           if (this.lineRipple_) {
             this.lineRipple_.activate();
@@ -212,8 +211,6 @@ class MDCSelect extends MDCComponent {
             this.lineRipple_.deactivate();
           }
         },
-        isRtl: () => window.getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
-        getValue: () => this.nativeControl_.value,
       },
       this.getOutlineAdapterMethods_(),
       this.getLabelAdapterMethods_())
@@ -223,13 +220,14 @@ class MDCSelect extends MDCComponent {
 
   /**
    * @return {!{
+   *   hasOutline: function(): boolean,
    *   notchOutline: function(number, boolean): undefined,
    *   closeOutline: function(): undefined,
-   *   hasOutline: function(): boolean,
    * }}
    */
   getOutlineAdapterMethods_() {
     return {
+      hasOutline: () => !!this.outline_,
       notchOutline: (labelWidth, isRtl) => {
         if (this.outline_) {
           this.outline_.notch(labelWidth, isRtl);
@@ -240,25 +238,24 @@ class MDCSelect extends MDCComponent {
           this.outline_.closeNotch();
         }
       },
-      hasOutline: () => !!this.outline_,
     };
   }
 
   /**
    * @return {!{
-   *   floatLabel: function(boolean): undefined,
    *   hasLabel: function(): boolean,
+   *   floatLabel: function(boolean): undefined,
    *   getLabelWidth: function(): number,
    * }}
    */
   getLabelAdapterMethods_() {
     return {
+      hasLabel: () => !!this.label_,
       floatLabel: (shouldFloat) => {
         if (this.label_) {
           this.label_.float(shouldFloat);
         }
       },
-      hasLabel: () => !!this.label_,
       getLabelWidth: () => {
         if (this.label_) {
           return this.label_.getWidth();