Merge branch 'master' into fix/select/focus-without-label

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

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-dialog/README.md

@@ -117,6 +117,12 @@ a `mdc-dialog__body--scrollable` modifier to allow scrolling in the dialog.
 Note that unlike the css classnames, the specific ID names used do not have to be _exactly_ the same as listed above.
 They only need to match the values set for their corresponding aria attributes.
 
+### Styles
+
+```scss
+@import "@material/dialog/mdc-dialog";
+```
+
 ### Dialog Action Color ###
 
 Dialog actions use system colors by default, but you can use a contrasting color, such as the palette’s secondary color, to distinguish dialog actions from dialog content. To emphasize an action from other contents, add `mdc-dialog__action` to `mdc-button` to apply secondary color.

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-drawer/modal/mdc-drawer-modal.scss

@@ -35,7 +35,7 @@
   position: fixed;
 
   &.mdc-drawer--open {
-    display: block;
+    display: flex;
   }
 }
 

packages/mdc-list/index.js

@@ -103,7 +103,7 @@ class MDCList extends MDCComponent {
 
     // Get the index of the element if it is a list item.
     if (eventTarget.classList.contains(cssClasses.LIST_ITEM_CLASS)) {
-      index = this.listElements_.indexOf(eventTarget);
+      index = this.listElements.indexOf(eventTarget);
     }
 
     return index;
@@ -153,7 +153,7 @@ class MDCList extends MDCComponent {
       }
 
       this.singleSelection = true;
-      this.selectedIndex = this.listElements_.indexOf(preselectedElement);
+      this.selectedIndex = this.listElements.indexOf(preselectedElement);
     }
   }
 
@@ -163,7 +163,7 @@ class MDCList extends MDCComponent {
   }
 
   /** @return Array<!Element>*/
-  get listElements_() {
+  get listElements() {
     return [].slice.call(this.root_.querySelectorAll(strings.ENABLED_ITEMS_SELECTOR));
   }
 
@@ -191,45 +191,45 @@ class MDCList extends MDCComponent {
   /** @return {!MDCListFoundation} */
   getDefaultFoundation() {
     return new MDCListFoundation(/** @type {!MDCListAdapter} */ (Object.assign({
-      getListItemCount: () => this.listElements_.length,
-      getFocusedElementIndex: () => this.listElements_.indexOf(document.activeElement),
+      getListItemCount: () => this.listElements.length,
+      getFocusedElementIndex: () => this.listElements.indexOf(document.activeElement),
       setAttributeForElementIndex: (index, attr, value) => {
-        const element = this.listElements_[index];
+        const element = this.listElements[index];
         if (element) {
           element.setAttribute(attr, value);
         }
       },
       removeAttributeForElementIndex: (index, attr) => {
-        const element = this.listElements_[index];
+        const element = this.listElements[index];
         if (element) {
           element.removeAttribute(attr);
         }
       },
       addClassForElementIndex: (index, className) => {
-        const element = this.listElements_[index];
+        const element = this.listElements[index];
         if (element) {
           element.classList.add(className);
         }
       },
       removeClassForElementIndex: (index, className) => {
-        const element = this.listElements_[index];
+        const element = this.listElements[index];
         if (element) {
           element.classList.remove(className);
         }
       },
       focusItemAtIndex: (index) => {
-        const element = this.listElements_[index];
+        const element = this.listElements[index];
         if (element) {
           element.focus();
         }
       },
       setTabIndexForListItemChildren: (listItemIndex, tabIndexValue) => {
-        const element = this.listElements_[listItemIndex];
+        const element = this.listElements[listItemIndex];
         const listItemChildren = [].slice.call(element.querySelectorAll(strings.FOCUSABLE_CHILD_ELEMENTS));
         listItemChildren.forEach((ele) => ele.setAttribute('tabindex', tabIndexValue));
       },
       followHref: (index) => {
-        const listItem = this.listElements_[index];
+        const listItem = this.listElements[index];
         if (listItem && listItem.href) {
           listItem.click();
         }

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/index.js

@@ -121,7 +121,7 @@ class MDCMenu extends MDCComponent {
    * @return {!Array<!HTMLElement>}
    */
   get items() {
-    return this.list_.listElements_;
+    return this.list_.listElements;
   }
 
   /**

packages/mdc-menu/mdc-menu.scss

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

packages/mdc-rtl/_mixins.scss

@@ -23,6 +23,7 @@
 // Creates a rule that will be applied when an MDC Web component is within the context of an RTL layout.
 //
 // Usage Example:
+//
 // ```scss
 // .mdc-foo {
 //   position: absolute;
@@ -52,8 +53,8 @@
 // }
 // ```
 //
-// Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work
-// in most cases, it will in some cases lead to false negatives, e.g.
+// Note that this mixin works by checking for an ancestor element with `[dir="rtl"]`.
+// As a result, nested `dir` values are not supported:
 //
 // ```html
 // <html dir="rtl">
@@ -64,7 +65,7 @@
 // </html>
 // ```
 //
-// In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this.
+// In the future, selectors such as the `:dir` pseudo-class (http://mdn.io/css/:dir) will help us mitigate this.
 @mixin mdc-rtl($root-selector: null) {
   @if ($root-selector) {
     @at-root {
@@ -81,10 +82,9 @@
   }
 }
 
-// Takes a base box-model property - e.g. margin / border / padding - along with a default
-// direction and value, and emits rules which apply the value to the
-// "<base-property>-<default-direction>" property by default, but flips the direction
-// when within an RTL context.
+// Takes a base box-model property name (`margin`, `border`, `padding`, etc.) along with a
+// default direction (`left` or `right`) and value, and emits rules which apply the given value to the
+// specified direction by default and the opposite direction in RTL.
 //
 // For example:
 //
@@ -93,43 +93,48 @@
 //   @include mdc-rtl-reflexive-box(margin, left, 8px);
 // }
 // ```
+//
 // is equivalent to:
 //
 // ```scss
 // .mdc-foo {
 //   margin-left: 8px;
+//   margin-right: 0;
 //
 //   @include mdc-rtl {
-//     margin-right: 8px;
 //     margin-left: 0;
+//     margin-right: 8px;
 //   }
 // }
 // ```
+//
 // whereas:
 //
 // ```scss
 // .mdc-foo {
 //   @include mdc-rtl-reflexive-box(margin, right, 8px);
 // }
 // ```
+//
 // is equivalent to:
 //
 // ```scss
 // .mdc-foo {
+//   margin-left: 0;
 //   margin-right: 8px;
 //
 //   @include mdc-rtl {
-//     margin-right: 0;
 //     margin-left: 8px;
+//     margin-right: 0;
 //   }
 // }
 // ```
 //
-// You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`,
+// You can also pass an optional 4th `$root-selector` argument which will be forwarded to `mdc-rtl`,
 // e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, ".mdc-component")`.
 //
-// Note that this function will always zero out the original value in an RTL context. If you're
-// trying to flip the values, use mdc-rtl-reflexive-property().
+// Note that this function will always zero out the original value in an RTL context.
+// If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.
 @mixin mdc-rtl-reflexive-box($base-property, $default-direction, $value, $root-selector: null) {
   @if (index((right, left), $default-direction) == null) {
     @error "Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.";
@@ -155,6 +160,7 @@
 //   @include mdc-rtl-reflexive-property(margin, auto, 12px);
 // }
 // ```
+//
 // is equivalent to:
 //
 // ```scss
@@ -169,7 +175,7 @@
 // }
 // ```
 //
-// A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`.
+// An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.
 @mixin mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector: null) {
   $prop-left: #{$base-property}-left;
   $prop-right: #{$base-property}-right;
@@ -184,29 +190,30 @@
 // ```scss
 // .mdc-foo {
 //   @include mdc-rtl-reflexive-position(left, 0);
-//   position: absolute;
 // }
 // ```
+//
 // is equivalent to:
 //
 // ```scss
-//  .mdc-foo {
-//    position: absolute;
-//    left: 0;
-//    right: initial;
-//
-//    @include mdc-rtl {
-//      right: 0;
-//      left: initial;
-//    }
-//  }
+// .mdc-foo {
+//   left: 0;
+//   right: initial;
+//
+//   @include mdc-rtl {
+//     left: initial;
+//     right: 0;
+//   }
+// }
 // ```
+//
 // An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
 @mixin mdc-rtl-reflexive-position($position-property, $value, $root-selector: null) {
   @if (index((right, left), $position-property) == null) {
     @error "Invalid position #{position-property}. Please specifiy either right or left";
   }
 
+  // TODO: "initial" is not supported in IE 11. https://caniuse.com/#feat=css-initial-value
   $left-value: $value;
   $right-value: initial;
 
@@ -224,24 +231,24 @@
 // ```scss
 // .mdc-foo {
 //   @include mdc-rtl-reflexive(left, 2px, right, 5px);
-//   position: absolute;
-//  }
-//  ```
-//  is equivalent to:
-//
-//  ```scss
-//  .mdc-foo {
-//    position: absolute;
-//    left: 2px;
-//    right: 5px;
-//
-//    @include mdc-rtl {
-//      right: 2px;
-//      left: 5px;
-//    }
-//  }
-//  ```
-// An optional fifth $root-selector argument may also be given, which is passed to `mdc-rtl`.
+// }
+// ```
+//
+// is equivalent to:
+//
+// ```scss
+// .mdc-foo {
+//   left: 2px;
+//   right: 5px;
+//
+//   @include mdc-rtl {
+//     right: 2px;
+//     left: 5px;
+//   }
+// }
+// ```
+//
+// An optional fifth `$root-selector` argument may also be given, which is passed to `mdc-rtl`.
 @mixin mdc-rtl-reflexive(
   $left-property,
   $left-value,