Merge branch 'master' into fix/select/line-ripple

ROADMAP.md

@@ -20,7 +20,7 @@ We release a new version of MDC Web every 2 weeks. We also limit our breaking ch
 ### 0.42.0 - November 2018 (R21)
 - Shadows Theme
 - Text field prefix and suffix support
-- Cascading menus
+- New snackbars
 
 ### 0.43.0 - December 2018 (R22)
 - Polish and bug fixes

docs/integrating-into-frameworks.md

@@ -52,7 +52,7 @@ and `disconnectedCallback` for destruction.
 
 ### The Advanced Approach: Using foundations and adapters
 
-Many modern front-end libraries/frameworks, such as react and angular2, wind up targeting more than
+Many modern front-end libraries/frameworks, such as react and angular, wind up targeting more than
 just a web browser. For these frameworks - and for some highly advanced application architectures -
 a more robust approach is required. We provide foundations and adapters to accommodate this use
 case.

docs/open_source/release-process.md

@@ -29,7 +29,7 @@ team know NOT to merge PRs during this release process.
 Check out the master branch and update:
 
 ```
-git checkout master && git pull
+git checkout master && git pull && git fetch --tags
 ```
 
 This will pull the latest tags and `master` commits into your local repository.

karma.conf.js

@@ -128,7 +128,7 @@ const SAUCE_LAUNCHERS = {
   'sl-ios-safari-latest': {
     base: 'SauceLabs',
     deviceName: 'iPhone Simulator',
-    platformVersion: '10.0',
+    platformVersion: '11.0',
     platformName: 'iOS',
     browserName: 'Safari',
   },

packages/mdc-checkbox/README.md

@@ -162,18 +162,17 @@ If you are using a JavaScript framework, such as React or Angular, you can creat
 | `getNativeControl() => HTMLInputElement?` | Returns the native checkbox control, if available. Note that if this control is not available, the methods that rely on it will exit gracefully.|
 | `forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op. |
 | `isAttachedToDOM() => boolean` | Returns true if the component is currently attached to the DOM, false otherwise. |
+| `isIndeterminate() => boolean` | Returns true if the component is in the indeterminate state. |
+| `isChecked() => boolean` | Returns true if the component is checked. |
+| `hasNativeControl() => boolean` | Returns true if the input is present in the component. |
+| `setNativeControlDisabled(disabled: boolean) => void` | Sets the input to disabled. |
 
 ### `MDCCheckboxFoundation`
 
 Method Signature | Description
 --- | ---
 `isChecked() => boolean` | Returns whether or not the underlying input is checked. Returns false when no input is available.
 `setChecked(checked: boolean) => void` | Updates the `checked` property on the underlying input. Does nothing when the underlying input is not present.
-`isIndeterminate() => boolean` | Returns whether or not the underlying input is indeterminate. Returns false when no input is available.
-`setIndeterminate(indeterminate: boolean) => void` | Updates the `indeterminate` property on the underlying input. Does nothing when the underlying input is not present.
-`isDisabled() => boolean` | Returns whether or not the underlying input is disabled. Returns false when no input is available.
 `setDisabled(disabled: boolean) => void` | Updates the `disabled` property on the underlying input. Does nothing when the underlying input is not present.
-`getValue() => string` | Returns the value of `MDCCheckboxAdapter.getNativeControl().value`. Returns `null` if `getNativeControl()` does not return an object.
-`setValue(value: string) => void` | Sets the value of `adapter.getNativeControl().value`. Does nothing if `getNativeControl()` does not return an object.
 `handleAnimationEnd() => void` | `animationend` event handler that should be applied to the root element.
 `handleChange() => void` | `change` event handler that should be applied to the checkbox element.

packages/mdc-checkbox/adapter.js

@@ -69,6 +69,18 @@ class MDCCheckboxAdapter {
 
   /** @return {boolean} */
   isAttachedToDOM() {}
+
+  /** @return {boolean} */
+  isIndeterminate() {}
+
+  /** @return {boolean} */
+  isChecked() {}
+
+  /** @return {boolean} */
+  hasNativeControl() {}
+
+  /** @param {boolean} disabled */
+  setNativeControlDisabled(disabled) {}
 }
 
 export default MDCCheckboxAdapter;

packages/mdc-checkbox/foundation.js

@@ -60,6 +60,10 @@ class MDCCheckboxFoundation extends MDCFoundation {
       getNativeControl: () => /* !MDCSelectionControlState */ {},
       forceLayout: () => {},
       isAttachedToDOM: () => /* boolean */ {},
+      isIndeterminate: () => /* boolean */ {},
+      isChecked: () => /* boolean */ {},
+      hasNativeControl: () => /* boolean */ {},
+      setNativeControlDisabled: (/* disabled: boolean */) => {},
     });
   }
 
@@ -81,7 +85,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
 
   /** @override */
   init() {
-    this.currentCheckState_ = this.determineCheckState_(this.getNativeControl_());
+    this.currentCheckState_ = this.determineCheckState_();
     this.updateAriaChecked_();
     this.adapter_.addClass(cssClasses.UPGRADED);
     this.installPropertyChangeHooks_();
@@ -92,51 +96,16 @@ class MDCCheckboxFoundation extends MDCFoundation {
     this.uninstallPropertyChangeHooks_();
   }
 
-  /** @return {boolean} */
-  isChecked() {
-    return this.getNativeControl_().checked;
-  }
-
-  /** @param {boolean} checked */
-  setChecked(checked) {
-    this.getNativeControl_().checked = checked;
-  }
-
-  /** @return {boolean} */
-  isIndeterminate() {
-    return this.getNativeControl_().indeterminate;
-  }
-
-  /** @param {boolean} indeterminate */
-  setIndeterminate(indeterminate) {
-    this.getNativeControl_().indeterminate = indeterminate;
-  }
-
-  /** @return {boolean} */
-  isDisabled() {
-    return this.getNativeControl_().disabled;
-  }
-
   /** @param {boolean} disabled */
   setDisabled(disabled) {
-    this.getNativeControl_().disabled = disabled;
+    this.adapter_.setNativeControlDisabled(disabled);
     if (disabled) {
       this.adapter_.addClass(cssClasses.DISABLED);
     } else {
       this.adapter_.removeClass(cssClasses.DISABLED);
     }
   }
 
-  /** @return {?string} */
-  getValue() {
-    return this.getNativeControl_().value;
-  }
-
-  /** @param {?string} value */
-  setValue(value) {
-    this.getNativeControl_().value = value;
-  }
-
   /**
    * Handles the animationend event for the checkbox
    */
@@ -198,12 +167,12 @@ class MDCCheckboxFoundation extends MDCFoundation {
 
   /** @private */
   transitionCheckState_() {
-    const nativeCb = this.adapter_.getNativeControl();
-    if (!nativeCb) {
+    if (!this.adapter_.hasNativeControl()) {
       return;
     }
     const oldState = this.currentCheckState_;
-    const newState = this.determineCheckState_(nativeCb);
+    const newState = this.determineCheckState_();
+
     if (oldState === newState) {
       return;
     }
@@ -230,21 +199,20 @@ class MDCCheckboxFoundation extends MDCFoundation {
   }
 
   /**
-   * @param {!MDCSelectionControlState} nativeCb
    * @return {string}
    * @private
    */
-  determineCheckState_(nativeCb) {
+  determineCheckState_() {
     const {
       TRANSITION_STATE_INDETERMINATE,
       TRANSITION_STATE_CHECKED,
       TRANSITION_STATE_UNCHECKED,
     } = strings;
 
-    if (nativeCb.indeterminate) {
+    if (this.adapter_.isIndeterminate()) {
       return TRANSITION_STATE_INDETERMINATE;
     }
-    return nativeCb.checked ? TRANSITION_STATE_CHECKED : TRANSITION_STATE_UNCHECKED;
+    return this.adapter_.isChecked() ? TRANSITION_STATE_CHECKED : TRANSITION_STATE_UNCHECKED;
   }
 
   /**
@@ -287,7 +255,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
 
   updateAriaChecked_() {
     // Ensure aria-checked is set to mixed if checkbox is in indeterminate state.
-    if (this.isIndeterminate()) {
+    if (this.adapter_.isIndeterminate()) {
       this.adapter_.setNativeControlAttr(
         strings.ARIA_CHECKED_ATTR, strings.ARIA_CHECKED_INDETERMINATE_VALUE);
     } else {

packages/mdc-checkbox/index.js

@@ -93,6 +93,10 @@ class MDCCheckbox extends MDCComponent {
       setNativeControlAttr: (attr, value) => this.nativeCb_.setAttribute(attr, value),
       removeNativeControlAttr: (attr) => this.nativeCb_.removeAttribute(attr),
       getNativeControl: () => this.nativeCb_,
+      isIndeterminate: () => this.indeterminate,
+      isChecked: () => this.checked,
+      hasNativeControl: () => !!this.nativeCb_,
+      setNativeControlDisabled: (disabled) => this.nativeCb_.disabled = disabled,
       forceLayout: () => this.root_.offsetWidth,
       isAttachedToDOM: () => Boolean(this.root_.parentNode),
     });
@@ -105,27 +109,27 @@ class MDCCheckbox extends MDCComponent {
 
   /** @return {boolean} */
   get checked() {
-    return this.foundation_.isChecked();
+    return this.nativeCb_.checked;
   }
 
   /** @param {boolean} checked */
   set checked(checked) {
-    this.foundation_.setChecked(checked);
+    this.nativeCb_.checked = checked;
   }
 
   /** @return {boolean} */
   get indeterminate() {
-    return this.foundation_.isIndeterminate();
+    return this.nativeCb_.indeterminate;
   }
 
   /** @param {boolean} indeterminate */
   set indeterminate(indeterminate) {
-    this.foundation_.setIndeterminate(indeterminate);
+    this.nativeCb_.indeterminate = indeterminate;
   }
 
   /** @return {boolean} */
   get disabled() {
-    return this.foundation_.isDisabled();
+    return this.nativeCb_.disabled;
   }
 
   /** @param {boolean} disabled */
@@ -135,12 +139,12 @@ class MDCCheckbox extends MDCComponent {
 
   /** @return {?string} */
   get value() {
-    return this.foundation_.getValue();
+    return this.nativeCb_.value;
   }
 
   /** @param {?string} value */
   set value(value) {
-    this.foundation_.setValue(value);
+    this.nativeCb_.value = value;
   }
 
   destroy() {

packages/mdc-drawer/README.md

@@ -319,6 +319,7 @@ Mixin | Description
 `mdc-drawer-item-corner-radius($radius)` | Sets the corner border radius of the drawer list item.
 `mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.
 `mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.
+`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.
 
 ## Accessibility
 

packages/mdc-drawer/_mixins.scss

@@ -118,3 +118,7 @@
     @include mdc-theme-prop(background-color, $value);
   }
 }
+
+@mixin mdc-drawer-z-index($value) {
+  z-index: $value;
+}

packages/mdc-drawer/common.scss

@@ -40,6 +40,7 @@
   @include mdc-drawer-item-activated-icon-ink-color($mdc-drawer-item-activated-ink-color);
   @include mdc-drawer-item-activated-text-ink-color($mdc-drawer-item-activated-ink-color);
   @include mdc-drawer-item-corner-radius(4px);
+  @include mdc-drawer-z-index($mdc-drawer-z-index);
 
   display: flex;
   flex-direction: column;
@@ -53,7 +54,6 @@
   border-right-width: 1px;
   border-right-style: solid;
   overflow: hidden;
-  z-index: $mdc-drawer-z-index;
 
   @include mdc-rtl {
     border-right-width: 0;

packages/mdc-menu-surface/mdc-menu-surface.scss

@@ -38,8 +38,8 @@
   display: none;
   position: absolute;
   box-sizing: border-box;
-  max-width: calc(100vw - $mdc-menu-surface-min-distance-from-edge);
-  max-height: calc(100vh - $mdc-menu-surface-min-distance-from-edge);
+  max-width: calc(100vw - #{$mdc-menu-surface-min-distance-from-edge});
+  max-height: calc(100vh - #{$mdc-menu-surface-min-distance-from-edge});
   margin: 0;
   padding: 0;
   transform: scale(1);

packages/mdc-menu/README.md

@@ -41,14 +41,10 @@ npm install @material/menu
 ### HTML Structure
 
 ```html
-<div class="mdc-menu" tabindex="-1">
-  <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
-    <li class="mdc-list-item" role="menuitem" tabindex="0">
-      A Menu Item
-    </li>
-    <li class="mdc-list-item" role="menuitem" tabindex="0">
-      Another Menu Item
-    </li>
+<div class="mdc-menu mdc-menu-surface" tabindex="-1">
+  <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
+    <li class="mdc-list-item" role="menuitem">A Menu Item</li>
+    <li class="mdc-list-item" role="menuitem">Another Menu Item</li>
   </ul>
 </div>
 ```
@@ -57,7 +53,7 @@ npm install @material/menu
 
 ```scss
 @import "@material/menu/mdc-list";
-@import "@material/menu/mdc-menu-surface";
+@import "@material/menu-surface/mdc-menu-surface";
 @import "@material/menu/mdc-menu";
 ```
 

packages/mdc-menu/mdc-menu.scss

@@ -40,7 +40,6 @@
   }
 
   .mdc-list-item {
-    padding: 0 24px;
     cursor: pointer;
     user-select: none;
   }

packages/mdc-select/README.md

@@ -215,8 +215,12 @@ Mixin | Description
 `mdc-select-focused-label-color($color)` | Customizes the label color of the select when focused.
 `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.
-`mdc-select-hover-bottom-line-color($color)` | Customizes the color of the bottom line when select is hovered.
-`mdc-select-outline-corner-radius($color)` | Customizes the color of the notched outline when select is focused.
+`mdc-select-corner-radius($radius)` | Customizes the corner radius of the box variant of the select.
+`mdc-select-hover-bottom-line-color($color)` | Customizes the color of the bottom line when the select is hovered.
+`mdc-select-outline-color($color)` | Customizes the color of the notched outline.
+`mdc-select-outline-corner-radius($radius)` | Sets the border radius of of the outlined select variant.
+`mdc-select-focused-outline-color($color)` | Customizes the color of the outline of the select when focused.
+`mdc-select-hover-outline-color($color)` | Customizes the color of the outline when the select is hovered.
 
 > NOTE: To further customize the floating label, please see the [floating label documentation](./../mdc-floating-label/README.md).