From fccaaf8a91f7e4750f99f7c8436847118f911d80 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 25 Mar 2019 13:03:19 -0400
Subject: [PATCH] fix(progress-bar): flip rtl using the existing reversed
 property (#17464)

updates the progress bar to always use the ltr dir but take advantage of the reversed property when dir is rtl.

references #17012
---
 .../components/progress-bar/progress-bar.scss | 26 ++++++++++++++++---
 .../components/progress-bar/progress-bar.tsx  |  2 +-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 1e45939b3d..2f70b8d665 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -20,6 +20,8 @@
   width: 100%;
 
   contain: strict;
+
+  direction: ltr;
   overflow: hidden;
 }
 
@@ -41,6 +43,7 @@
 .progress-buffer-bar:before,
 .buffer-circles {
   @include position(0, 0, 0, 0);
+
   position: absolute;
 
   width: 100%;
@@ -52,7 +55,9 @@
 
 .progress,
 .progress-buffer-bar {
-  @include transform-origin(start, top);
+  /* stylelint-disable-next-line property-blacklist */
+  transform-origin: left top;
+
   transition: transform 150ms linear;
 }
 
@@ -84,7 +89,13 @@
 // --------------------------------------------------
 
 .indeterminate-bar-primary {
-  @include position(0, 0, 0, -145.166611%);
+  /* stylelint-disable property-blacklist */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -145.166611%;
+  /* stylelint-enable property-blacklist */
+
   animation: primary-indeterminate-translate 2s infinite linear;
 
   .progress-indeterminate {
@@ -94,7 +105,13 @@
 }
 
 .indeterminate-bar-secondary {
-  @include position(0, 0, 0, -54.888891%);
+  /* stylelint-disable property-blacklist */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left:  -54.888891%;
+  /* stylelint-enable property-blacklist */
+
   animation: secondary-indeterminate-translate 2s infinite linear;
 
   .progress-indeterminate {
@@ -121,7 +138,8 @@
 :host(.progress-bar-reversed) {
   .progress,
   .progress-buffer-bar {
-    @include transform-origin(end, top);
+    /* stylelint-disable-next-line property-blacklist */
+    transform-origin: right top;
   }
 
   .buffer-circles,
diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index 35a705afc4..badd6d1fea 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -64,7 +64,7 @@ export class ProgressBar implements ComponentInterface {
         ...createColorClasses(color),
         [`progress-bar-${type}`]: true,
         'progress-paused': paused,
-        'progress-bar-reversed': reversed,
+        'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
       }
     };
   }