Set up CSS LTR-RTL direction variable and fix incorrect transforms (#9914). Fix #9800

- Fix Draftail block toolbar trigger overlay in RTL mode
- Fix switch component rendering in RTL mode
- Fix panel header positioning in RTL mode
- Remove unused 404 styles
- Fix comments positioning in RTL mode
- Fix sidebar sub-menus transition direction
- Fix form side panels in RTL mode
- Fix minimap positioning in RTL mode
- Fix Draftail tooltips positioning in RTL mode
- Fix page explorer transition direction in RTL mode
- Set up CSS LTR-RTL direction variable

CHANGELOG.txt

@@ -73,6 +73,8 @@ Changelog
  * Fix: Page editor dropdowns now use indigo backgrounds like elsewhere in the admin interface (Thibaud Colas)
  * Fix: Allow parsing of multiple key/value pairs from string in `wagtail.search.utils.parse_query_string` (Beniamin Bucur)
  * Fix: Prevent memory exhaustion when purging a large number of revisions (Jake Howard)
+ * Fix: Add right-to-left (RTL) support for the following form components: Switch, Minimap, live preview (Thibaud Colas)
+ * Fix: Improve right-to-left (RTL) positioning for the following components: Page explorer, Sidebar sub-menu, rich text tooltips, rich text toolbar trigger, editor section headers (Thibaud Colas)
  * Docs: Add custom permissions section to permissions documentation page (Dan Hayden)
  * Docs: Add documentation for how to get started with contributing translations for the Wagtail admin (Ogunbanjo Oluwadamilare)
  * Docs: Officially recommend `fnm` over `nvm` in development documentation (LB (Ben) Johnston)

client/scss/components/_form-side.scss

@@ -23,6 +23,7 @@
       md:w-w-1/3
       w-transform
       w-translate-x-full
+      rtl:-w-translate-x-full
       w-bg-white
       w-box-border
       w-transition-all
@@ -40,7 +41,7 @@
   z-index: calc(theme('zIndex.header') - 10);
 
   &--open {
-    @apply w-translate-x-0;
+    @apply w-translate-x-0 rtl:w-translate-x-0;
   }
 
   &--initial {

client/scss/components/_preview-panel.scss

@@ -27,11 +27,16 @@
   }
 
   &__iframe {
-    transform-origin: 0 0;
+    transform-origin: top left;
     width: var(--preview-iframe-width);
     height: calc(100% / var(--preview-width-ratio));
     transform: scale(var(--preview-width-ratio));
     display: block;
+
+    [dir='rtl'] & {
+      // Transform with the top-right physical corner as the origin since the layout is reversed.
+      transform-origin: top right;
+    }
   }
 
   &__sizes {

client/scss/components/forms/_nested-panel.scss

@@ -49,10 +49,14 @@ $panel-x-offset: calc($header-button-size-sm / 2 + $header-gap);
   // with parent panels’ guiding line.
   .w-panel__header {
     gap: 0;
-    transform: translateX(calc(-1 * theme('spacing.5')));
+    transform: translateX(
+      calc(var(--w-direction-factor) * -1 * theme('spacing.5'))
+    );
 
     @include media-breakpoint-up(sm) {
-      transform: translateX(theme('spacing.1'));
+      transform: translateX(
+        calc(var(--w-direction-factor) * theme('spacing.1'))
+      );
     }
   }
 

client/scss/components/forms/_switch.scss

@@ -22,7 +22,7 @@ $switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
     height: $switch-height;
     position: absolute;
     top: 50%;
-    transform: translate(5px, -50%);
+    transform: translate(calc(var(--w-direction-factor) * 5px), -50%);
     color: $color-white;
 
     @media (forced-colors: active) {
@@ -52,7 +52,10 @@ $switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
     &::after {
       position: absolute;
       top: 50%;
-      transform: translate($switch-border, -50%);
+      transform: translate(
+        calc(var(--w-direction-factor) * $switch-border),
+        -50%
+      );
       height: $switch-height;
       width: $switch-height;
       border: $switch-border solid $color-white;
@@ -72,7 +75,12 @@ $switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
   }
 
   [type='checkbox']:checked + &__toggle::after {
-    transform: translate(calc(#{$switch-width + $switch-border} - 100%), -50%);
+    transform: translate(
+      calc(
+        var(--w-direction-factor) * (#{$switch-width + $switch-border} - 100%)
+      ),
+      -50%
+    );
   }
 
   [type='checkbox']:disabled + &__toggle {

client/scss/elements/_elements.scss

@@ -14,6 +14,18 @@
   --tw-content: '';
 }
 
+// Default to LTR if `dir` is not set.
+:root,
+:host,
+[dir='ltr'] {
+  // Flips the direction of `transform` declarations, based on whether the UI is LTR or RTL.
+  --w-direction-factor: 1;
+}
+
+[dir='rtl'] {
+  --w-direction-factor: -1;
+}
+
 html {
   height: 100%;
   // Set the whole admin to border-box by default.

client/scss/layouts/_404.scss

@@ -9,16 +9,6 @@
   color: $color-white;
 }
 
-.page404__wrapper {
-  position: absolute;
-  top: 50%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .page404__logo {
   float: left;
   width: 400px;

client/src/components/Draftail/Draftail.scss

@@ -185,7 +185,7 @@ $draftail-editor-font-family: $font-sans;
     background: transparent;
     display: block;
     position: absolute;
-    transform: translate(-50%, -50%);
+    transform: translate(calc(var(--w-direction-factor) * -50%), -50%);
     inset-inline-start: 50%;
     top: 50%;
     width: $draftail-trigger-additional-size;

client/src/components/Draftail/Tooltip/Tooltip.scss

@@ -12,12 +12,12 @@ $tooltip-color-no: theme('colors.critical.100');
 
 @mixin arrow--top {
   margin-top: $tooltip-arrow-spacing;
-  transform: translateX(-50%);
+  transform: translateX(calc(var(--w-direction-factor) * -50%));
 
   &::before {
     bottom: 100%;
     inset-inline-start: 50%;
-    transform: translateX(-50%);
+    transform: translateX(calc(var(--w-direction-factor) * -50%));
     border-bottom-color: $tooltip-chrome;
   }
 }

client/src/components/Minimap/Minimap.scss

@@ -18,11 +18,16 @@ $minimap-z-index: calc(theme('zIndex.header') - 20);
   height: calc(100vh - 100%);
   z-index: $minimap-z-index;
   width: $minimap-width;
-  transform: translateX(calc(100% - $minimap-collapsed-width-mobile));
+  transform: translateX(
+    calc(var(--w-direction-factor) * (100% - $minimap-collapsed-width-mobile))
+  );
 
   @include media-breakpoint-up(sm) {
     transform: translateX(
-      calc(100% - $minimap-collapsed-width - $minimap-overflow)
+      calc(
+        var(--w-direction-factor) *
+          (100% - $minimap-collapsed-width - $minimap-overflow)
+      )
     );
   }
 

client/src/components/Sidebar/SidebarPanel.scss

@@ -4,7 +4,7 @@
   --width: #{$menu-width};
 
   visibility: hidden;
-  transform: translateX(-100%);
+  transform: translateX(calc(var(--w-direction-factor) * -100%));
   position: fixed;
   height: 100vh;
   padding: 0;

client/src/components/Transition/Transition.scss

@@ -11,7 +11,7 @@ $c-transition-duration: 200ms;
 }
 
 .c-transition-push-enter {
-  transform: translateX(100%);
+  transform: translateX(calc(var(--w-direction-factor) * 100%));
   transition: transform $c-transition-duration ease,
     opacity $c-transition-duration linear;
   opacity: 0;
@@ -30,7 +30,7 @@ $c-transition-duration: 200ms;
 }
 
 .c-transition-push-leave-active {
-  transform: translateX(-100%);
+  transform: translateX(calc(var(--w-direction-factor) * -100%));
   opacity: 0;
 }
 
@@ -38,7 +38,7 @@ $c-transition-duration: 200ms;
 // Pop transition
 // =============================================================================
 .c-transition-pop-enter {
-  transform: translateX(-100%);
+  transform: translateX(calc(var(--w-direction-factor) * -100%));
   transition: transform $c-transition-duration ease,
     opacity $c-transition-duration linear;
   opacity: 0;
@@ -57,6 +57,6 @@ $c-transition-duration: 200ms;
 }
 
 .c-transition-pop-leave-active {
-  transform: translateX(100%);
+  transform: translateX(calc(var(--w-direction-factor) * 100%));
   opacity: 0;
 }

client/src/entrypoints/admin/comments.js

@@ -392,7 +392,7 @@ window.comments = (() => {
 
     const commentCounter = document.createElement('div');
     commentCounter.className =
-      '-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-bg-secondary-100 w-text-white w-border w-border-white w-rounded-[1rem]';
+      '-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-bg-secondary-100 w-text-white w-border w-border-white w-rounded-[1rem]';
     commentToggle.className =
       'w-h-slim-header w-bg-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-grey-400 w-transition hover:w-transform hover:w-scale-110 hover:w-text-primary focus:w-text-primary expanded:w-text-primary';
     commentToggle.appendChild(commentCounter);

docs/releases/4.2.md

@@ -110,6 +110,8 @@ This feature was developed by Matt Westcott, and sponsored by [YouGov](https://y
  * Page editor dropdowns now use indigo backgrounds like elsewhere in the admin interface (Thibaud Colas)
  * Allow parsing of multiple key/value pairs from string in `wagtail.search.utils.parse_query_string` (Beniamin Bucur)
  * Prevent memory exhaustion when purging a large number of revisions (Jake Howard)
+ * Add right-to-left (RTL) support for the following form components: Switch, Minimap, live preview (Thibaud Colas)
+ * Improve right-to-left (RTL) positioning for the following components: Page explorer, Sidebar sub-menu, rich text tooltips, rich text toolbar trigger, editor section headers (Thibaud Colas)
 
 ### Documentation