Merge remote-tracking branch 'origin/master' into refactor/checkbox_test

packages/mdc-chips/README.md

@@ -445,9 +445,10 @@ 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
-`handleClick(evt: Event) => void` | Handles a click event on the root element
-`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element
+`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
+`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element
 `removeFocus() => void` | Removes focusability from the chip
 
 #### `MDCChipFoundation` Event Handlers
@@ -456,9 +457,10 @@ When wrapping the Chip foundation, the following events must be bound to the ind
 
 Events | Element Selector | Foundation Handler
 --- | --- | ---
-`click` | `.mdc-chip` (root) | `handleClick()`
-`keydown` | `.mdc-chip` (root) | `handleKeydown()`
+`click`, `keydown` | `.mdc-chip` (root) | `handleInteraction()`
+`click`, `keydown` | `.mdc-chip__icon--trailing` (if present) | `handleTrailingIconInteraction()`
 `transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`
+`keydown` | `.mdc-chip` (root) | `handleKeydown()`
 
 #### `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,6 +33,10 @@ 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 {
@@ -80,17 +84,20 @@ 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 handleClick_!: SpecificEventListener<'click'>; // assigned in initialSyncWithDOM()
+  private handleInteraction_!: SpecificEventListener<InteractionType>; // 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);
@@ -105,21 +112,40 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
   }
 
   initialSyncWithDOM() {
-    this.handleClick_ = (evt: MouseEvent) => this.foundation_.handleClick(evt);
+    this.handleInteraction_ = (evt: MouseEvent | KeyboardEvent) => this.foundation_.handleInteraction(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);
 
-    this.listen('click', this.handleClick_);
+    INTERACTION_EVENTS.forEach((evtType) => {
+      this.listen(evtType, this.handleInteraction_);
+    });
     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();
-    this.unlisten('click', this.handleClick_);
+
+    INTERACTION_EVENTS.forEach((evtType) => {
+      this.unlisten(evtType, this.handleInteraction_);
+    });
     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,13 +141,11 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
   /**
    * Handles an interaction event on the root element.
    */
-  handleClick(evt: MouseEvent) {
-    const trailingIconIsSource = this.adapter_.eventTargetHasClass(evt.target, cssClasses.TRAILING_ICON);
-    if (trailingIconIsSource) {
-      return this.notifyTrailingIconInteractionAndRemove_(evt);
+  handleInteraction(evt: MouseEvent | KeyboardEvent) {
+    if (this.shouldHandleInteraction_(evt)) {
+      this.adapter_.notifyInteraction();
+      this.focusPrimaryAction_();
     }
-
-    this.notifyInteractionAndFocus_();
   }
 
   /**
@@ -205,24 +203,27 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
   }
 
   /**
-   * Handles a keydown event from the root element.
+   * Handles an interaction event on the trailing icon element. This is used to
+   * prevent the ripple from activating on interaction with the trailing icon.
    */
-  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_();
+  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) {
     if (this.shouldRemoveChip_(evt)) {
       return this.removeChip_(evt);
     }
 
+    const key = evt.key;
     // Early exit if the key is not usable
-    if (!navigationKeys.has(evt.key)) {
+    if (!navigationKeys.has(key)) {
       return;
     }
 
@@ -307,20 +308,20 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
     this.adapter_.setPrimaryActionAttr(strings.TAB_INDEX, '-1');
   }
 
-  private removeChip_(evt: Event) {
+  private removeChip_(evt: MouseEvent|KeyboardEvent) {
     evt.stopPropagation();
     if (this.shouldRemoveOnTrailingIconClick_) {
       this.beginExit();
     }
   }
 
-  private notifyTrailingIconInteractionAndRemove_(evt: Event) {
-    this.adapter_.notifyTrailingIconInteraction();
-    this.removeChip_(evt);
-  }
+  private shouldHandleInteraction_(evt: MouseEvent|KeyboardEvent): boolean {
+    if (evt.type === 'click') {
+      return true;
+    }
 
-  private shouldProcessKeydownAsClick_(evt: KeyboardEvent): boolean {
-    return evt.key === strings.ENTER_KEY || evt.key === strings.SPACEBAR_KEY;
+    const keyEvt = evt as KeyboardEvent;
+    return keyEvt.key === strings.ENTER_KEY || keyEvt.key === strings.SPACEBAR_KEY;
   }
 
   private shouldRemoveChip_(evt: KeyboardEvent): boolean {
@@ -345,11 +346,6 @@ 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-dialog/_mixins.scss

@@ -37,6 +37,8 @@
   $feat-animation: mdc-feature-create-target($query, animation);
   $feat-structure: mdc-feature-create-target($query, structure);
 
+  @include mdc-elevation-overlay-common($query);
+
   // postcss-bem-linter: define dialog
 
   .mdc-dialog,
@@ -97,6 +99,8 @@
   }
 
   .mdc-dialog__surface {
+    @include mdc-elevation-overlay-surface-position($query: $query);
+    @include mdc-elevation-overlay-size(100%, $query: $query);
     @include mdc-elevation(24, $query: $query);
 
     @include mdc-feature-targets($feat-structure) {

packages/mdc-fab/_mixins.scss

@@ -45,6 +45,7 @@ $mdc-fab-ripple-target: ".mdc-fab__ripple";
   // postcss-bem-linter: define fab
 
   @include mdc-touch-target-wrapper($query);
+  @include mdc-elevation-overlay-common($query);
 
   .mdc-fab {
     @include mdc-fab-base_($query: $query);
@@ -233,6 +234,8 @@ $mdc-fab-icon-enter-delay_: 90ms;
 $mdc-fab-icon-enter-duration_: 180ms;
 
 @mixin mdc-fab-base_($query: mdc-feature-all()) {
+  @include mdc-elevation-overlay-surface-position($query: $query);
+  @include mdc-elevation-overlay-size(100%, $query: $query);
   @include mdc-elevation(6, $query: $query);
   @include mdc-fab-shape-radius(50%, $query: $query);
 
@@ -360,7 +363,8 @@ $mdc-fab-icon-enter-duration_: 180ms;
     justify-content: flex-start;
     text-overflow: ellipsis;
     white-space: nowrap;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: visible;
   }
 }
 

packages/mdc-menu/_mixins.scss

@@ -20,6 +20,7 @@
 // THE SOFTWARE.
 //
 
+@import "@material/elevation/mixins";
 @import "@material/feature-targeting/functions";
 @import "@material/feature-targeting/mixins";
 @import "@material/rtl/mixins";
@@ -33,6 +34,7 @@
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-ripple-common($query);
+  @include mdc-elevation-overlay-common($query);
 
   // Customize the menu-surface and contained list to match the mdc-menu styles.
   .mdc-menu {
@@ -46,6 +48,8 @@
     // Include mdc-list selector to ensure list-inside-menu overrides default list styles
     .mdc-list {
       @include mdc-list-item-primary-text-ink-color($mdc-menu-ink-color, $query);
+      // @include mdc-elevation-overlay-surface-position($query: $query);
+      // @include mdc-elevation-overlay-size(100%, $query: $query);
     }
 
     .mdc-list-divider {

packages/mdc-menu/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@material/base": "^4.0.0",
     "@material/dom": "^4.0.0",
+    "@material/elevation": "^4.0.0",
     "@material/feature-targeting": "^4.0.0",
     "@material/list": "^4.0.0",
     "@material/menu-surface": "^4.0.0",