fix(material-experimental/mdc-progress-bar): account for breaking cha…

…nges in latest canary

Updates the repo to the latest MDC canary version and accounts for the breaking changes introduced in material-components/material-components-web@98b8434.

package.json

@@ -55,7 +55,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "^6.0.0-canary.265ecbad5.0",
+    "material-components-web": "6.0.0-canary.17b9699c4.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tslib": "^1.10.0",

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

@@ -1,6 +1,8 @@
 <div class="mdc-linear-progress">
-  <div class="mdc-linear-progress__buffering-dots"></div>
-  <div class="mdc-linear-progress__buffer"></div>
+  <div class="mdc-linear-progress__buffer">
+    <div class="mdc-linear-progress__buffer-bar"></div>
+    <div class="mdc-linear-progress__buffer-dots"></div>
+  </div>
   <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
     <span class="mdc-linear-progress__bar-inner"></span>
   </div>

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

@@ -69,28 +69,32 @@ describe('MDC-based MatProgressBar', () => {
         const primaryStyles =
             progressElement.nativeElement.querySelector('.mdc-linear-progress__primary-bar').style;
         const bufferStyles =
-          progressElement.nativeElement.querySelector('.mdc-linear-progress__buffer').style;
+          progressElement.nativeElement.querySelector('.mdc-linear-progress__buffer-bar').style;
+
+        // Parse out and round the value since different
+        // browsers return the value with a different precision.
+        const getBufferValue = () => Math.floor(parseInt(bufferStyles.flexBasis));
 
         expect(primaryStyles.transform).toBe('scaleX(0)');
-        expect(bufferStyles.transform).toBe('scaleX(1)');
+        expect(getBufferValue()).toBe(100);
 
         progressComponent.value = 40;
         expect(primaryStyles.transform).toBe('scaleX(0.4)');
-        expect(bufferStyles.transform).toBe('scaleX(1)');
+        expect(getBufferValue()).toBe(100);
 
         progressComponent.value = 35;
         progressComponent.bufferValue = 55;
         expect(primaryStyles.transform).toBe('scaleX(0.35)');
-        expect(bufferStyles.transform).toBe('scaleX(1)');
+        expect(getBufferValue()).toBe(100);
 
         progressComponent.mode = 'buffer';
         expect(primaryStyles.transform).toBe('scaleX(0.35)');
-        expect(bufferStyles.transform).toEqual('scaleX(0.55)');
+        expect(getBufferValue()).toEqual(55);
 
         progressComponent.value = 60;
         progressComponent.bufferValue = 60;
         expect(primaryStyles.transform).toBe('scaleX(0.6)');
-        expect(bufferStyles.transform).toEqual('scaleX(0.6)');
+        expect(getBufferValue()).toEqual(60);
       });
 
       it('should remove the `aria-valuenow` attribute in indeterminate mode', () => {

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

@@ -79,15 +79,16 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
   /** Adapter used by MDC to interact with the DOM. */
   private _adapter: MDCLinearProgressAdapter = {
     addClass: (className: string) => this._rootElement.classList.add(className),
-    getBuffer: () => this._bufferBar,
-    getPrimaryBar: () => this._primaryBar,
     forceLayout: () => this._platform.isBrowser && this._rootElement.offsetWidth,
     removeAttribute: (name: string) => this._rootElement.removeAttribute(name),
     setAttribute: (name: string, value: string) => this._rootElement.setAttribute(name, value),
     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;
+    setPrimaryBarStyle: (styleProperty: string, value: string) => {
+      (this._primaryBar.style as any)[styleProperty] = value;
+    },
+    setBufferBarStyle: (styleProperty: string, value: string) => {
+      (this._bufferBar.style as any)[styleProperty] = value;
     }
   };
 
@@ -151,7 +152,7 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
 
     this._rootElement = element.querySelector('.mdc-linear-progress') as HTMLElement;
     this._primaryBar = element.querySelector('.mdc-linear-progress__primary-bar') as HTMLElement;
-    this._bufferBar = element.querySelector('.mdc-linear-progress__buffer') as HTMLElement;
+    this._bufferBar = element.querySelector('.mdc-linear-progress__buffer-bar') as HTMLElement;
 
     this._foundation = new MDCLinearProgressFoundation(this._adapter);
     this._foundation.init();