From cf4bfcdc451f1a648120a84c4a9cb56ddc8a2d57 Mon Sep 17 00:00:00 2001
From: Dominik Geng <domske@mailbox.org>
Date: Wed, 24 Feb 2021 00:58:51 +0100
Subject: [PATCH 1/9] Reverted to 5.5.4

---
 .../components/progress-bar/progress-bar.scss | 39 +++++++------------
 .../components/progress-bar/progress-bar.tsx  |  9 ++---
 2 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 5e1ff446146..2f70b8d6656 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -10,7 +10,7 @@
   * @prop --progress-background: Color of the progress bar
   * @prop --buffer-background: Color of the buffer bar
   */
-  --background: #{ion-color(primary, base, 0.3)};
+  --background: #{ion-color(primary, base, 0.2)};
   --progress-background: #{ion-color(primary, base)};
   --buffer-background: var(--background);
   display: block;
@@ -27,7 +27,7 @@
 
 :host(.ion-color) {
   --progress-background: #{current-color(base)};
-  --buffer-background: #{current-color(base, 0.3)};
+  --buffer-background: #{current-color(base, 0.2)};
 }
 
 // indeterminate has no progress-buffer-bar, so it will be added to the host
@@ -72,10 +72,17 @@
 }
 
 .progress-buffer-bar {
-  background: var(--buffer-background);
+  // It's currently here because --buffer-background has an alpha
+  // Otherwise the buffer circles would be seen through
+  background: #fff;
+
+  z-index: 1; // Make it behind the progress
 
-  // Make it behind the progress
-  z-index: 1;
+  &:before {
+    background: var(--buffer-background);
+
+    content: "";
+  }
 }
 
 // MD based animation on indeterminate type
@@ -102,7 +109,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  left: -54.888891%;
+  left:  -54.888891%;
   /* stylelint-enable property-blacklist */
 
   animation: secondary-indeterminate-translate 2s infinite linear;
@@ -116,26 +123,8 @@
 // Buffer style
 // --------------------------------------------------
 
-.buffer-circles.buffer-circles-reversed {
-  /* stylelint-disable property-blacklist */
-  right: unset;
-  left: 2px;
-
-  background-position: right;
-  /* stylelint-enable property-blacklist */
-}
-
 .buffer-circles {
-  /* stylelint-disable property-blacklist */
-  right: -8px;
-
-  left: unset;
-  /* stylelint-enable property-blacklist */
-
-  background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px;
-
-  /* stylelint-disable-next-line property-blacklist */
-  background-position: left;
+  background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px center;
   background-size: 10px 10px;
 
   z-index: 0;
diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index aeb9f70b871..ee952e64ab2 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -54,7 +54,6 @@ export class ProgressBar implements ComponentInterface {
     const { color, type, reversed, value, buffer } = this;
     const paused = config.getBoolean('_testing');
     const mode = getIonMode(this);
-    const isReversed = document.dir === 'rtl' ? !reversed : reversed;
     return (
       <Host
         role="progressbar"
@@ -65,12 +64,12 @@ export class ProgressBar implements ComponentInterface {
           [mode]: true,
           [`progress-bar-${type}`]: true,
           'progress-paused': paused,
-          'progress-bar-reversed': isReversed
+          'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
         })}
       >
         {type === 'indeterminate'
           ? renderIndeterminate()
-          : renderProgress(value, buffer, isReversed)
+          : renderProgress(value, buffer)
         }
       </Host>
     );
@@ -84,13 +83,13 @@ const renderIndeterminate = () => {
   ];
 };
 
-const renderProgress = (value: number, buffer: number, reversed: boolean) => {
+const renderProgress = (value: number, buffer: number) => {
   const finalValue = clamp(0, value, 1);
   const finalBuffer = clamp(0, buffer, 1);
 
   return [
     <div class="progress" style={{ transform: `scaleX(${finalValue})` }}></div>,
-    finalBuffer !== 1 && <div class={{ 'buffer-circles': true, 'buffer-circles-reversed': reversed }} style={{ width: `calc(${(1 - finalBuffer) * 100}%)` }}></div>,
+    finalBuffer !== 1 && <div class="buffer-circles"></div>,
     <div class="progress-buffer-bar" style={{ transform: `scaleX(${finalBuffer})` }}></div>,
   ];
 };

From eca201b79c4f07f6f3478790680aac7997d035e2 Mon Sep 17 00:00:00 2001
From: Dominik Geng <domske@mailbox.org>
Date: Wed, 24 Feb 2021 01:16:23 +0100
Subject: [PATCH 2/9] fix(progress-bar): use theme color. This could replace
 #22964 and fixes #20098.

---
 .../components/progress-bar/progress-bar.scss | 58 +++++++++----------
 .../components/progress-bar/progress-bar.tsx  | 22 ++++++-
 2 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 2f70b8d6656..f4ce9ed6ed3 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -39,26 +39,33 @@
 .progress-indeterminate,
 .indeterminate-bar-primary,
 .indeterminate-bar-secondary,
-.progress-buffer-bar,
-.progress-buffer-bar:before,
-.buffer-circles {
+.progress-buffer-bar {
   @include position(0, 0, 0, 0);
-
   position: absolute;
-
   width: 100%;
   height: 100%;
 }
 
+.buffer-circles-container,
+.buffer-circles {
+  @include position(0, 0, 0, 0);
+  position: absolute;
+}
+
+// Extend a bit to overflow. The size of animated distance.
+.buffer-circles {
+  left: -10px;
+  right: -10px;
+}
+
 // Determinate progress bar
 // --------------------------------------------------
 
 .progress,
-.progress-buffer-bar {
-  /* stylelint-disable-next-line property-blacklist */
-  transform-origin: left top;
-
+.progress-buffer-bar,
+.buffer-circles-container {
   transition: transform 150ms linear;
+  transform-origin: left top;
 }
 
 // Progress and background bar
@@ -67,21 +74,19 @@
 .progress,
 .progress-indeterminate {
   background: var(--progress-background);
-
   z-index: 2;
 }
 
 .progress-buffer-bar {
-  // It's currently here because --buffer-background has an alpha
-  // Otherwise the buffer circles would be seen through
-  background: #fff;
-
-  z-index: 1; // Make it behind the progress
-
-  &:before {
-    background: var(--buffer-background);
+  background: var(--buffer-background);
+  z-index: 1;
+}
 
-    content: "";
+.buffer-circles-container {
+  overflow: hidden;
+  &.hidden {
+    // Moved from tsx due to transition issue.
+    display: none;
   }
 }
 
@@ -109,7 +114,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  left:  -54.888891%;
+  left: -54.888891%;
   /* stylelint-enable property-blacklist */
 
   animation: secondary-indeterminate-translate 2s infinite linear;
@@ -136,18 +141,7 @@
 // --------------------------------------------------
 
 :host(.progress-bar-reversed) {
-  .progress,
-  .progress-buffer-bar {
-    /* stylelint-disable-next-line property-blacklist */
-    transform-origin: right top;
-  }
-
-  .buffer-circles,
-  .indeterminate-bar-primary,
-  .indeterminate-bar-secondary,
-  .progress-indeterminate {
-    animation-direction: reverse;
-  }
+  transform: scaleX(-1);
 }
 
 // Progress paused
diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index ee952e64ab2..400cede4f04 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -89,7 +89,25 @@ const renderProgress = (value: number, buffer: number) => {
 
   return [
     <div class="progress" style={{ transform: `scaleX(${finalValue})` }}></div>,
-    finalBuffer !== 1 && <div class="buffer-circles"></div>,
-    <div class="progress-buffer-bar" style={{ transform: `scaleX(${finalBuffer})` }}></div>,
+    // Buffer circles with two container to move the circles behind the buffer progress with respecting the animation.
+    <div
+      class={{'buffer-circles-container': true, hidden: finalBuffer === 1}}
+      style={{
+        transform: `translateX(${finalBuffer * 100}%)`,
+      }}
+    >
+      <div
+        class="buffer-circles-container"
+        style={{
+          transform: `translateX(-${finalBuffer * 100}%)`,
+        }}
+      >
+        <div class="buffer-circles"></div>
+      </div>
+    </div>,
+    <div
+      class="progress-buffer-bar"
+      style={{ transform: `scaleX(${finalBuffer})` }}
+    ></div>,
   ];
 };

From dffffa7320162c86c569021922fb4ef99b28b2a2 Mon Sep 17 00:00:00 2001
From: Dominik Geng <domske@mailbox.org>
Date: Wed, 24 Feb 2021 10:53:19 +0100
Subject: [PATCH 3/9] Update progress-bar.scss

---
 core/src/components/progress-bar/progress-bar.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index f4ce9ed6ed3..5d8636257e4 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -65,6 +65,7 @@
 .progress-buffer-bar,
 .buffer-circles-container {
   transition: transform 150ms linear;
+  /* stylelint-disable-next-line property-blacklist */
   transform-origin: left top;
 }
 

From 7eecffa7252a323bfae1e665d7d49a850c1494e3 Mon Sep 17 00:00:00 2001
From: Dominik Geng <domske@mailbox.org>
Date: Wed, 24 Feb 2021 10:59:11 +0100
Subject: [PATCH 4/9] original dense format

---
 .../components/progress-bar/progress-bar.tsx   | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index 400cede4f04..5343a6da00f 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -90,24 +90,12 @@ const renderProgress = (value: number, buffer: number) => {
   return [
     <div class="progress" style={{ transform: `scaleX(${finalValue})` }}></div>,
     // Buffer circles with two container to move the circles behind the buffer progress with respecting the animation.
-    <div
-      class={{'buffer-circles-container': true, hidden: finalBuffer === 1}}
-      style={{
-        transform: `translateX(${finalBuffer * 100}%)`,
-      }}
-    >
-      <div
-        class="buffer-circles-container"
-        style={{
-          transform: `translateX(-${finalBuffer * 100}%)`,
-        }}
-      >
+    <div class={{ 'buffer-circles-container': true, hidden: finalBuffer === 1 }} style={{ transform: `translateX(${finalBuffer * 100}%)` }}>
+      <div class="buffer-circles-container" style={{ transform: `translateX(-${finalBuffer * 100}%)` }}>
         <div class="buffer-circles"></div>
       </div>
     </div>,
-    <div
-      class="progress-buffer-bar"
-      style={{ transform: `scaleX(${finalBuffer})` }}
+    <div class="progress-buffer-bar" style={{ transform: `scaleX(${finalBuffer})` }}
     ></div>,
   ];
 };

From c7138c654be4721ac08bdfd5e5f026062cea115c Mon Sep 17 00:00:00 2001
From: Dominik Geng <domske@mailbox.org>
Date: Wed, 24 Feb 2021 11:00:07 +0100
Subject: [PATCH 5/9] Update progress-bar.tsx

---
 core/src/components/progress-bar/progress-bar.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index 5343a6da00f..ac356cb430f 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -95,7 +95,6 @@ const renderProgress = (value: number, buffer: number) => {
         <div class="buffer-circles"></div>
       </div>
     </div>,
-    <div class="progress-buffer-bar" style={{ transform: `scaleX(${finalBuffer})` }}
-    ></div>,
+    <div class="progress-buffer-bar" style={{ transform: `scaleX(${finalBuffer})` }}></div>,
   ];
 };

From 35f85302034ada4a559c9d60cdf64527ef6d5c51 Mon Sep 17 00:00:00 2001
From: Dominik Geng <domske@mailbox.org>
Date: Wed, 24 Feb 2021 11:08:59 +0100
Subject: [PATCH 6/9] stylelint

---
 core/src/components/progress-bar/progress-bar.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 5d8636257e4..c7e3056cc53 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -54,8 +54,10 @@
 
 // Extend a bit to overflow. The size of animated distance.
 .buffer-circles {
+  /* stylelint-disable property-blacklist */
   left: -10px;
   right: -10px;
+  /* stylelint-enable property-blacklist */
 }
 
 // Determinate progress bar

From a595cae01e924c9c1b6ef44818cce8a518cb5405 Mon Sep 17 00:00:00 2001
From: Dominik Geng <domske@mailbox.org>
Date: Wed, 24 Feb 2021 14:51:51 +0100
Subject: [PATCH 7/9] fixed stylelint problems

---
 core/src/components/progress-bar/progress-bar.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index c7e3056cc53..e91cc43a78f 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -42,6 +42,7 @@
 .progress-buffer-bar {
   @include position(0, 0, 0, 0);
   position: absolute;
+
   width: 100%;
   height: 100%;
 }
@@ -55,8 +56,8 @@
 // Extend a bit to overflow. The size of animated distance.
 .buffer-circles {
   /* stylelint-disable property-blacklist */
-  left: -10px;
   right: -10px;
+  left: -10px;
   /* stylelint-enable property-blacklist */
 }
 
@@ -66,9 +67,10 @@
 .progress,
 .progress-buffer-bar,
 .buffer-circles-container {
-  transition: transform 150ms linear;
   /* stylelint-disable-next-line property-blacklist */
   transform-origin: left top;
+
+  transition: transform 150ms linear;
 }
 
 // Progress and background bar
@@ -77,11 +79,13 @@
 .progress,
 .progress-indeterminate {
   background: var(--progress-background);
+
   z-index: 2;
 }
 
 .progress-buffer-bar {
   background: var(--buffer-background);
+
   z-index: 1;
 }
 

From b509d8ca2e14b838a59c544d8a85c15a2ec7057f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 24 Feb 2021 11:44:40 -0500
Subject: [PATCH 8/9] a few style changes

---
 core/src/components/progress-bar/progress-bar.scss |  4 ----
 core/src/components/progress-bar/progress-bar.tsx  | 10 ++++++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index e91cc43a78f..368145d7050 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -91,10 +91,6 @@
 
 .buffer-circles-container {
   overflow: hidden;
-  &.hidden {
-    // Moved from tsx due to transition issue.
-    display: none;
-  }
 }
 
 // MD based animation on indeterminate type
diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index ac356cb430f..20d05d0e665 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -89,8 +89,14 @@ const renderProgress = (value: number, buffer: number) => {
 
   return [
     <div class="progress" style={{ transform: `scaleX(${finalValue})` }}></div>,
-    // Buffer circles with two container to move the circles behind the buffer progress with respecting the animation.
-    <div class={{ 'buffer-circles-container': true, hidden: finalBuffer === 1 }} style={{ transform: `translateX(${finalBuffer * 100}%)` }}>
+    /**
+     * Buffer circles with two container to move
+     * the circles behind the buffer progress
+     * with respecting the animation.
+     * When finalBuffer === 1, we use display: none
+     * instead of removing the element to avoid flickering.
+     */
+    <div class={{ 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }} style={{ transform: `translateX(${finalBuffer * 100}%)` }}>
       <div class="buffer-circles-container" style={{ transform: `translateX(-${finalBuffer * 100}%)` }}>
         <div class="buffer-circles"></div>
       </div>

From b3695f3c5a831468f45efd17b7f74f2d9be87783 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 24 Feb 2021 16:20:58 -0500
Subject: [PATCH 9/9] change opacity to 0.3

---
 core/src/components/progress-bar/progress-bar.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss
index 368145d7050..e9904e1d23c 100644
--- a/core/src/components/progress-bar/progress-bar.scss
+++ b/core/src/components/progress-bar/progress-bar.scss
@@ -10,7 +10,7 @@
   * @prop --progress-background: Color of the progress bar
   * @prop --buffer-background: Color of the buffer bar
   */
-  --background: #{ion-color(primary, base, 0.2)};
+  --background: #{ion-color(primary, base, 0.3)};
   --progress-background: #{ion-color(primary, base)};
   --buffer-background: var(--background);
   display: block;
@@ -27,7 +27,7 @@
 
 :host(.ion-color) {
   --progress-background: #{current-color(base)};
-  --buffer-background: #{current-color(base, 0.2)};
+  --buffer-background: #{current-color(base, 0.3)};
 }
 
 // indeterminate has no progress-buffer-bar, so it will be added to the host