patternfly · mcoker · Aug 28, 2023 · Aug 28, 2023 · Aug 28, 2023 · Aug 28, 2023
diff --git a/src/patternfly/base/_common.scss b/src/patternfly/base/_common.scss
@@ -25,21 +25,23 @@
 }
 
 // RTL helpers
+
+// Sets a block to RTL
 .#{$pf-prefix}m-dir-rtl {
-  @include pf-v5-rtl("transform-flip");
+  @include pf-v5-set-inverse;
 
   direction: rtl;
 }
 
+// Sets a block to LTR
 .#{$pf-prefix}m-dir-ltr,
 .ws-dir-ltr {
-  @include pf-v5-rtl("transform-flip-revert");
+  @include pf-v5-set-inverse(false);
 
   direction: ltr;
 }
 
-.#{$pf-prefix}m-rtl-flip-inline {
-  @include pf-v5-rtl("flip-inline");
+// Mirrors/flips something horizontally/inline in RTL
+.#{$pf-prefix}m-mirror-inline-rtl {
+  @include pf-v5-mirror-inline-on-rtl;
 }
-
-@include pf-v5-rtl("transform-flip");
diff --git a/src/patternfly/base/_variables.scss b/src/patternfly/base/_variables.scss
@@ -284,7 +284,11 @@
   --#{$pf-global}--target-size--MinHeight: #{$pf-v5-global--target-size--MinHeight};
 
   // RTL
-  --#{$pf-global}--rtl--transform--flip: 1;
+  @include pf-v5-set-inverse(false);
+}
+
+@include pf-v5-rtl {
+  @include pf-v5-set-inverse;
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

diff --git a/src/patternfly/components/Accordion/accordion.scss b/src/patternfly/components/Accordion/accordion.scss
@@ -230,8 +230,8 @@
 }
 
 .#{$accordion}__toggle-icon {
-  @include pf-v5-rtl('flip-inline');
-  
+  @include pf-v5-mirror-inline-on-rtl;
+
   transition: var(--#{$accordion}__toggle-icon--Transition);
 }
 

diff --git a/src/patternfly/components/DualListSelector/dual-list-selector.scss b/src/patternfly/components/DualListSelector/dual-list-selector.scss
@@ -168,10 +168,15 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
     --#{$dual-list-selector}__item-toggle--MarginBottom: 0;
 
     .#{$dual-list-selector}__item-toggle {
+      @include pf-v5-bidirectional-style(
+        $prop: transform,
+        $ltr-val: translateX(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX)),
+        $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX))}),
+      ); 
+
       position: absolute;
       inset-block-start: 0;
       inset-inline-start: var(--#{$dual-list-selector}__list__list__item-toggle--Left);
-      transform: translateX(calc(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX) * var(--#{$pf-global}--rtl--transform--flip)));
     }
   }
 
@@ -295,7 +300,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
 }
 
 :is(.#{$dual-list-selector}__controls-item, .#{$dual-list-selector}__item-toggle-icon) {
-  @include pf-v5-rtl("flip-inline");
+  @include pf-v5-mirror-inline-on-rtl;
 }
 
 .#{$dual-list-selector}__item-main {

diff --git a/src/patternfly/components/ExpandableSection/expandable-section.scss b/src/patternfly/components/ExpandableSection/expandable-section.scss
@@ -147,7 +147,7 @@
 }
 
 .#{$expandable-section}__toggle-icon {
-  @include pf-v5-rtl('flip-inline');
+  @include pf-v5-mirror-inline-on-rtl;
 
   min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
   color: var(--#{$expandable-section}__toggle-icon--Color);

diff --git a/src/patternfly/components/Pagination/pagination.scss b/src/patternfly/components/Pagination/pagination.scss
@@ -237,7 +237,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
 // nav control
 .#{$pagination}__nav-control {
-  @include pf-v5-rtl("flip-inline");
+  @include pf-v5-mirror-inline-on-rtl;
 
   .#{$button} {
     padding-inline-start: var(--#{$pagination}__nav-control--c-button--PaddingLeft);

diff --git a/src/patternfly/components/Slider/slider.scss b/src/patternfly/components/Slider/slider.scss
@@ -13,6 +13,12 @@
   --#{$slider}__rail-track--before--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
   --#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop: var(--#{$slider}--value);
 
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$slider}__rail-track--before--fill--direction, 
+    $ltr-val: right,
+    $rtl-val: left
+  );
+
   // steps
   --#{$slider}__steps--FontSize: var(--#{$pf-global}--FontSize--sm);
   --#{$slider}__steps--Height: var(--#{$slider}__steps--FontSize);
@@ -114,7 +120,7 @@
     content: "";
     background:
       linear-gradient(
-        to right,
+        to var(--#{$slider}__rail-track--before--fill--direction),
         var(--#{$slider}__rail-track--before--fill--BackgroundColor),
         var(--#{$slider}__rail-track--before--fill--BackgroundColor) var(--#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop),
         var(--#{$slider}__rail-track--before--base--BackgroundColor) var(--#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop)
@@ -131,8 +137,8 @@
 
 .#{$slider}__step {
   position: absolute;
- inset-block-start: 0;
- inset-inline-start: var(--#{$slider}__step--Left); // set programmatically as an inline style
+  inset-block-start: 0;
+  inset-inline-start: var(--#{$slider}__step--Left); // set programmatically as an inline style
   content: "";
 
   &.pf-m-active {
@@ -151,44 +157,64 @@
 }
 
 .#{$slider}__step-tick {
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translateX(var(--#{$slider}__step-tick--TranslateX)),
+    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$slider}__step-tick--TranslateX))})
+  );
+
   position: absolute;
- inset-block-start: var(--#{$slider}__step-tick--Top);
- inset-inline-start: 0;
+  inset-block-start: var(--#{$slider}__step-tick--Top);
+  inset-inline-start: 0;
   width: var(--#{$slider}__step-tick--Width);
   height: var(--#{$slider}__step-tick--Height);
   background-color: var(--#{$slider}__step-tick--BackgroundColor);
   border-radius: var(--#{$slider}__step-tick--BorderRadius);
-  transform: translateX(var(--#{$slider}__step-tick--TranslateX));
 }
 
 .#{$slider}__step-label {
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translateX(var(--#{$slider}__step-label--TranslateX)),
+    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$slider}__step-label--TranslateX))})
+  );
+
   position: absolute;
- inset-block-start: var(--#{$slider}__step-label--Top);
+  inset-block-start: var(--#{$slider}__step-label--Top);
   word-break: normal;
-  transform: translateX(var(--#{$slider}__step-label--TranslateX));
 }
 
 .#{$slider}__thumb {
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translate(var(--#{$slider}__thumb--TranslateX), var(--#{$slider}__thumb--TranslateY)),
+    $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__thumb--TranslateX))}, var(--#{$slider}__thumb--TranslateY))
+  );
+
   position: absolute;
- inset-block-start: var(--#{$slider}__thumb--Top);
- inset-inline-start: var(--#{$slider}__thumb--Left);
+  inset-block-start: var(--#{$slider}__thumb--Top);
+  inset-inline-start: var(--#{$slider}__thumb--Left);
   width: var(--#{$slider}__thumb--Width);
   height: var(--#{$slider}__thumb--Height);
   cursor: pointer;
   background-color: var(--#{$slider}__thumb--BackgroundColor);
   border-radius: var(--#{$slider}__thumb--BorderRadius);
   box-shadow: var(--#{$slider}__thumb--BoxShadow);
-  transform: translate(var(--#{$slider}__thumb--TranslateX), var(--#{$slider}__thumb--TranslateY));
 
   &::before {
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translate(var(--#{$slider}__thumb--before--TranslateX), var(--#{$slider}__thumb--before--TranslateY)),
+      $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__thumb--before--TranslateX))}, var(--#{$slider}__thumb--before--TranslateY))
+    );
+
     position: absolute;
-   inset-block-start: 50%;
-   inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
     width: var(--#{$slider}__thumb--before--Width);
     height: var(--#{$slider}__thumb--before--Height);
     content: "";
     border-radius: var(--#{$slider}__thumb--before--BorderRadius);
-    transform: translate(var(--#{$slider}__thumb--before--TranslateX), var(--#{$slider}__thumb--before--TranslateY));
   }
 
   &:hover {
@@ -210,13 +236,18 @@
   margin-inline-start: var(--#{$slider}__value--MarginLeft);
 
   &.pf-m-floating {
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translate(var(--#{$slider}__value--m-floating--TranslateX), var(--#{$slider}__value--m-floating--TranslateY)),
+      $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__value--m-floating--TranslateX))}, var(--#{$slider}__value--m-floating--TranslateY)),
+    );
+
     --#{$slider}__value--MarginLeft: 0;
 
     position: absolute;
-   inset-block-start: 0;
-   inset-inline-start: var(--#{$slider}__value--m-floating--Left);
+    inset-block-start: 0;
+    inset-inline-start: var(--#{$slider}__value--m-floating--Left);
     z-index: var(--#{$slider}__value--m-floating--ZIndex);
-    transform: translate(var(--#{$slider}__value--m-floating--TranslateX), var(--#{$slider}__value--m-floating--TranslateY));
   }
 
   .#{$form-control} {

diff --git a/src/patternfly/components/Switch/switch.scss b/src/patternfly/components/Switch/switch.scss
@@ -88,7 +88,11 @@
       background-color: var(--#{$switch}__input--checked__toggle--BackgroundColor);
 
       &::before {
-        transform: translateX(calc(var(--#{$switch}__input--checked__toggle--before--TranslateX) * var(--#{$pf-global}--rtl--transform--flip)));
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(var(--#{$switch}__input--checked__toggle--before--TranslateX)),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$switch}__input--checked__toggle--before--TranslateX))})
+        );
       }
     }
 

diff --git a/src/patternfly/components/Wizard/wizard.scss b/src/patternfly/components/Wizard/wizard.scss
@@ -335,7 +335,7 @@
 }
 
 .#{$wizard}__toggle-separator {
-  @include pf-v5-rtl("flip-inline");
+  @include pf-v5-mirror-inline-on-rtl;
 
   margin-inline-start: var(--#{$wizard}__toggle-separator--MarginLeft);
   color: var(--#{$wizard}__toggle-separator--Color);
@@ -461,6 +461,12 @@
   // Common step number styles
   @at-root .#{$wizard}__toggle-num,
   &::before {
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(var(--#{$wizard}__nav-link--before--TranslateX)),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$wizard}__nav-link--before--TranslateX))})
+    );
+
     position: absolute;
     inset-block-start: var(--#{$wizard}__nav-link--before--Top);
     inset-inline-start: 0;
@@ -474,7 +480,6 @@
     color: var(--#{$wizard}__nav-link--before--Color);
     background-color: var(--#{$wizard}__nav-link--before--BackgroundColor);
     border-radius: var(--#{$wizard}__nav-link--before--BorderRadius);
-    transform: translateX(calc(var(--#{$wizard}__nav-link--before--TranslateX) * var(--#{$pf-global}--rtl--transform--flip)));
   }
 
   // Nav step number
@@ -530,7 +535,7 @@
 }
 
 .#{$wizard}__nav-link-toggle-icon {
-  @include pf-v5-rtl("flip-inline");
+  @include pf-v5-mirror-inline-on-rtl;
 
   display: inline-block;
   transition: var(--#{$wizard}__nav-link-toggle-icon--Transition);

diff --git a/src/patternfly/sass-utilities/functions.scss b/src/patternfly/sass-utilities/functions.scss
@@ -115,3 +115,9 @@
 
   @return $new-map;
 }
+
+// Returns a calc() with the inverse of a value used for RTL. Most commonly used as the inverse/negative of a value in a transform function (eg, translate(), rotate(), scale(), etc)
+// Shouldn't be used on an existing LTR style as adding a calc() in an existing style could be breaking. Should used within an RTL selector, which is basically an opt-in.
+@function pf-v5-calc-inverse($val, $multiplier: var(--#{$pf-global}--inverse--multiplier)) {
+  @return calc(#{$val} * #{$multiplier});
+}
diff --git a/src/patternfly/sass-utilities/mixins.scss b/src/patternfly/sass-utilities/mixins.scss
@@ -310,27 +310,62 @@
   }
 }
 
-// Applies custom styles to support RTL
-@mixin pf-v5-rtl($transform: null) {
-  // resets property used to inverse transform values calc()s in RTL
-  @if $transform == "transform-flip-revert" {
-    --#{$pf-global}--rtl--transform--flip: 1;
-  } @else {
-    // establishes the selectors used to target RTL
-    // remove .ws-dir-rtl before releasing RTL
-    @at-root :where(.ws-dir-rtl, .#{$pf-prefix}m-dir-rtl, [dir="rtl"]) #{&} {
-      // sets property used in calcs to inverse transform values
-      @if $transform == "transform-flip" {
-        --#{$pf-global}--rtl--transform--flip: -1;
-      }
+// RTL helpers
 
-      // flips something horizontally/inline. relies upon scale/scale() not already being used for the element
-      @if $transform == 'flip-inline' {
-        scale: -1 1;
-      }
+// Used to create the RTL selector for RTL specific styles
 
-      // any custom CSS to apply within the selectors that target RTL
-      @content
-    }
+// @include pf-v5-rtl {
+//   background: red; 
+// }
+
+// renders as
+
+// [dir="rtl"] {
+//   background: red;
+// }
+@mixin pf-v5-rtl {
+  @at-root :where(.ws-dir-rtl, .#{$pf-prefix}m-dir-rtl, [dir="rtl"]) #{&} {
+    @content;
   }
 }
+
+// Used to create the LTR selector for LTR specific styles
+@mixin pf-v5-ltr {
+  @at-root :where(.ws-dir-ltr, .#{$pf-prefix}m-dir-ltr, [dir="ltr"]) #{&} {
+    @content;
+  }
+}
+
+// Creates a default/LTR declaration, and an RTL declaration.
+
+// @include pf-v5-bidirectional-style(background, blue, red)
+
+// renders as
+
+// background: blue;
+// [dir="rtl"] {
+//   background: red;
+// }
+@mixin pf-v5-bidirectional-style($prop, $ltr-val, $rtl-val) {
+  #{$prop}: #{$ltr-val};
+
+  @include pf-v5-rtl {
+    #{$prop}: #{$rtl-val};
+  }
+}
+
+// Mirrors/flips something horizontally/inline. Relies upon scale/scale() not already being used for the element. Can be extended to take arguments to use different methods other than scale().
+@mixin pf-v5-mirror-inline {
+  scale: -1 1;
+}
+
+@mixin pf-v5-mirror-inline-on-rtl {
+  @include pf-v5-rtl {
+    @include pf-v5-mirror-inline;
+  }
+}
+
+// Declares a global inverse multiplier var used for returning the inverse of a number. Defined within blocks that reference the global var in calc() functions to conditionally return the default or inverse value of a number.
+@mixin pf-v5-set-inverse($val: true) {
-@mixin pf-v5-set-inverse($val: true) {
+@mixin pf-v5-calc-inverse($val: true) {
-@mixin pf-v5-set-inverse($val: true) {
+@mixin pf-v5-calc-inverse($val: true) {
+  --#{$pf-global}--inverse--multiplier: #{if($val, -1, 1)};
+}