From 93a3bf93b19f1ba59a931a579b502297cfb460e3 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Tue, 29 Aug 2023 16:45:56 -0400
Subject: [PATCH 1/2] feat(Nav, Menu): apply RTL fixes

---
 src/patternfly/components/Menu/menu.scss | 13 ++++++++++---
 src/patternfly/components/Nav/nav.scss   | 24 ++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/patternfly/components/Menu/menu.scss b/src/patternfly/components/Menu/menu.scss
index 5f69ad6345..58a48a981d 100644
--- a/src/patternfly/components/Menu/menu.scss
+++ b/src/patternfly/components/Menu/menu.scss
@@ -282,7 +282,11 @@
       // target first list in menu
       > .#{$menu}__content > .#{$menu}__list,
       > .#{$menu}__list {
-        transform: translateX(-100%);
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(-100%),
+          $rtl-val: translateX(100%)
+        );
       }
       // stylelint-enable
     }
@@ -299,8 +303,11 @@
 
       // stylelint-disable selector-max-class
       &.pf-m-drilled-in {
-        transform: translateX(-100%);
-      }
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(-100%),
+          $rtl-val: translateX(100%)
+        );      }
       // stylelint-enable
     }
 
diff --git a/src/patternfly/components/Nav/nav.scss b/src/patternfly/components/Nav/nav.scss
index c527d849d8..9b965b7902 100644
--- a/src/patternfly/components/Nav/nav.scss
+++ b/src/patternfly/components/Nav/nav.scss
@@ -508,6 +508,8 @@
   }
 
   .#{$menu}__item-toggle-icon {
+    @include pf-v5-mirror-inline-on-rtl;
+
     margin-inline-start: calc(var(--#{$menu}__item-toggle-icon--PaddingLeft) * -1);
   }
 
@@ -1064,6 +1066,8 @@
   display: inline-block;
   transition: var(--#{$nav}__toggle-icon--Transition);
 
+  @include pf-v5-mirror-inline-on-rtl;
+
   .#{$nav}__item.pf-m-expanded & {
     transform: rotate(var(--#{$nav}__item--m-expanded__toggle-icon--Rotate));
   }
@@ -1132,6 +1136,12 @@
   opacity: 0;
   transition: var(--#{$nav}__scroll-button--Transition);
 
+  // Mirror only the contents to avoid flipping the borders
+  // TODO at breaking change, add an icon wrapper to be mirrored
+  > * {
+    @include pf-v5-mirror-inline-on-rtl;
+  }
+
   &::before {
     position: absolute;
     inset-block-start: 0;
@@ -1163,8 +1173,13 @@
     --#{$nav}__scroll-button--before--BorderRightWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
     margin-inline-end: calc(var(--#{$nav}__scroll-button--Width) * -1);
-    transform: translateX(-100%);
 
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(-100%),
+      $rtl-val: translateX(100%)
+    );
+  
     &::before {
      inset-inline-end: 0;
     }
@@ -1174,7 +1189,12 @@
     --#{$nav}__scroll-button--before--BorderLeftWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
     margin-inline-start: calc(var(--#{$nav}__scroll-button--Width) * -1);
-    transform: translateX(100%);
+    
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(100%),
+      $rtl-val: translateX(-100%)
+    );
 
     &::before {
      inset-inline-start: 0;

From 065ca04e16fa6cc7cc2949c2278673d8e53b62de Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Tue, 29 Aug 2023 23:20:04 -0400
Subject: [PATCH 2/2] feat(Nav, Menu): add calc-inverse

---
 src/patternfly/components/Menu/menu.scss | 11 +++++++----
 src/patternfly/components/Nav/nav.scss   |  6 +++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/patternfly/components/Menu/menu.scss b/src/patternfly/components/Menu/menu.scss
index 58a48a981d..418517485c 100644
--- a/src/patternfly/components/Menu/menu.scss
+++ b/src/patternfly/components/Menu/menu.scss
@@ -285,8 +285,8 @@
         @include pf-v5-bidirectional-style(
           $prop: transform,
           $ltr-val: translateX(-100%),
-          $rtl-val: translateX(100%)
-        );
+          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+        );    
       }
       // stylelint-enable
     }
@@ -306,8 +306,9 @@
         @include pf-v5-bidirectional-style(
           $prop: transform,
           $ltr-val: translateX(-100%),
-          $rtl-val: translateX(100%)
-        );      }
+          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+        );
+      }
       // stylelint-enable
     }
 
@@ -693,6 +694,8 @@
 
 // Toggle icon
 .#{$menu}__item-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+  
   padding-inline-start: var(--#{$menu}__item-toggle-icon--PaddingLeft);
   padding-inline-end: var(--#{$menu}__item-toggle-icon--PaddingRight);
   color: var(--#{$menu}__item-toggle-icon, inherit);
diff --git a/src/patternfly/components/Nav/nav.scss b/src/patternfly/components/Nav/nav.scss
index 9b965b7902..480a05fd1e 100644
--- a/src/patternfly/components/Nav/nav.scss
+++ b/src/patternfly/components/Nav/nav.scss
@@ -1177,7 +1177,7 @@
     @include pf-v5-bidirectional-style(
       $prop: transform,
       $ltr-val: translateX(-100%),
-      $rtl-val: translateX(100%)
+      $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
     );
   
     &::before {
@@ -1189,11 +1189,11 @@
     --#{$nav}__scroll-button--before--BorderLeftWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
     margin-inline-start: calc(var(--#{$nav}__scroll-button--Width) * -1);
-    
+
     @include pf-v5-bidirectional-style(
       $prop: transform,
       $ltr-val: translateX(100%),
-      $rtl-val: translateX(-100%)
+      $rtl-val: translateX(#{pf-v5-calc-inverse(100%)})
     );
 
     &::before {