fix(linear-progress): Temporary rollback of #5656 while updating down…

…stream dependencies PiperOrigin-RevId: 298707000
material-components · Mar 3, 2020 · 9cf5e98 · 9cf5e98
1 parent 9372e49
commit 9cf5e98
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 117 deletions.
diff --git a/packages/mdc-linear-progress/README.md b/packages/mdc-linear-progress/README.md
@@ -42,10 +42,8 @@ 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__buffer">
-    <div class="mdc-linear-progress__buffer-bar"></div>
-    <div class="mdc-linear-progress__buffer-dots"></div>
-  </div>
+  <div class="mdc-linear-progress__buffering-dots"></div>
+  <div class="mdc-linear-progress__buffer"></div>
   <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
     <span class="mdc-linear-progress__bar-inner"></span>
   </div>
@@ -113,9 +111,10 @@ 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. |
-| `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. |
+| `setStyle(el: Element, styleProperty: string, value: string) => void` | Sets the inline style on the given element. |
 
 ### MDCLinearProgressFoundation API
 

diff --git a/packages/mdc-linear-progress/_keyframes.scss b/packages/mdc-linear-progress/_keyframes.scss
@@ -112,11 +112,8 @@
 
 @mixin buffering-keyframes_ {
   @keyframes mdc-linear-progress-buffering {
-    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);
+    to {
+      transform: translateX(-10px);
     }
   }
 }
@@ -168,8 +165,8 @@
 
 @mixin buffering-reverse-keyframes_ {
   @keyframes mdc-linear-progress-buffering-reverse {
-    from {
-      transform: translateX(-10px);
+    to {
+      transform: translateX(10px);
     }
   }
 }
diff --git a/packages/mdc-linear-progress/_mixins.scss b/packages/mdc-linear-progress/_mixins.scss
@@ -87,35 +87,30 @@
       }
     }
 
-    &__buffer {
+    &__buffering-dots {
       @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-bar {
+    &__buffer {
       @include feature-targeting-mixins.targets($feat-structure) {
-        flex: 0 1 100%;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transform-origin: top left;
       }
 
       @include feature-targeting-mixins.targets($feat-animation) {
-        transition: animation-functions.exit-temporary(flex-basis, 250ms);
+        transition: animation-functions.exit-temporary(transform, 250ms);
       }
     }
 
@@ -185,15 +180,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__buffer-dots {
+  .mdc-linear-progress__buffering-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-bar {
+  .mdc-linear-progress__buffer {
     @include feature-targeting-mixins.targets($feat-color) {
       background-color: $color-value-for-css;
     }
@@ -255,7 +250,8 @@
   $feat-animation: feature-targeting-functions.create-target($query, animation);
 
   &--reversed {
-    .mdc-linear-progress__bar {
+    .mdc-linear-progress__bar,
+    .mdc-linear-progress__buffer {
       @include feature-targeting-mixins.targets($feat-structure) {
         right: 0;
         transform-origin: center right;
@@ -274,21 +270,10 @@
       }
     }
 
-    .mdc-linear-progress__buffer-dots {
+    .mdc-linear-progress__buffering-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;
-      }
     }
   }
 }

diff --git a/packages/mdc-linear-progress/adapter.ts b/packages/mdc-linear-progress/adapter.ts
@@ -31,10 +31,11 @@
 export interface MDCLinearProgressAdapter {
   addClass(className: string): void;
   forceLayout(): void;
-  setBufferBarStyle(styleProperty: string, value: string): void;
-  setPrimaryBarStyle(styleProperty: string, value: string): void;
+  getBuffer(): HTMLElement | null;
+  getPrimaryBar(): HTMLElement | null;
   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;
 }
diff --git a/packages/mdc-linear-progress/component.ts b/packages/mdc-linear-progress/component.ts
@@ -62,27 +62,17 @@ export class MDCLinearProgress extends
     const adapter: MDCLinearProgressAdapter = {
       addClass: (className: string) => this.root_.classList.add(className),
       forceLayout: () => (this.root_ as HTMLElement).offsetWidth,
-      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);
-      },
+      getBuffer: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.BUFFER_SELECTOR),
+      getPrimaryBar: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR),
       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);
   }

diff --git a/packages/mdc-linear-progress/constants.ts b/packages/mdc-linear-progress/constants.ts
@@ -29,7 +29,6 @@ export const cssClasses = {
 
 export const strings = {
   ARIA_VALUENOW: 'aria-valuenow',
-  BUFFER_BAR_SELECTOR: '.mdc-linear-progress__buffer-bar',
-  FLEX_BASIS: 'flex-basis',
+  BUFFER_SELECTOR: '.mdc-linear-progress__buffer',
   PRIMARY_BAR_SELECTOR: '.mdc-linear-progress__primary-bar',
 };
diff --git a/packages/mdc-linear-progress/foundation.ts b/packages/mdc-linear-progress/foundation.ts
@@ -42,12 +42,13 @@ export class MDCLinearProgressFoundation extends
     return {
       addClass: () => undefined,
       forceLayout: () => undefined,
-      setBufferBarStyle: () => null,
-      setPrimaryBarStyle: () => null,
+      getBuffer: () => null,
+      getPrimaryBar: () => null,
       hasClass: () => false,
       removeAttribute: () => undefined,
       removeClass: () => undefined,
       setAttribute: () => undefined,
+      setStyle: () => undefined,
     };
   }
 
@@ -73,41 +74,39 @@ export class MDCLinearProgressFoundation extends
     if (this.isDeterminate_) {
       this.adapter_.removeClass(cssClasses.INDETERMINATE_CLASS);
       this.adapter_.setAttribute(strings.ARIA_VALUENOW, this.progress_.toString());
-      this.setPrimaryBarProgress_(this.progress_);
-      this.setBufferBarProgress_(this.buffer_);
+      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);
+      }
 
-      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.setScale_(this.adapter_.getPrimaryBar(), 1);
+      this.setScale_(this.adapter_.getBuffer(), 1);
     }
-
-    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.setPrimaryBarProgress_(value);
+      this.setScale_(this.adapter_.getPrimaryBar(), value);
       this.adapter_.setAttribute(strings.ARIA_VALUENOW, value.toString());
     }
   }
 
   setBuffer(value: number) {
     this.buffer_ = value;
     if (this.isDeterminate_) {
-      this.setBufferBarProgress_(value);
+      this.setScale_(this.adapter_.getBuffer(), value);
     }
   }
 
@@ -127,10 +126,9 @@ export class MDCLinearProgressFoundation extends
 
     if (this.isReversed_) {
       this.adapter_.addClass(cssClasses.REVERSED_CLASS);
-      return;
+    } else {
+      this.adapter_.removeClass(cssClasses.REVERSED_CLASS);
     }
-
-    this.adapter_.removeClass(cssClasses.REVERSED_CLASS);
   }
 
   open() {
@@ -141,15 +139,12 @@ export class MDCLinearProgressFoundation extends
     this.adapter_.addClass(cssClasses.CLOSED_CLASS);
   }
 
-  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);
+  private setScale_(el: HTMLElement | null, scaleValue: number) {
+    if (!el) {
+      return;
+    }
+    const value = `scaleX(${scaleValue})`;
+    this.adapter_.setStyle(el, getCorrectPropertyName(window, 'transform'), value);
   }
 }
 

diff --git a/packages/mdc-linear-progress/test/component.test.ts b/packages/mdc-linear-progress/test/component.test.ts
@@ -29,10 +29,8 @@ 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__buffer">
-        <div class="mdc-linear-progress__buffer-bar"></div>
-        <div class="mdc-linear-progress__buffer-dots"></div>
-      </div>
+      <div class="mdc-linear-progress__buffering-dots"></div>
+      <div class="mdc-linear-progress__buffer"></div>
       <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
         <span class="mdc-linear-progress__bar-inner"></span>
       </div>
@@ -91,12 +89,11 @@ describe('MDCLinearProgress', () => {
     component.buffer = 0.5;
     const buffer =
         root.querySelector(
-            MDCLinearProgressFoundation.strings.BUFFER_BAR_SELECTOR) as
-        HTMLElement;
+            MDCLinearProgressFoundation.strings.BUFFER_SELECTOR) as HTMLElement;
     // External GitHub TS compiler insists that `buffer.style.transform` could
     // be null
     // tslint:disable-next-line:no-unnecessary-type-assertion
-    expect('50%').toEqual(buffer.style.flexBasis as string);
+    expect('scaleX(0.5)').toEqual(buffer.style.transform as string);
   });
 
   it('set reverse', () => {