select(refactor): decouple label from select

demos/select.scss

@@ -17,12 +17,13 @@
 @import "./common";
 @import "../packages/mdc-list/mdc-list";
 @import "../packages/mdc-menu/mdc-menu";
+@import "../packages/mdc-select/label/mixins";
 @import "../packages/mdc-select/mdc-select";
 
 // stylelint-disable selector-class-pattern
 .demo-select-custom-colors {
   @include mdc-select-ink-color(blue);
-  @include mdc-select-label-color(rgba(blue, .6));
+  @include mdc-select-label-color(blue, .6);
   @include mdc-select-bottom-line-color(rgba(blue, .5));
 
   // Focused colors

packages/mdc-select/README.md

@@ -226,7 +226,7 @@ Mixin | Description
 --- | ---
 `mdc-select-ink-color($color)` | Customizes the color of the selected item displayed in the select.
 `mdc-select-container-fill-color($color)` | Customizes the background color of the select.
-`mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state. This mixin is only used for the JS version of the select.
+`mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state.
 `mdc-select-focused-label-color($color, $opacity: 0.87)` | Customizes the label color of the select when focused. Changing opacity for the label when floating is optional.
 `mdc-select-bottom-line-color($color)` | Customizes the color of the default bottom line of the select.
 `mdc-select-focused-bottom-line-color($color)` | Customizes the color of the bottom line of the select when focused.
@@ -280,6 +280,26 @@ The `menuFactory` function is passed an `HTMLElement` and is expected to return
 instance attached to that element. This is mostly used for testing purposes, but it's there if you
 need it nonetheless.
 
+#### Instantiating using a custom `MDCSelectLabel` component.
+
+`MDCSelect` controls an [MDCSelectLabel](./label) instance under the hood in order to display
+its options. If you'd like to instantiate a custom label instance, you can provide an optional 4th
+`labelFactory` argument to `MDCSelect`'s constructor.
+
+```js
+const labelFactory = labelEl => {
+  const label = new MDCSelectLabel(labelEl);
+  // Do stuff with label...
+  return label;
+};
+const selectEl = document.querySelector('.mdc-select');
+const select = new MDCSelect(selectEl, /* foundation */ undefined, undefined, labelFactory);
+```
+
+The `labelFactory` function is passed an `HTMLElement` and is expected to return an `MDCSelectLabel`
+instance attached to that element. This is mostly used for testing purposes, but it's there if you
+need it nonetheless.
+
 ## Using the foundation class
 
 MDC Select ships with a foundation class that framework authors can use to integrate MDC Select
@@ -312,8 +332,7 @@ within `componentDidUpdate`.
 | --- | --- |
 | `addClass(className: string) => void` | Adds a class to the root element. |
 | `removeClass(className: string) => void` | Removes a class from the root element. |
-| `addClassToLabel(className: string) => void` | Adds a class to the label |
-| `removeClassFromLabel(className: string) => void` | Removes a class from the label |
+| `floatLabel(value: string) => void` | Float or defloats label as necessary |
 | `addClassToBottomLine(className: string) => void` | Adds a class to the bottom line |
 | `removeClassFromBottomLine(className: string) => void` | Removes a class from the bottom line |
 | `setBottomLineAttr(attr: string, value: string) => void` | Adds an attribute to the bottom line |

packages/mdc-select/_mixins.scss

@@ -14,6 +14,9 @@
 // limitations under the License.
 //
 
+@import "@material/theme/mixins";
+@import "./label/mixins";
+
 // Public
 
 @mixin mdc-select-ink-color($color) {
@@ -28,15 +31,9 @@
   }
 }
 
-@mixin mdc-select-label-color($color) {
-  &:not(.mdc-select--disabled) {
-    @include mdc-select-label-color_($color);
-  }
-}
-
 @mixin mdc-select-focused-label-color($color, $opacity: .87) {
-  &:not(.mdc-select--disabled) {
-    @include mdc-select-focused-label-color_($color, $opacity);
+  &:not(.mdc-select--disabled) .mdc-select__surface:focus {
+    @include mdc-select-floating-label-color($color, $opacity);
   }
 }
 
@@ -73,31 +70,18 @@
   }
 }
 
-@mixin mdc-select-label-color_($color) {
-  .mdc-select__label {
-    @include mdc-theme-prop(color, $color);
-  }
-}
-
-@mixin mdc-select-focused-label-color_($color, $opacity: .87) {
-  .mdc-select__surface:focus .mdc-select__label {
-    @include mdc-theme-prop(color, $color);
-  }
-
-  // Separate parameter is used for opacity, because opacity is only applied when the
-  // label is floating, but the label is the same color when the select is focused
-  // but an option has not been selected.
-  .mdc-select__surface:focus .mdc-select__label--float-above {
-    opacity: $opacity;
-  }
-}
-
 @mixin mdc-select-bottom-line-color_($color) {
   .mdc-select__bottom-line {
     @include mdc-theme-prop(background-color, $color);
   }
 }
 
+@mixin mdc-select-label-color($color, $opacity: 1) {
+  &:not(.mdc-select--disabled) {
+    @include mdc-select-floating-label-color($color, $opacity);
+  }
+}
+
 @mixin mdc-select-focused-bottom-line-color_($color) {
   @include mdc-select-focused-bottom-line_ {
     @include mdc-theme-prop(background-color, $color);

packages/mdc-select/_variables.scss

@@ -0,0 +1,21 @@
+//
+// Copyright 2017 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/animation/variables";
+
+$mdc-select-arrow-padding: 26px;
+$mdc-select-label-padding: 16px;
+$mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timing-function;

packages/mdc-select/constants.js

@@ -18,7 +18,6 @@ export const cssClasses = {
   BOTTOM_LINE_ACTIVE: 'mdc-select__bottom-line--active',
   BOX: 'mdc-select--box',
   DISABLED: 'mdc-select--disabled',
-  LABEL_FLOAT_ABOVE: 'mdc-select__label--float-above',
   OPEN: 'mdc-select--open',
   ROOT: 'mdc-select',
   SCROLL_LOCK: 'mdc-select-scroll-lock',

packages/mdc-select/foundation.js

@@ -37,8 +37,7 @@ export default class MDCSelectFoundation extends MDCFoundation {
     return {
       addClass: (/* className: string */) => {},
       removeClass: (/* className: string */) => {},
-      addClassToLabel: (/* className: string */) => {},
-      removeClassFromLabel: (/* className: string */) => {},
+      floatLabel: (/* value: boolean */) => {},
       addClassToBottomLine: (/* className: string */) => {},
       removeClassFromBottomLine: (/* className: string */) => {},
       setBottomLineAttr: (/* attr: string, value: string */) => {},
@@ -153,9 +152,9 @@ export default class MDCSelectFoundation extends MDCFoundation {
     if (this.selectedIndex_ >= 0) {
       selectedTextContent = this.adapter_.getTextForOptionAtIndex(this.selectedIndex_).trim();
       this.adapter_.setAttrForOptionAtIndex(this.selectedIndex_, 'aria-selected', 'true');
-      this.adapter_.addClassToLabel(cssClasses.LABEL_FLOAT_ABOVE);
+      this.adapter_.floatLabel(true);
     } else {
-      this.adapter_.removeClassFromLabel(cssClasses.LABEL_FLOAT_ABOVE);
+      this.adapter_.floatLabel(false);
     }
     this.adapter_.setSelectedTextContent(selectedTextContent);
   }

packages/mdc-select/index.js

@@ -17,6 +17,7 @@
 import {MDCComponent} from '@material/base/index';
 import {MDCRipple} from '@material/ripple/index';
 import {MDCMenu} from '@material/menu/index';
+import {MDCSelectLabel} from './label/index';
 
 import MDCSelectFoundation from './foundation';
 import {strings} from './constants';
@@ -70,9 +71,14 @@ export class MDCSelect extends MDCComponent {
     return null;
   }
 
-  initialize(menuFactory = (el) => new MDCMenu(el)) {
+  initialize(
+    menuFactory = (el) => new MDCMenu(el),
+    labelFactory = (el) => new MDCSelectLabel(el)) {
     this.surface_ = this.root_.querySelector(strings.SURFACE_SELECTOR);
-    this.label_ = this.root_.querySelector(strings.LABEL_SELECTOR);
+    const labelElement = this.root_.querySelector(strings.LABEL_SELECTOR);
+    if (labelElement) {
+      this.label_ = labelFactory(labelElement);
+    }
     this.bottomLine_ = this.root_.querySelector(strings.BOTTOM_LINE_SELECTOR);
     this.selectedText_ = this.root_.querySelector(strings.SELECTED_TEXT_SELECTOR);
     this.menuEl_ = this.root_.querySelector(strings.MENU_SELECTOR);
@@ -85,8 +91,11 @@ export class MDCSelect extends MDCComponent {
     return new MDCSelectFoundation({
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
-      addClassToLabel: (className) => this.label_.classList.add(className),
-      removeClassFromLabel: (className) => this.label_.classList.remove(className),
+      floatLabel: (value) => {
+        if (this.label_) {
+          this.label_.float(value);
+        }
+      },
       addClassToBottomLine: (className) => this.bottomLine_.classList.add(className),
       removeClassFromBottomLine: (className) => this.bottomLine_.classList.remove(className),
       setBottomLineAttr: (attr, value) => this.bottomLine_.setAttribute(attr, value),

packages/mdc-select/label/README.md

@@ -0,0 +1,97 @@
+<!--docs:
+title: "Select Label"
+layout: detail
+section: components
+iconId: menu
+path: /catalog/input-controls/select-menus/
+-->
+
+# Select Label
+
+<!--<div class="article__asset">
+  <a class="article__asset-link"
+     href="https://material-components-web.appspot.com/select.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/selects.png" width="376" alt="Select screenshot">
+  </a>
+</div>-->
+
+Select labels display the type of input a field requires. Every select should have a label. Labels are aligned with the input line and always visible. They can be resting (when a select is inactive and empty) or floating. The label is a text caption or description for the 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">Material Design guidelines: Text Fields</a>
+  </li>
+  <li class="icon-list-item icon-list-item--spec">
+    <a href="https://material.io/guidelines/components/menus.html">Material Design guidelines: Menus</a>
+  </li>
+  <li class="icon-list-item icon-list-item--link">
+    <a href="https://material-components-web.appspot.com/select.html">Demo</a>
+  </li>
+</ul>
+
+## Usage
+
+### HTML Structure
+
+```html
+<div class="mdc-select__label" for="my-select-id">Hint text</div>
+```
+
+### Usage within `mdc-select`
+
+```html
+<div class="mdc-select" role="listbox">
+  <div class="mdc-select__surface" tabindex="0">
+    <div class="mdc-select__label">Pick a Food Group</div>
+    <div class="mdc-select__selected-text"></div>
+    <div class="mdc-select__bottom-line"></div>
+  </div>
+  <div class="mdc-menu mdc-select__menu">
+    <ul class="mdc-list mdc-menu__items">
+      <li class="mdc-list-item" role="option" tabindex="0">
+        Dairy
+      </li>
+      <li class="mdc-list-item" role="option" tabindex="0">
+        Vegetables
+      </li>
+      <li class="mdc-list-item" role="option" tabindex="0">
+        Fruit
+      </li>
+    </ul>
+  </div>
+</div>
+```
+
+### CSS Classes
+
+CSS Class | Description
+--- | ---
+`mdc-select__label` | Mandatory
+`mdc-select__label--float-above` | Indicates the label is floating above the select
+
+### `MDCSelectLabel`
+
+Method Signature | Description
+--- | ---
+`float(value: string)` | Styles the label to float or defloat as necessary.
+
+### `MDCSelectLabelAdapter`
+
+Method Signature | Description
+--- | ---
+`addClass(className: string) => void` | Adds a class to the label element.
+`removeClass(className: string) => void` | Removes a class from the label element.
+
+### `MDCSelectLabelFoundation`
+
+Method Signature | Description
+--- | ---
+`styleFloat(value: string)` | Adds or removes the float-above selector to the label element.
+
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-select-floating-label-color($color)` | Customizes the color of the label element.

packages/mdc-select/label/_mixins.scss

@@ -0,0 +1,23 @@
+//
+// 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-select-floating-label-color($color, $opacity: 1) {
+  .mdc-select__label {
+    @include mdc-theme-prop(color, rgba(mdc-theme-prop-value($color), $opacity));
+  }
+}

packages/mdc-select/label/adapter.js

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2017 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 Label.
+ *
+ * Defines the shape of the adapter expected by the foundation. Implement this
+ * adapter to integrate the Select label into your framework. See
+ * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
+ * for more information.
+ *
+ * @record
+ */
+class MDCSelectLabelAdapter {
+  /**
+   * Adds a class to the label element.
+   * @param {string} className
+   */
+  addClass(className) {}
+
+  /**
+   * Removes a class from the label element.
+   * @param {string} className
+   */
+  removeClass(className) {}
+}
+
+export default MDCSelectLabelAdapter;

packages/mdc-select/label/constants.js

@@ -0,0 +1,3 @@
+export const cssClasses = {
+  LABEL_FLOAT_ABOVE: 'mdc-select__label--float-above',
+};