feat: Update to material-components-web v0.36.0 (#1026)

package.json

@@ -34,7 +34,7 @@
     "@angular/forms": "^6.0.2",
     "@angular/platform-browser": "^6.0.2",
     "core-js": "^2.5.7",
-    "material-components-web": "^0.36.0-0",
+    "material-components-web": "^0.36.0",
     "rxjs": "^6.2.0",
     "tsickle": "^0.28.0",
     "tslib": "^1.9.1",

src/theme/material-components-web/checkbox/_mixins.scss

@@ -76,7 +76,7 @@
   }
 
   .mdc-checkbox__mixedmark {
-    @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
@@ -365,9 +365,11 @@
 
 @mixin mdc-checkbox__mixedmark_ {
   width: 100%;
-  height: floor($mdc-checkbox-mark-stroke-size);
+  height: 0;
   transform: scaleX(0) rotate(0deg);
   transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform);
+  border-width: floor($mdc-checkbox-mark-stroke-size) / 2;
+  border-style: solid;
   opacity: 0;
 }
 

src/theme/material-components-web/checkbox/_variables.scss

@@ -17,6 +17,7 @@
 @import "../theme/variables";
 
 $mdc-checkbox-mark-color: mdc-theme-prop-value(on-primary);
+$mdc-checkbox-mark-color-high-contrast-black-on-white: black !default;
 $mdc-checkbox-border-color: rgba(mdc-theme-prop-value(on-surface), .54);
 $mdc-checkbox-disabled-color: rgba(mdc-theme-prop-value(on-surface), .26);
 $mdc-checkbox-baseline-theme-color: secondary;

src/theme/material-components-web/checkbox/mdc-checkbox.scss

@@ -35,6 +35,18 @@
   @include mdc-checkbox-disabled-container-color_;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .mdc-checkbox__mixedmark {
+    margin: 0 1px;  // Extra horizontal space around mixedmark symbol.
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  @at-root {
+    @include mdc-checkbox-ink-color($mdc-checkbox-mark-color-high-contrast-black-on-white);
+  }
+}
+
 // Needed to disable hover effects on CSS-only (non-JS) checkboxes
 .mdc-checkbox--disabled {
   @include mdc-checkbox--disabled_;

src/theme/material-components-web/chips/_mixins.scss

@@ -60,6 +60,7 @@
 
   &.mdc-chip--selected {
     @include mdc-theme-prop(color, $color);
+    @include mdc-chip-leading-icon-color($color);
 
     &:hover {
       @include mdc-theme-prop(color, $color);
@@ -94,6 +95,10 @@
   border-width: $width;
 }
 
+@mixin mdc-chip-height($height) {
+  height: $height;
+}
+
 @mixin mdc-chip-set-spacing($gap-size) {
   padding: $gap-size / 2;
 

src/theme/material-components-web/chips/_variables.scss

@@ -21,13 +21,16 @@ $mdc-chip-fill-color-default: mix(mdc-theme-prop-value(on-surface), mdc-theme-pr
 $mdc-chip-ink-color-default: rgba(mdc-theme-prop-value(on-surface), .87);
 $mdc-chip-horizontal-padding: 12px;
 $mdc-chip-vertical-padding: 7px;
+$mdc-chip-height-default: 32px;
 
 $mdc-chip-icon-color: mdc-theme-prop-value(on-surface);
 $mdc-chip-icon-opacity: .54;
 $mdc-chip-trailing-icon-hover-opacity: .62;
 $mdc-chip-trailing-icon-focus-opacity: .87;
 $mdc-chip-leading-icon-size: 20px;
 $mdc-chip-trailing-icon-size: 18px;
+$mdc-chip-leading-icon-delay: -50ms; // Speed up delay to bridge gap between leading icon and checkmark transition.
+$mdc-chip-checkmark-with-leading-icon-delay: 80ms;
 
 $mdc-chip-checkmark-animation-delay: 50ms;
 $mdc-chip-checkmark-animation-duration: 150ms;

src/theme/material-components-web/chips/chip/mdc-chip.scss

@@ -36,10 +36,12 @@
   @include mdc-chip-leading-icon-size($mdc-chip-leading-icon-size);
   @include mdc-chip-trailing-icon-size($mdc-chip-trailing-icon-size);
   @include mdc-typography(body2);
+  @include mdc-chip-height($mdc-chip-height-default);
 
   display: inline-flex;
   position: relative;
   align-items: center;
+  box-sizing: border-box;
   padding: $mdc-chip-vertical-padding $mdc-chip-horizontal-padding;
   outline: none;
   cursor: pointer;
@@ -64,8 +66,6 @@
 }
 
 .mdc-chip__text {
-  // Set line-height to be <18px to force the content height of mdc-chip to be 18px.
-  line-height: 17px;
   white-space: nowrap;
 }
 
@@ -115,37 +115,43 @@
 
 // Add leading checkmark to filter chips with a leading icon
 
-.mdc-chip__icon--leading {
-  transition: opacity $mdc-chip-opacity-animation-duration linear;
-  opacity: 1;
-
-  + .mdc-chip__checkmark {
+.mdc-chip-set--filter {
+  .mdc-chip__icon--leading {
     transition: opacity $mdc-chip-opacity-animation-duration linear;
-    opacity: 0;
+    transition-delay: $mdc-chip-leading-icon-delay;
+    opacity: 1;
+
+    + .mdc-chip__checkmark {
+      transition: opacity $mdc-chip-opacity-animation-duration linear;
 
-    .mdc-chip__checkmark-svg {
-      transition: width 0ms;
+      // Delay the checkmark transition.
+      transition-delay: $mdc-chip-checkmark-with-leading-icon-delay;
+      opacity: 0;
+
+      .mdc-chip__checkmark-svg {
+        transition: width 0ms;
+      }
     }
   }
-}
 
-.mdc-chip--selected .mdc-chip__icon--leading {
-  opacity: 0;
+  .mdc-chip--selected .mdc-chip__icon--leading {
+    opacity: 0;
 
-  + .mdc-chip__checkmark {
-    // This ensures that the checkmark has zero width while the leading icon is still animating.
-    width: 0;
-    opacity: 1;
+    + .mdc-chip__checkmark {
+      // This ensures that the checkmark has zero width while the leading icon is still animating.
+      width: 0;
+      opacity: 1;
+    }
   }
-}
 
-.mdc-chip__icon--leading-hidden.mdc-chip__icon--leading {
-  width: 0;
+  .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading {
+    width: 0;
 
-  // This ensures that the leading icon doesn't fade in while the checkmark is fading out.
-  opacity: 0;
+    // This ensures that the leading icon doesn't fade in while the checkmark is fading out.
+    opacity: 0;
 
-  + .mdc-chip__checkmark {
-    width: $mdc-chip-leading-icon-size;
+    + .mdc-chip__checkmark {
+      width: $mdc-chip-leading-icon-size;
+    }
   }
 }

src/theme/material-components-web/radio/_mixins.scss

@@ -34,7 +34,7 @@
 @mixin mdc-radio-ink-color($color) {
   // stylelint-disable-next-line selector-max-specificity
   .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
-    @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 

src/theme/material-components-web/radio/mdc-radio.scss

@@ -41,7 +41,7 @@
   cursor: pointer;
 
   /* @alternate */
-  will-change: opacity, transform, border-color, background-color, color;
+  will-change: opacity, transform, border-color, color;
 
   // Container for radio circles and ripple.
   &__background {
@@ -88,7 +88,9 @@
     width: 100%;
     height: 100%;
     transform: scale(0, 0);
-    transition: mdc-radio-exit(transform), mdc-radio-exit(background-color);
+    transition: mdc-radio-exit(transform), mdc-radio-exit(border-color);
+    border-width: 10px;
+    border-style: solid;
     border-radius: 50%;
   }
 
@@ -124,7 +126,7 @@
     }
 
     .mdc-radio__inner-circle {
-      transition: mdc-radio-enter(transform), mdc-radio-enter(background-color);
+      transition: mdc-radio-enter(transform), mdc-radio-enter(border-color);
     }
   }
 }
@@ -138,7 +140,7 @@
   + .mdc-radio__background {
     .mdc-radio__inner-circle {
       transform: scale(.5);
-      transition: mdc-radio-enter(transform), mdc-radio-enter(background-color);
+      transition: mdc-radio-enter(transform), mdc-radio-enter(border-color);
     }
   }
 }
@@ -153,7 +155,7 @@
     }
 
     .mdc-radio__inner-circle {
-      background-color: $mdc-radio-circle-color;
+      border-color: $mdc-radio-circle-color;
     }
   }
 }

src/theme/material-components-web/rtl/_mixins.scss

@@ -168,7 +168,7 @@
   $prop-left: #{$base-property}-left;
   $prop-right: #{$base-property}-right;
 
-  @include mdc-rtl-reflexive_($prop-left, $left-value, $prop-right, $right-value, $root-selector);
+  @include mdc-rtl-reflexive($prop-left, $left-value, $prop-right, $right-value, $root-selector);
 }
 
 // Takes an argument specifying a horizontal position property (either "left" or "right") as well
@@ -209,10 +209,34 @@
     $left-value: initial;
   }
 
-  @include mdc-rtl-reflexive_(left, $left-value, right, $right-value, $root-selector);
+  @include mdc-rtl-reflexive(left, $left-value, right, $right-value, $root-selector);
 }
 
-@mixin mdc-rtl-reflexive_(
+// Takes pair of properties with values as arguments and flips it in RTL context.
+// For example:
+//
+// ```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`.
+@mixin mdc-rtl-reflexive(
   $left-property,
   $left-value,
   $right-property,

src/theme/material-components-web/switch/_mixins.scss

@@ -24,13 +24,15 @@
 @mixin mdc-switch-track-color($color) {
   .mdc-switch__native-control:enabled:checked ~ .mdc-switch__background::before {
     @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
 @mixin mdc-switch-knob-color($color) {
   // stylelint-disable-next-line selector-max-specificity
   .mdc-switch__native-control:enabled:checked ~ .mdc-switch__background .mdc-switch__knob {
     @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
@@ -48,13 +50,15 @@
 @mixin mdc-switch-unchecked-track-color_($color) {
   .mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background::before {
     @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
 @mixin mdc-switch-unchecked-knob-color_($color) {
   // stylelint-disable-next-line selector-max-specificity
   .mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background .mdc-switch__knob {
     @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
@@ -65,10 +69,18 @@
   }
 }
 
-@mixin mdc-switch-tap-target_ {
+@mixin mdc-switch-native-control_ {
   position: absolute;
   top: -14px;
   left: -14px;
   width: $mdc-switch-focus-ring-diameter;
   height: $mdc-switch-focus-ring-diameter;
 }
+
+@mixin mdc-switch-tap-target_ {
+  position: absolute;
+  top: -24px;
+  left: -24px;
+  width: $mdc-switch-focus-ring-diameter;
+  height: $mdc-switch-focus-ring-diameter;
+}

src/theme/material-components-web/switch/mdc-switch.scss

@@ -26,10 +26,11 @@
   position: relative;
 
   &__native-control {
-    @include mdc-switch-tap-target_;
+    @include mdc-switch-native-control_;
 
     display: inline-block;
     margin-top: $mdc-switch-knob-vertical-offset_;
+    margin-left: 0;
     transition: mdc-switch-transition(transform);
     opacity: 0;
     cursor: pointer;
@@ -73,7 +74,9 @@
     left: 0;
     transition:
       mdc-switch-transition(opacity),
-      mdc-switch-transition(background-color);
+      mdc-switch-transition(background-color),
+      mdc-switch-transition(border-color);
+    border: 1px solid;
     border-radius: 7px;
     opacity: .38;
     content: "";
@@ -87,12 +90,15 @@
   display: block;
   position: absolute;
   top: $mdc-switch-knob-vertical-offset_;
+  box-sizing: border-box;
   width: $mdc-switch-knob-diameter;
   height: $mdc-switch-knob-diameter;
   transform: translateX(0);
   transition:
     mdc-switch-transition(transform),
-    mdc-switch-transition(background-color);
+    mdc-switch-transition(background-color),
+    mdc-switch-transition(border-color);
+  border: $mdc-switch-knob-diameter / 2 solid;
   border-radius: 50%;
   z-index: 1;
 
@@ -149,6 +155,8 @@
   }
 
   .mdc-switch__knob {
+    border-width: 1px;  // In high contrast mode, only show outline of the knob.
+    border-color: $mdc-switch-disabled-knob-color;
     background-color: $mdc-switch-disabled-knob-color;
   }
 }