fix(linear-progress): fix RTL rendering

Reverse mode is slated to be removed. In the future, set `dir="rtl"` on root instead.

PiperOrigin-RevId: 351699027

Author: allan-chen

packages/mdc-linear-progress/README.md

@@ -85,7 +85,6 @@ The provided modifiers are:
 | Class                 | Description                                             |
 | --------------------- | ------------------------------------------------------- |
 | `mdc-linear-progress--indeterminate`   | Puts the linear progress indicator in an indeterminate state. |
-| `mdc-linear-progress--reversed`  | Reverses the direction of the linear progress indicator.   |
 | `mdc-linear-progress--closed`  | Hides the linear progress indicator. |
 
 ### Sass Mixins
@@ -124,7 +123,6 @@ MDC Linear Progress Foundation exposes the following methods:
 | `setDeterminate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state. |
 | `setProgress(value: number) => void` | Sets the progress bar to this value. Value should be between [0, 1]. |
 | `setBuffer(value: number) => void` | Sets the buffer bar to this value. Value should be between [0, 1]. |
-| `setReverse(value: boolean) => void` | Reverses the direction of the linear progress indicator. |
 | `open() => void` | Puts the component in the open state. |
 | `close() => void` | Puts the component in the closed state. |
 
@@ -137,6 +135,5 @@ MDC Linear Progress exposes the following methods:
 | `set determinate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state. |
 | `set progress(value: number) => void` | Sets the progress bar to this value. Value should be between [0, 1]. |
 | `set buffer(value: number) => void` | Sets the buffer bar to this value. Value should be between [0, 1]. |
-| `set reverse(value: boolean) => void` | Reverses the direction of the linear progress indicator. |
 | `open() => void` | Puts the component in the open state. |
 | `close() => void` | Puts the component in the closed state. |

packages/mdc-linear-progress/_mixins.scss

@@ -18,9 +18,15 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+// stylelint-disable no-unknown-animations --
+// Animations keyframes are included in `keyframes.scss`.
+// stylelint-disable selector-class-pattern --
+// Selector '.mdc-*' should only be used in this project.
+
 @use 'sass:string';
 @use '@material/animation/functions' as animation-functions;
 @use '@material/feature-targeting/feature-targeting';
+@use '@material/rtl/rtl';
 @use '@material/theme/theme';
 @use '@material/theme/theme-color';
 @use './variables';
@@ -133,6 +139,10 @@
     @include indeterminate_($query: $query);
     @include reversed_($query: $query);
 
+    @include rtl.rtl() {
+      @include _rtl-styles($query: $query);
+    }
+
     &--closed {
       @include feature-targeting.targets($feat-structure) {
         opacity: 0;
@@ -161,22 +171,6 @@
     @include bar-color(primary, $query: $query);
     @include buffer-color(variables.$baseline-buffer-color, $query: $query);
   }
-
-  .mdc-linear-progress--indeterminate.mdc-linear-progress--reversed {
-    .mdc-linear-progress__primary-bar {
-      @include feature-targeting.targets($feat-structure) {
-        right: -145.166611%;
-        left: auto;
-      }
-    }
-
-    .mdc-linear-progress__secondary-bar {
-      @include feature-targeting.targets($feat-structure) {
-        right: -54.888891%;
-        left: auto;
-      }
-    }
-  }
 }
 
 @mixin bar-color($color, $query: feature-targeting.all()) {
@@ -276,46 +270,80 @@
   }
 }
 
+/// @deprecated - this will soon be removed in favor of auto-reversal in RTL.
 @mixin reversed_($query: feature-targeting.all()) {
   $feat-structure: feature-targeting.create-target($query, structure);
-  $feat-animation: feature-targeting.create-target($query, animation);
 
   &--reversed {
-    .mdc-linear-progress__bar {
+    @include _rtl-styles($query: $query);
+
+    .mdc-linear-progress__buffer-dots {
       @include feature-targeting.targets($feat-structure) {
-        right: 0;
-        transform-origin: center right;
+        order: 0;
       }
     }
 
-    &.mdc-linear-progress--animation-ready {
-      .mdc-linear-progress__primary-bar {
-        @include feature-targeting.targets($feat-animation) {
-          animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;
-        }
+    .mdc-linear-progress__buffer-bar {
+      @include feature-targeting.targets($feat-structure) {
+        order: 1;
       }
+    }
+  }
+}
 
-      .mdc-linear-progress__secondary-bar {
-        @include feature-targeting.targets($feat-animation) {
-          animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;
-        }
+@mixin _rtl-styles($query: $query) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+  $feat-animation: feature-targeting.create-target($query, animation);
+
+  .mdc-linear-progress__bar {
+    @include feature-targeting.targets($feat-structure) {
+      /* @noflip */
+      right: 0;
+      /* @noflip */
+      transform-origin: center right;
+    }
+  }
+
+  &.mdc-linear-progress--animation-ready {
+    .mdc-linear-progress__primary-bar {
+      @include feature-targeting.targets($feat-animation) {
+        animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;
       }
     }
 
-    .mdc-linear-progress__buffer-dots {
+    .mdc-linear-progress__secondary-bar {
       @include feature-targeting.targets($feat-animation) {
-        animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
+        animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;
       }
+    }
+  }
 
+  .mdc-linear-progress__buffer-dots {
+    @include feature-targeting.targets($feat-animation) {
+      animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
+    }
+
+    @include feature-targeting.targets($feat-structure) {
+      transform: rotate(0);
+    }
+  }
+
+  &.mdc-linear-progress--indeterminate {
+    .mdc-linear-progress__primary-bar {
       @include feature-targeting.targets($feat-structure) {
-        order: 0;
-        transform: rotate(0);
+        /* @noflip */
+        right: -145.166611%;
+        /* @noflip */
+        left: auto;
       }
     }
 
-    .mdc-linear-progress__buffer-bar {
+    .mdc-linear-progress__secondary-bar {
       @include feature-targeting.targets($feat-structure) {
-        order: 1;
+        /* @noflip */
+        right: -54.888891%;
+        /* @noflip */
+        left: auto;
       }
     }
   }

packages/mdc-linear-progress/package.json

@@ -22,6 +22,7 @@
     "@material/base": "^9.0.0",
     "@material/feature-targeting": "^9.0.0",
     "@material/progress-indicator": "^9.0.0",
+    "@material/rtl": "^9.0.0",
     "@material/theme": "^9.0.0",
     "tslib": "^1.9.3"
   },