build: update to latest MDC version (#17076)

Updates to the latest alpha version of MDC which includes some of the changes we need for the progress bar. Also fixes a breaking change in the tab styles.

Author: crisbeto

package.json

@@ -51,7 +51,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.1",
-    "material-components-web": "^4.0.0-alpha.0",
+    "material-components-web": "^4.0.0-canary.e851d4f40.0",
     "rxjs": "^6.5.2",
     "systemjs": "0.19.43",
     "tsickle": "^0.35.0",

src/material-experimental/mdc-button/button.scss

@@ -8,6 +8,8 @@
 @include mdc-button-without-ripple($query: $mat-base-styles-query);
 
 .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
+  @include mdc-button-density(0, $mat-base-styles-query);
+
   // Add an outline to make buttons more visible in high contrast mode. Stroked buttons
   // don't need a special look in high-contrast mode, because those already have an outline.
   @include cdk-high-contrast {

src/material-experimental/mdc-helpers/BUILD.bazel

@@ -38,6 +38,10 @@ sass_library(
         "@npm//:node_modules/@material/checkbox/_variables.scss",
         "@npm//:node_modules/@material/chips/_mixins.scss",
         "@npm//:node_modules/@material/chips/_variables.scss",
+        "@npm//:node_modules/@material/data-table/_mixins.scss",
+        "@npm//:node_modules/@material/data-table/_variables.scss",
+        "@npm//:node_modules/@material/density/_functions.scss",
+        "@npm//:node_modules/@material/density/_variables.scss",
         "@npm//:node_modules/@material/dialog/_mixins.scss",
         "@npm//:node_modules/@material/dialog/_variables.scss",
         "@npm//:node_modules/@material/drawer/_mixins.scss",
@@ -82,6 +86,7 @@ sass_library(
         "@npm//:node_modules/@material/ripple/_mixins.scss",
         "@npm//:node_modules/@material/ripple/_variables.scss",
         "@npm//:node_modules/@material/rtl/_mixins.scss",
+        "@npm//:node_modules/@material/rtl/_variables.scss",
         "@npm//:node_modules/@material/select/_functions.scss",
         "@npm//:node_modules/@material/select/_keyframes.scss",
         "@npm//:node_modules/@material/select/_mixins.scss",
@@ -101,7 +106,9 @@ sass_library(
         "@npm//:node_modules/@material/switch/_mixins.scss",
         "@npm//:node_modules/@material/switch/_variables.scss",
         "@npm//:node_modules/@material/tab-bar/_mixins.scss",
+        "@npm//:node_modules/@material/tab-bar/_variables.scss",
         "@npm//:node_modules/@material/tab-indicator/_mixins.scss",
+        "@npm//:node_modules/@material/tab-scroller/_mixins.scss",
         "@npm//:node_modules/@material/tab/_mixins.scss",
         "@npm//:node_modules/@material/tab/_variables.scss",
         "@npm//:node_modules/@material/textfield/_functions.scss",

src/material-experimental/mdc-tabs/_tabs-common.scss

@@ -1,13 +1,20 @@
 @import '@material/ripple/variables';
+@import '@material/tab/variables';
+@import '@material/tab/mixins';
 @import '../../material/core/style/variables';
 @import '../../material/core/style/noop-animation';
 @import '../../material/core/style/vendor-prefixes';
 @import '../../cdk/a11y/a11y';
+@import '../mdc-helpers/mdc-helpers';
 
 $mat-tab-animation-duration: 500ms !default;
 
 @mixin mat-mdc-tab {
   &.mdc-tab {
+    // This is usually included by MDC's tab bar, however we don't
+    // use it because we implement our own pagination.
+    @include mdc-tab-height($mdc-tab-height, $mat-base-styles-query);
+
     // MDC's tabs stretch to fit the header by default, whereas stretching on our current ones
     // is an opt-in behavior. Also technically we don't need to combine the two classes, but
     // we need the extra specificity to avoid issues with CSS insertion order.