Merge branch 'master' into fix/select-change

packages/mdc-button/README.md

@@ -207,7 +207,3 @@ Mixin | Description
 `mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.
 `mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.
 `mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.
-
-##### Caveat: Edge and CSS Custom Properties
-
-In browsers that fully support CSS custom properties, the above mixins will work if you pass in a [MDC Theme](../mdc-theme) property (e.g. `primary`) as an argument. However, Edge does not fully support CSS custom properties. If you are using the `mdc-button-container-fill-color` mixin, you must pass in an actual color value for support in Edge.

packages/mdc-button/_mixins.scss

@@ -54,6 +54,7 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-touch-target-wrapper($query);
+  @include mdc-elevation-overlay-common($query);
 
   // postcss-bem-linter: define button
   .mdc-button {
@@ -386,10 +387,12 @@ $query: mdc-feature-all()) {
 
   @include mdc-typography(button, $query);
   @include mdc-button-horizontal-padding($mdc-button-horizontal-padding, $query);
+  @include mdc-elevation-overlay-surface-position($query: $query);
+  @include mdc-elevation-overlay-size(100%, $query: $query);
 
   @include mdc-feature-targets($feat-structure) {
     display: inline-flex;
-    position: relative;
+    // position: relative; already set in mdc-elevation-overlay-surface-position
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
@@ -464,8 +467,8 @@ $query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-button-outline-width($mdc-button-outlined-border-width, $query: $query);
-  @include mdc-button-outline-color(primary, $query);
-  @include mdc-button-disabled-outline-color($mdc-button-disabled-ink-color, $query);
+  @include mdc-button-outline-color($mdc-button-outline-color, $query);
+  @include mdc-button-disabled-outline-color($mdc-button-disabled-container-color, $query);
 
   @include mdc-feature-targets($feat-structure) {
     border-style: solid;
@@ -476,7 +479,7 @@ $query: mdc-feature-all()) {
   @include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding, $query);
   @include mdc-button-container-fill-color(primary, $query);
   @include mdc-button-ink-color(on-primary, $query);
-  @include mdc-button-disabled-container-fill-color($mdc-button-disabled-container-fill-color, $query);
+  @include mdc-button-disabled-container-fill-color($mdc-button-disabled-container-color, $query);
   @include mdc-button-disabled-ink-color($mdc-button-disabled-ink-color, $query);
 }
 
@@ -513,7 +516,7 @@ $query: mdc-feature-all()) {
   $feat-color: mdc-feature-create-target($query, color);
 
   @include mdc-feature-targets($feat-color) {
-    @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
+    @include mdc-theme-prop(background-color, $color);
   }
 }
 

packages/mdc-button/_variables.scss

@@ -39,7 +39,8 @@ $mdc-button-density-config: (
 ) !default;
 
 $mdc-button-outlined-border-width: 1px !default;
+$mdc-button-outline-color: rgba(mdc-theme-prop-value(on-surface), .12) !default;
 $mdc-button-shape-radius: small !default;
 
-$mdc-button-disabled-container-fill-color: rgba(mdc-theme-prop-value(on-surface), .12);
-$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
+$mdc-button-disabled-container-color: rgba(mdc-theme-prop-value(on-surface), .12) !default;
+$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .38) !default;

packages/mdc-checkbox/README.md

@@ -158,12 +158,6 @@ Mixin | Description
 
 The ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.
 
-#### Caveat: Edge and CSS Variables
-
-In browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.
-However, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.
-This means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.
-
 ## `MDCCheckbox` Properties and Methods
 
 Property Name | Type | Description

packages/mdc-checkbox/_mixins.scss

@@ -71,6 +71,15 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
   @include mdc-checkbox-disabled-ink-color($mdc-checkbox-mark-color, $query: $query);
 
   @media screen and (-ms-high-contrast: active) {
+    @include mdc-checkbox-disabled-container-colors(
+      $unmarked-stroke-color: GrayText,
+      $unmarked-fill-color: transparent,
+      $marked-stroke-color: GrayText,
+      $marked-fill-color: transparent,
+      $query: $query
+    );
+    @include mdc-checkbox-disabled-ink-color(GrayText, $query: $query);
+
     .mdc-checkbox__mixedmark {
       @include mdc-feature-targets($feat-structure) {
         margin: 0 1px; // Extra horizontal space around mixedmark symbol.
@@ -378,7 +387,7 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
   .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background::before,
   .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background::before {
     @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
+      @include mdc-theme-prop(background-color, $color);
     }
   }
 
@@ -626,7 +635,7 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
 
   .mdc-checkbox__background::before {
     @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop(background-color, on-surface, $edgeOptOut: true);
+      @include mdc-theme-prop(background-color, on-surface);
     }
   }
 

packages/mdc-chips/README.md

@@ -445,10 +445,9 @@ Method Signature | Description
 `setShouldRemoveOnTrailingIconClick(shouldRemove: boolean) => void` | Sets whether a trailing icon click should trigger exit/removal of the chip
 `getDimensions() => ClientRect` | Returns the dimensions of the chip. This is used for applying ripple to the chip.
 `beginExit() => void` | Begins the exit animation which leads to removal of the chip
-`handleInteraction(evt: Event) => void` | Handles an interaction event on the root element
-`handleTransitionEnd(evt: Event) => void` | Handles a transition end event on the root element
-`handleTrailingIconInteraction(evt: Event) => void` | Handles an interaction event on the trailing icon element
+`handleClick(evt: Event) => void` | Handles a click event on the root element
 `handleKeydown(evt: Event) => void` | Handles a keydown event on the root element
+`handleTransitionEnd(evt: Event) => void` | Handles a transition end event on the root element
 `removeFocus() => void` | Removes focusability from the chip
 
 #### `MDCChipFoundation` Event Handlers
@@ -457,10 +456,9 @@ When wrapping the Chip foundation, the following events must be bound to the ind
 
 Events | Element Selector | Foundation Handler
 --- | --- | ---
-`click`, `keydown` | `.mdc-chip` (root) | `handleInteraction()`
-`click`, `keydown` | `.mdc-chip__icon--trailing` (if present) | `handleTrailingIconInteraction()`
-`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`
+`click` | `.mdc-chip` (root) | `handleClick()`
 `keydown` | `.mdc-chip` (root) | `handleKeydown()`
+`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`
 
 #### `MDCChipSetFoundation`
 

packages/mdc-chips/_mixins.scss

@@ -56,6 +56,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
   @include mdc-chip-trailing-icon-size($mdc-chip-trailing-icon-size, $query: $query);
   @include mdc-chip-trailing-icon-margin($query: $query);
   @include mdc-touch-target-wrapper($query);
+  @include mdc-elevation-overlay-common($query);
 
   .mdc-chip {
     @include mdc-chip-shape-radius(50%, $query: $query);
@@ -64,10 +65,12 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
     @include mdc-typography(body2, $query: $query);
     @include mdc-chip-density($density-scale: 0, $query: $query);
     @include mdc-chip-leading-icon-margin($query: $query);
+    @include mdc-elevation-overlay-surface-position($query: $query);
+    @include mdc-elevation-overlay-size(100%, $query: $query);
 
     @include mdc-feature-targets($feat-structure) {
       display: inline-flex;
-      position: relative;
+      // position: relative; already set in mdc-elevation-overlay-surface-position
       align-items: center;
       box-sizing: border-box;
       padding: 0 $mdc-chip-horizontal-padding;

packages/mdc-chips/chip/component.ts

@@ -33,10 +33,6 @@ import {MDCChipFoundation} from './foundation';
 import {MDCChipInteractionEventDetail, MDCChipNavigationEventDetail, MDCChipRemovalEventDetail,
     MDCChipSelectionEventDetail} from './types';
 
-type InteractionType = 'click' | 'keydown';
-
-const INTERACTION_EVENTS: InteractionType[] = ['click', 'keydown'];
-
 export type MDCChipFactory = (el: Element, foundation?: MDCChipFoundation) => MDCChip;
 
 export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippleCapableSurface {
@@ -84,20 +80,17 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
   root_!: HTMLElement; // assigned in MDCComponent constructor
 
   private leadingIcon_!: Element | null; // assigned in initialize()
-  private trailingIcon_!: Element | null; // assigned in initialize()
   private checkmark_!: Element | null; // assigned in initialize()
   private ripple_!: MDCRipple; // assigned in initialize()
   private primaryAction_!: Element | null; // assigned in initialize()
   private trailingAction_!: Element | null; // assigned in initialize()
 
-  private handleInteraction_!: SpecificEventListener<InteractionType>; // assigned in initialSyncWithDOM()
+  private handleClick_!: SpecificEventListener<'click'>; // assigned in initialSyncWithDOM()
   private handleTransitionEnd_!: SpecificEventListener<'transitionend'>; // assigned in initialSyncWithDOM()
-  private handleTrailingIconInteraction_!: SpecificEventListener<InteractionType>; // assigned in initialSyncWithDOM()
   private handleKeydown_!: SpecificEventListener<'keydown'>; // assigned in initialSyncWithDOM()
 
   initialize(rippleFactory: MDCRippleFactory = (el, foundation) => new MDCRipple(el, foundation)) {
     this.leadingIcon_ = this.root_.querySelector(strings.LEADING_ICON_SELECTOR);
-    this.trailingIcon_ = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR);
     this.checkmark_ = this.root_.querySelector(strings.CHECKMARK_SELECTOR);
     this.primaryAction_ = this.root_.querySelector(strings.PRIMARY_ACTION_SELECTOR);
     this.trailingAction_ = this.root_.querySelector(strings.TRAILING_ACTION_SELECTOR);
@@ -112,40 +105,21 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
   }
 
   initialSyncWithDOM() {
-    this.handleInteraction_ = (evt: MouseEvent | KeyboardEvent) => this.foundation_.handleInteraction(evt);
+    this.handleClick_ = (evt: MouseEvent) => this.foundation_.handleClick(evt);
     this.handleTransitionEnd_ = (evt: TransitionEvent) => this.foundation_.handleTransitionEnd(evt);
-    this.handleTrailingIconInteraction_ = (evt: MouseEvent | KeyboardEvent) =>
-        this.foundation_.handleTrailingIconInteraction(evt);
     this.handleKeydown_ = (evt: KeyboardEvent) => this.foundation_.handleKeydown(evt);
 
-    INTERACTION_EVENTS.forEach((evtType) => {
-      this.listen(evtType, this.handleInteraction_);
-    });
+    this.listen('click', this.handleClick_);
     this.listen('transitionend', this.handleTransitionEnd_);
     this.listen('keydown', this.handleKeydown_);
-
-    if (this.trailingIcon_) {
-      INTERACTION_EVENTS.forEach((evtType) => {
-        this.trailingIcon_!.addEventListener(evtType, this.handleTrailingIconInteraction_ as EventListener);
-      });
-    }
   }
 
   destroy() {
     this.ripple_.destroy();
-
-    INTERACTION_EVENTS.forEach((evtType) => {
-      this.unlisten(evtType, this.handleInteraction_);
-    });
+    this.unlisten('click', this.handleClick_);
     this.unlisten('transitionend', this.handleTransitionEnd_);
     this.unlisten('keydown', this.handleKeydown_);
 
-    if (this.trailingIcon_) {
-      INTERACTION_EVENTS.forEach((evtType) => {
-        this.trailingIcon_!.removeEventListener(evtType, this.handleTrailingIconInteraction_ as EventListener);
-      });
-    }
-
     super.destroy();
   }
 

packages/mdc-chips/chip/foundation.ts

@@ -141,11 +141,13 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
   /**
    * Handles an interaction event on the root element.
    */
-  handleInteraction(evt: MouseEvent | KeyboardEvent) {
-    if (this.shouldHandleInteraction_(evt)) {
-      this.adapter_.notifyInteraction();
-      this.focusPrimaryAction_();
+  handleClick(evt: MouseEvent) {
+    const trailingIconIsSource = this.adapter_.eventTargetHasClass(evt.target, cssClasses.TRAILING_ICON);
+    if (trailingIconIsSource) {
+      return this.notifyTrailingIconInteractionAndRemove_(evt);
     }
+
+    this.notifyInteractionAndFocus_();
   }
 
   /**
@@ -202,28 +204,25 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
     }
   }
 
-  /**
-   * Handles an interaction event on the trailing icon element. This is used to
-   * prevent the ripple from activating on interaction with the trailing icon.
-   */
-  handleTrailingIconInteraction(evt: MouseEvent | KeyboardEvent) {
-    if (this.shouldHandleInteraction_(evt)) {
-      this.adapter_.notifyTrailingIconInteraction();
-      this.removeChip_(evt);
-    }
-  }
-
   /**
    * Handles a keydown event from the root element.
    */
   handleKeydown(evt: KeyboardEvent) {
+    const trailingIconIsSource = this.adapter_.eventTargetHasClass(evt.target, cssClasses.TRAILING_ICON);
+    if (trailingIconIsSource && this.shouldProcessKeydownAsClick_(evt)) {
+      return this.notifyTrailingIconInteractionAndRemove_(evt);
+    }
+
+    if (this.shouldProcessKeydownAsClick_(evt)) {
+      return this.notifyInteractionAndFocus_();
+    }
+
     if (this.shouldRemoveChip_(evt)) {
       return this.removeChip_(evt);
     }
 
-    const key = evt.key;
     // Early exit if the key is not usable
-    if (!navigationKeys.has(key)) {
+    if (!navigationKeys.has(evt.key)) {
       return;
     }
 
@@ -308,20 +307,20 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
     this.adapter_.setPrimaryActionAttr(strings.TAB_INDEX, '-1');
   }
 
-  private removeChip_(evt: MouseEvent|KeyboardEvent) {
+  private removeChip_(evt: Event) {
     evt.stopPropagation();
     if (this.shouldRemoveOnTrailingIconClick_) {
       this.beginExit();
     }
   }
 
-  private shouldHandleInteraction_(evt: MouseEvent|KeyboardEvent): boolean {
-    if (evt.type === 'click') {
-      return true;
-    }
+  private notifyTrailingIconInteractionAndRemove_(evt: Event) {
+    this.adapter_.notifyTrailingIconInteraction();
+    this.removeChip_(evt);
+  }
 
-    const keyEvt = evt as KeyboardEvent;
-    return keyEvt.key === strings.ENTER_KEY || keyEvt.key === strings.SPACEBAR_KEY;
+  private shouldProcessKeydownAsClick_(evt: KeyboardEvent): boolean {
+    return evt.key === strings.ENTER_KEY || evt.key === strings.SPACEBAR_KEY;
   }
 
   private shouldRemoveChip_(evt: KeyboardEvent): boolean {
@@ -346,6 +345,11 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
   private notifyIgnoredSelection_(selected: boolean) {
     this.adapter_.notifySelection(selected, true);
   }
+
+  private notifyInteractionAndFocus_() {
+    this.adapter_.notifyInteraction();
+    this.focusPrimaryAction_();
+  }
 }
 
 // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.

packages/mdc-data-table/README.md

@@ -259,7 +259,7 @@ const {events} from '@material/data-table/constants';
 
 Event constant | Event name | Description
 -- | -- | --
-`ROW_SELECTION_CHANGED` | `MDCDataTable:changed` | Event emitted when row checkbox is checked or unchecked.
+`ROW_SELECTION_CHANGED` | `MDCDataTable:rowSelectionChanged` | Event emitted when row checkbox is checked or unchecked.
 `SELECTED_ALL` | `MDCDataTable:selectedAll` | Event emitted when header row checkbox is checked.
 `UNSELECTED_ALL` | `MDCDataTable:unselectedAll` | Event emitted when header row checkbox is unchecked.
 

packages/mdc-drawer/README.md

@@ -226,7 +226,7 @@ In the following example, the `mdc-drawer__content` and `main-content` elements
     <header class="mdc-top-app-bar app-bar" id="app-bar">
       <div class="mdc-top-app-bar__row">
         <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-          <a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
+          <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
           <span class="mdc-top-app-bar__title">Dismissible Drawer</span>
         </section>
       </div>
@@ -250,7 +250,7 @@ In cases where the drawer appears below the top app bar you will want to follow
   <header class="mdc-top-app-bar app-bar" id="app-bar">
     <div class="mdc-top-app-bar__row">
       <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-        <a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
+        <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
         <span class="mdc-top-app-bar__title">Dismissible Drawer</span>
       </section>
     </div>
@@ -514,4 +514,4 @@ Signature | Description
 `opened_() => void` | Called when drawer finishes open animation.
 
 
-<!-- docgen-tsdoc-replacer:end -->
+<!-- docgen-tsdoc-replacer:end -->

packages/mdc-elevation/README.md

@@ -93,7 +93,7 @@ Mixin | Description
 `mdc-elevation($z-value, $color, $opacity-boost)` | Sets the elevation to the z-space for that given elevation, and optionally sets the color and/or boosts the opacity of the shadow
 `mdc-elevation-overlay-common` | Called once per application to setup the universal elevation overlay styles
 `mdc-elevation-shadow($box-shadow)` | Sets the `box-shadow` of the closest parent selector
-`mdc-elevation-overlay-parent` | Sets the positioning of the overlay's parent element so that the overlay can be appropriately centered
+`mdc-elevation-overlay-surface-position` | Sets the positioning of the overlay's surface element so that the overlay can be appropriately centered
 `mdc-elevation-overlay-size($width, $height: $width)` | Sets the width and height of the elevation overlay
 `mdc-elevation-overlay-fill-color($color)` | Sets the color of the elevation overlay
 `mdc-elevation-overlay-opacity($opacity)` | Sets the opacity of the elevation overlay

packages/mdc-elevation/_mixins.scss

@@ -97,9 +97,9 @@
 }
 
 ///
-/// Sets the elevation overlay parent required positioning.
+/// Sets the elevation overlay surface required positioning.
 ///
-@mixin mdc-elevation-overlay-parent($query: mdc-feature-all()) {
+@mixin mdc-elevation-overlay-surface-position($query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-feature-targets($feat-structure) {