refactor(linear-progress): Restructure buffer DOM to allow translucen…

…t buffer

BREAKING CHANGE: DOM for linear progress buffer changed. MDCLinearProgressAdapter method `getBuffer`, `getPrimaryBar`, `setStyle` removed. MDCLinearProgressAdapter method `setBufferBarStyle`, `setPrimaryBarStyle` added.

PiperOrigin-RevId: 299133963

packages/mdc-linear-progress/README.md

@@ -42,8 +42,10 @@ npm install @material/linear-progress
 
 ```html
 <div role="progressbar" class="mdc-linear-progress" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
-  <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>
@@ -111,10 +113,9 @@ The adapter for linear progress must provide the following functions, with corre
 | `removeClass(className: string) => void` | Removes a class from the root element. |
 | `hasClass(className: string) => boolean` | Returns boolean indicating whether the root element has a given class. |
 | `forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. |
-| `getPrimaryBar() => Element` | Returns the primary bar element. |
-| `getBuffer() => Element` | Returns the buffer element. |
 | `setAttribute(attributeName: string, value: string) => void` | Sets the specified attribute on the root element. |
-| `setStyle(el: Element, styleProperty: string, value: string) => void` | Sets the inline style on the given element. |
+| `setBufferBarStyle(styleProperty: string, value: string) => void` | Sets the inline style on the buffer bar. |
+| `setPrimaryBarStyle(styleProperty: string, value: string) => void` | Sets the inline style on the primary bar. |
 
 ### MDCLinearProgressFoundation API
 

packages/mdc-linear-progress/_keyframes.scss

@@ -112,8 +112,11 @@
 
 @mixin buffering-keyframes_ {
   @keyframes mdc-linear-progress-buffering {
-    to {
-      transform: translateX(-10px);
+    from {
+      // Normally the buffer dots start from the left and overflow to the right.
+      // We rotate by 180deg so that the buffer dots start on the right when
+      // in non-reversed mode and overflow to the left.
+      transform: rotate(180deg) translateX(-10px);
     }
   }
 }
@@ -165,8 +168,8 @@
 
 @mixin buffering-reverse-keyframes_ {
   @keyframes mdc-linear-progress-buffering-reverse {
-    to {
-      transform: translateX(10px);
+    from {
+      transform: translateX(-10px);
     }
   }
 }

packages/mdc-linear-progress/_mixins.scss

@@ -87,30 +87,35 @@
       }
     }
 
-    &__buffering-dots {
+    &__buffer {
       @include feature-targeting-mixins.targets($feat-structure) {
+        display: flex;
         position: absolute;
         width: 100%;
         height: 100%;
+      }
+    }
+
+    &__buffer-dots {
+      @include feature-targeting-mixins.targets($feat-structure) {
         background-repeat: repeat-x;
         background-size: 10px variables.$height;
+        flex: auto;
+        transform: rotate(180deg);
       }
 
       @include feature-targeting-mixins.targets($feat-animation) {
         animation: mdc-linear-progress-buffering 250ms infinite linear;
       }
     }
 
-    &__buffer {
+    &__buffer-bar {
       @include feature-targeting-mixins.targets($feat-structure) {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        transform-origin: top left;
+        flex: 0 1 100%;
       }
 
       @include feature-targeting-mixins.targets($feat-animation) {
-        transition: animation-functions.exit-temporary(transform, 250ms);
+        transition: animation-functions.exit-temporary(flex-basis, 250ms);
       }
     }
 
@@ -180,15 +185,15 @@
   $color-value-for-svg: str-replace_(string.unquote("#{$color-value-for-css}"), "#", "%23");
   $feat-color: feature-targeting-functions.create-target($query, color);
 
-  .mdc-linear-progress__buffering-dots {
+  .mdc-linear-progress__buffer-dots {
     @include feature-targeting-mixins.targets($feat-color) {
       // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
       // stylelint-disable-next-line function-url-quotes
       background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='#{$color-value-for-svg}'/%3E%3C/svg%3E");
     }
   }
 
-  .mdc-linear-progress__buffer {
+  .mdc-linear-progress__buffer-bar {
     @include feature-targeting-mixins.targets($feat-color) {
       background-color: $color-value-for-css;
     }
@@ -250,8 +255,7 @@
   $feat-animation: feature-targeting-functions.create-target($query, animation);
 
   &--reversed {
-    .mdc-linear-progress__bar,
-    .mdc-linear-progress__buffer {
+    .mdc-linear-progress__bar {
       @include feature-targeting-mixins.targets($feat-structure) {
         right: 0;
         transform-origin: center right;
@@ -270,10 +274,21 @@
       }
     }
 
-    .mdc-linear-progress__buffering-dots {
+    .mdc-linear-progress__buffer-dots {
       @include feature-targeting-mixins.targets($feat-animation) {
         animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
       }
+
+      @include feature-targeting-mixins.targets($feat-structure) {
+        order: 0;
+        transform: rotate(0);
+      }
+    }
+
+    .mdc-linear-progress__buffer-bar {
+      @include feature-targeting-mixins.targets($feat-structure) {
+        order: 1;
+      }
     }
   }
 }

packages/mdc-linear-progress/adapter.ts

@@ -31,11 +31,10 @@
 export interface MDCLinearProgressAdapter {
   addClass(className: string): void;
   forceLayout(): void;
-  getBuffer(): HTMLElement | null;
-  getPrimaryBar(): HTMLElement | null;
+  setBufferBarStyle(styleProperty: string, value: string): void;
+  setPrimaryBarStyle(styleProperty: string, value: string): void;
   hasClass(className: string): boolean;
   removeClass(className: string): void;
   removeAttribute(name: string): void;
   setAttribute(name: string, value: string): void;
-  setStyle(el: HTMLElement, styleProperty: string, value: string): void;
 }

packages/mdc-linear-progress/component.ts

@@ -62,17 +62,27 @@ export class MDCLinearProgress extends
     const adapter: MDCLinearProgressAdapter = {
       addClass: (className: string) => this.root_.classList.add(className),
       forceLayout: () => (this.root_ as HTMLElement).offsetWidth,
-      getBuffer: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.BUFFER_SELECTOR),
-      getPrimaryBar: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR),
+      setBufferBarStyle: (styleProperty: string, value: string) => {
+        (this.root_.querySelector(
+             MDCLinearProgressFoundation.strings.BUFFER_BAR_SELECTOR) as
+         HTMLElement)
+            .style.setProperty(styleProperty, value);
+      },
+      setPrimaryBarStyle: (styleProperty: string, value: string) => {
+        (this.root_.querySelector(
+             MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR) as
+         HTMLElement)
+            .style.setProperty(styleProperty, value);
+      },
       hasClass: (className: string) => this.root_.classList.contains(className),
       removeAttribute: (attributeName: string) => {
         this.root_.removeAttribute(attributeName);
       },
-      removeClass: (className: string) => this.root_.classList.remove(className),
+      removeClass: (className: string) =>
+          this.root_.classList.remove(className),
       setAttribute: (attributeName: string, value: string) => {
         this.root_.setAttribute(attributeName, value);
       },
-      setStyle: (el: HTMLElement, styleProperty: string, value: string) => el.style.setProperty(styleProperty, value),
     };
     return new MDCLinearProgressFoundation(adapter);
   }

packages/mdc-linear-progress/constants.ts

@@ -29,6 +29,7 @@ export const cssClasses = {
 
 export const strings = {
   ARIA_VALUENOW: 'aria-valuenow',
-  BUFFER_SELECTOR: '.mdc-linear-progress__buffer',
+  BUFFER_BAR_SELECTOR: '.mdc-linear-progress__buffer-bar',
+  FLEX_BASIS: 'flex-basis',
   PRIMARY_BAR_SELECTOR: '.mdc-linear-progress__primary-bar',
 };

packages/mdc-linear-progress/foundation.ts

@@ -42,13 +42,12 @@ export class MDCLinearProgressFoundation extends
     return {
       addClass: () => undefined,
       forceLayout: () => undefined,
-      getBuffer: () => null,
-      getPrimaryBar: () => null,
+      setBufferBarStyle: () => null,
+      setPrimaryBarStyle: () => null,
       hasClass: () => false,
       removeAttribute: () => undefined,
       removeClass: () => undefined,
       setAttribute: () => undefined,
-      setStyle: () => undefined,
     };
   }
 
@@ -74,39 +73,41 @@ export class MDCLinearProgressFoundation extends
     if (this.isDeterminate_) {
       this.adapter_.removeClass(cssClasses.INDETERMINATE_CLASS);
       this.adapter_.setAttribute(strings.ARIA_VALUENOW, this.progress_.toString());
-      this.setScale_(this.adapter_.getPrimaryBar(), this.progress_);
-      this.setScale_(this.adapter_.getBuffer(), this.buffer_);
-    } else {
-      if (this.isReversed_) {
-        // Adding/removing REVERSED_CLASS starts a translate animation, while
-        // adding INDETERMINATE_CLASS starts a scale animation. Here, we reset
-        // the translate animation in order to keep it in sync with the new
-        // scale animation that will start from adding INDETERMINATE_CLASS
-        // below.
-        this.adapter_.removeClass(cssClasses.REVERSED_CLASS);
-        this.adapter_.forceLayout();
-        this.adapter_.addClass(cssClasses.REVERSED_CLASS);
-      }
+      this.setPrimaryBarProgress_(this.progress_);
+      this.setBufferBarProgress_(this.buffer_);
 
-      this.adapter_.addClass(cssClasses.INDETERMINATE_CLASS);
-      this.adapter_.removeAttribute(strings.ARIA_VALUENOW);
-      this.setScale_(this.adapter_.getPrimaryBar(), 1);
-      this.setScale_(this.adapter_.getBuffer(), 1);
+      return;
+    }
+
+    if (this.isReversed_) {
+      // Adding/removing REVERSED_CLASS starts a translate animation, while
+      // adding INDETERMINATE_CLASS starts a scale animation. Here, we reset
+      // the translate animation in order to keep it in sync with the new
+      // scale animation that will start from adding INDETERMINATE_CLASS
+      // below.
+      this.adapter_.removeClass(cssClasses.REVERSED_CLASS);
+      this.adapter_.forceLayout();
+      this.adapter_.addClass(cssClasses.REVERSED_CLASS);
     }
+
+    this.adapter_.addClass(cssClasses.INDETERMINATE_CLASS);
+    this.adapter_.removeAttribute(strings.ARIA_VALUENOW);
+    this.setPrimaryBarProgress_(1);
+    this.setBufferBarProgress_(1);
   }
 
   setProgress(value: number) {
     this.progress_ = value;
     if (this.isDeterminate_) {
-      this.setScale_(this.adapter_.getPrimaryBar(), value);
+      this.setPrimaryBarProgress_(value);
       this.adapter_.setAttribute(strings.ARIA_VALUENOW, value.toString());
     }
   }
 
   setBuffer(value: number) {
     this.buffer_ = value;
     if (this.isDeterminate_) {
-      this.setScale_(this.adapter_.getBuffer(), value);
+      this.setBufferBarProgress_(value);
     }
   }
 
@@ -126,9 +127,10 @@ export class MDCLinearProgressFoundation extends
 
     if (this.isReversed_) {
       this.adapter_.addClass(cssClasses.REVERSED_CLASS);
-    } else {
-      this.adapter_.removeClass(cssClasses.REVERSED_CLASS);
+      return;
     }
+
+    this.adapter_.removeClass(cssClasses.REVERSED_CLASS);
   }
 
   open() {
@@ -139,12 +141,15 @@ export class MDCLinearProgressFoundation extends
     this.adapter_.addClass(cssClasses.CLOSED_CLASS);
   }
 
-  private setScale_(el: HTMLElement | null, scaleValue: number) {
-    if (!el) {
-      return;
-    }
-    const value = `scaleX(${scaleValue})`;
-    this.adapter_.setStyle(el, getCorrectPropertyName(window, 'transform'), value);
+  private setPrimaryBarProgress_(progressValue: number) {
+    const value = `scaleX(${progressValue})`;
+    this.adapter_.setPrimaryBarStyle(
+        getCorrectPropertyName(window, 'transform'), value);
+  }
+
+  private setBufferBarProgress_(progressValue: number) {
+    const value = `${progressValue * 100}%`;
+    this.adapter_.setBufferBarStyle(strings.FLEX_BASIS, value);
   }
 }
 

packages/mdc-linear-progress/test/component.test.ts

@@ -29,8 +29,10 @@ function getFixture() {
   wrapper.innerHTML = `
     <div role="progressbar" class="mdc-linear-progress" aria-label="Unit Test Progress Bar" aria-valuemin="0"
       aria-valuemax="1" aria-valuenow="0">
-      <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>
@@ -89,11 +91,12 @@ describe('MDCLinearProgress', () => {
     component.buffer = 0.5;
     const buffer =
         root.querySelector(
-            MDCLinearProgressFoundation.strings.BUFFER_SELECTOR) as HTMLElement;
+            MDCLinearProgressFoundation.strings.BUFFER_BAR_SELECTOR) as
+        HTMLElement;
     // External GitHub TS compiler insists that `buffer.style.transform` could
     // be null
     // tslint:disable-next-line:no-unnecessary-type-assertion
-    expect('scaleX(0.5)').toEqual(buffer.style.transform as string);
+    expect('50%').toEqual(buffer.style.flexBasis as string);
   });
 
   it('set reverse', () => {