refactor: update to MDC 4.0.0 stable (#17633)

Updates the repo to MDC 4.0.0 stable and fixes the breaking changes.

Author: crisbeto

package.json

@@ -42,7 +42,7 @@
   },
   "version": "9.0.0-rc.0",
   "requiredAngularVersion": "^9.0.0-0 || ^10.0.0-0",
-  "requiredMDCVersion": "^4.0.0-canary.062ade5c0.0",
+  "requiredMDCVersion": "^4.0.0",
   "dependencies": {
     "@angular/animations": "^9.0.0-rc.0",
     "@angular/common": "^9.0.0-rc.0",
@@ -55,7 +55,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "^4.0.0-canary.062ade5c0.0",
+    "material-components-web": "^4.0.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tsickle": "^0.37.0",

packages.bzl

@@ -2,7 +2,7 @@
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^9.0.0-0 || ^10.0.0-0"
-MDC_PACKAGE_VERSION = "^4.0.0-canary.062ade5c0.0"
+MDC_PACKAGE_VERSION = "^4.0.0"
 VERSION_PLACEHOLDER_REPLACEMENTS = {
     "0.0.0-MDC": MDC_PACKAGE_VERSION,
     "0.0.0-NG": ANGULAR_PACKAGE_VERSION,

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

@@ -47,6 +47,7 @@ sass_binary(
         "external/npm/node_modules",
     ],
     deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
         "//src/material/core:core_scss_lib",
     ],

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

@@ -4,6 +4,7 @@
 @import '../../material/core/style/menu-common';
 @import '../../material/core/style/button-common';
 @import '../../cdk/a11y/a11y';
+@import '../mdc-helpers/mdc-helpers';
 
 @include mdc-menu-surface-core-styles($query: structure);
 
@@ -28,13 +29,20 @@
 }
 
 .mat-mdc-menu-item {
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-list-single-line-density-config,
+    $density-scale: $mdc-list-single-line-density-scale,
+    $property-name: height,
+  );
+
   // Note that we include this private mixin, because the public
   // one adds a bunch of styles that we aren't using for the menu.
   @include mdc-list-item-base_;
 
   // MDC's menu items are `<li>` nodes which don't need resets, however ours
   // can be anything, including buttons, so we need to do the reset ourselves.
   @include mat-button-reset;
+  @include mdc-list-single-line-height($height, $query: $mat-base-styles-query);
   cursor: pointer;
   width: 100%;
   text-align: left;

src/material-experimental/mdc-progress-bar/progress-bar.spec.ts

@@ -73,16 +73,16 @@ describe('MatProgressBar', () => {
           progressElement.nativeElement.querySelector('.mdc-linear-progress__buffer').style;
 
         expect(primaryStyles.transform).toBe('scaleX(0)');
-        expect(bufferStyles.transform).toBeFalsy();
+        expect(bufferStyles.transform).toBe('scaleX(1)');
 
         progressComponent.value = 40;
         expect(primaryStyles.transform).toBe('scaleX(0.4)');
-        expect(bufferStyles.transform).toBeFalsy();
+        expect(bufferStyles.transform).toBe('scaleX(1)');
 
         progressComponent.value = 35;
         progressComponent.bufferValue = 55;
         expect(primaryStyles.transform).toBe('scaleX(0.35)');
-        expect(bufferStyles.transform).toBeFalsy();
+        expect(bufferStyles.transform).toBe('scaleX(1)');
 
         progressComponent.mode = 'buffer';
         expect(primaryStyles.transform).toBe('scaleX(0.35)');

src/material-experimental/mdc-progress-bar/progress-bar.ts

@@ -81,18 +81,13 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
     addClass: (className: string) => this._rootElement.classList.add(className),
     getBuffer: () => this._bufferBar,
     getPrimaryBar: () => this._primaryBar,
-    // TODO(crisbeto): remove the ` as MDCLinearProgressAdapter` below once this is released:
-    // tslint:disable-next-line:max-line-length
-    // https://github.com/material-components/material-components-web/commit/062ade5c052cf00cefeee6e8e0acf7d16c4ce338
-    // We add `forceLayout` before the code requiring it is in the canary
-    // release so that our cronjob that runs against master doesn't fail.
     forceLayout: () => this._platform.isBrowser && this._rootElement.offsetWidth,
     hasClass: (className: string) => this._rootElement.classList.contains(className),
     removeClass: (className: string) => this._rootElement.classList.remove(className),
     setStyle: (el: HTMLElement, styleProperty: string, value: string) => {
       (el.style as any)[styleProperty] = value;
     }
-  } as MDCLinearProgressAdapter;
+  };
 
   /** Flag that indicates whether NoopAnimations mode is set to true. */
   _isNoopAnimation = false;