fix(site-header): fixing language switcher in rtl - FRONT-4569

.size-limit.json

@@ -27,14 +27,14 @@
   },
   {
     "path": "dist/packages/ec/scripts/ecl-ec.js",
-    "limit": "230 KB",
+    "limit": "235 KB",
     "webpack": false,
     "gzip": false,
     "brotli": false
   },
   {
     "path": "dist/packages/eu/scripts/ecl-eu.js",
-    "limit": "230 KB",
+    "limit": "235 KB",
     "webpack": false,
     "gzip": false,
     "brotli": false

src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss

@@ -69,6 +69,11 @@ $language-list: null !default;
   right: var(--ecl-language-arrow-position);
 }
 
+.ecl-site-header__language-container--push-left::before {
+  right: auto;
+  left: var(--ecl-language-arrow-position);
+}
+
 .ecl-site-header__language-header {
   align-items: center;
   display: flex;
@@ -83,6 +88,11 @@ $language-list: null !default;
   position: absolute;
   right: map.get($language-switcher, 'close-right');
   top: map.get($language-switcher, 'close-top');
+
+  .ecl-site-header--rtl & {
+    left: map.get($language-switcher, 'close-right');
+    right: auto;
+  }
 }
 
 .ecl-site-header__language-content {
@@ -109,6 +119,10 @@ $language-list: null !default;
   padding: 0;
 }
 
+.ecl-site-header--rtl .ecl-site-header__language-list {
+  margin: map.get($language-list, 'list-margin-rtl');
+}
+
 .ecl-site-header__language-link {
   align-items: baseline;
   display: flex;
@@ -183,6 +197,12 @@ $language-list: null !default;
     transform: none;
   }
 
+  .ecl-site-header__language-container--push-left {
+    left: 0;
+    right: auto;
+    transform: none;
+  }
+
   // Horizontal sections
   .ecl-site-header__language-content:not(
       .ecl-site-header__language-content--stack
@@ -206,6 +226,13 @@ $language-list: null !default;
     }
   }
 
+  .ecl-site-header--rtl
+    .ecl-site-header__language-content:not(
+      .ecl-site-header__language-content--stack
+    ) {
+    overflow-x: hidden;
+  }
+
   // Columns display
   .ecl-site-header__language-list {
     column-gap: 0;

src/implementations/vanilla/components/site-header/site-header-ec.scss

@@ -37,6 +37,10 @@ $language-list: null !default;
     background-size: auto 100%;
   }
 
+  &.ecl-site-header--rtl .ecl-site-header__background {
+    background-position: left bottom;
+  }
+
   .ecl-menu,
   .ecl-mega-menu {
     bottom: 0;

src/implementations/vanilla/components/site-header/site-header-eu.scss

@@ -44,7 +44,8 @@ $language-list: null !default;
     right: 0;
     width: calc(44px + var(--s-m) * 2);
 
-    &.ecl-mega-menu--rtl {
+    &.ecl-mega-menu--rtl,
+    &.ecl-menu--rtl {
       left: 0;
       right: auto;
     }
@@ -169,8 +170,8 @@ $language-list: null !default;
   align-items: center;
   display: flex;
 
-  .ecl-button:not(.ecl-site-header__search-toggle) {
-    margin-inline-end: var(--s-2xs);
+  .ecl-button {
+    margin-inline-start: var(--s-2xs);
   }
 
   .ecl-site-header--has-menu &,

src/implementations/vanilla/components/site-header/site-header.js

@@ -13,6 +13,7 @@ import { createFocusTrap } from 'focus-trap';
  * @param {String} options.searchFormSelector
  * @param {String} options.loginToggleSelector
  * @param {String} options.loginBoxSelector
+ * @param {integer} options.tabletBreakpoint
  * @param {Boolean} options.attachClickListener Whether or not to bind click events
  * @param {Boolean} options.attachKeyListener Whether or not to bind keyboard events
  * @param {Boolean} options.attachResizeListener Whether or not to bind resize events
@@ -50,6 +51,7 @@ export class SiteHeader {
       attachClickListener = true,
       attachKeyListener = true,
       attachResizeListener = true,
+      tabletBreakpoint = 768,
     } = {},
   ) {
     // Check element
@@ -76,6 +78,7 @@ export class SiteHeader {
     this.attachClickListener = attachClickListener;
     this.attachKeyListener = attachKeyListener;
     this.attachResizeListener = attachResizeListener;
+    this.tabletBreakpoint = tabletBreakpoint;
 
     // Private variables
     this.languageMaxColumnItems = 8;
@@ -91,6 +94,7 @@ export class SiteHeader {
     this.loginToggle = null;
     this.loginBox = null;
     this.resizeTimer = null;
+    this.direction = null;
 
     // Bind `this` for use in callbacks
     this.openOverlay = this.openOverlay.bind(this);
@@ -138,6 +142,12 @@ export class SiteHeader {
     this.languageListContent = queryOne(this.languageListContentSelector);
     this.close = queryOne(this.closeOverlaySelector);
 
+    // direction
+    this.direction = getComputedStyle(this.element).direction;
+    if (this.direction === 'rtl') {
+      this.element.classList.add('ecl-site-header--rtl');
+    }
+
     // Create focus trap
     this.focusTrap = createFocusTrap(this.languageListOverlay, {
       onDeactivate: this.closeOverlay,
@@ -222,6 +232,7 @@ export class SiteHeader {
 
     if (this.element) {
       this.element.removeAttribute('data-ecl-auto-initialized');
+      this.element.classList.remove('ecl-site-header--rtl');
       ECL.components.delete(this.element);
     }
   }
@@ -310,6 +321,7 @@ export class SiteHeader {
     // Check available space
     this.languageListOverlay.classList.remove(
       'ecl-site-header__language-container--push-right',
+      'ecl-site-header__language-container--push-left',
     );
     this.languageListOverlay.classList.remove(
       'ecl-site-header__language-container--full',
@@ -318,36 +330,47 @@ export class SiteHeader {
       '--ecl-language-arrow-position',
     );
     this.languageListOverlay.style.removeProperty('right');
+    this.languageListOverlay.style.removeProperty('left');
 
     popoverRect = this.languageListOverlay.getBoundingClientRect();
     const screenWidth = window.innerWidth;
-
+    const linkRect = this.languageLink.getBoundingClientRect();
     // Popover too large
-    if (popoverRect.right > screenWidth) {
-      const linkRect = this.languageLink.getBoundingClientRect();
-
+    if (this.direction === 'ltr' && popoverRect.right > screenWidth) {
       // Push the popover to the right
       this.languageListOverlay.classList.add(
         'ecl-site-header__language-container--push-right',
       );
       this.languageListOverlay.style.setProperty(
         'right',
-        `-${containerRect.right - linkRect.right}px`,
+        `calc(-${containerRect.right}px + ${linkRect.right}px)`,
       );
-
       // Adapt arrow position
       const arrowPosition =
         containerRect.right - linkRect.right + linkRect.width / 2;
       this.languageListOverlay.style.setProperty(
         '--ecl-language-arrow-position',
         `calc(${arrowPosition}px - ${this.arrowSize})`,
       );
+    } else if (this.direction === 'rtl' && popoverRect.left < 0) {
+      this.languageListOverlay.classList.add(
+        'ecl-site-header__language-container--push-left',
+      );
+      this.languageListOverlay.style.setProperty(
+        'left',
+        `calc(-${linkRect.left}px + ${containerRect.left}px)`,
+      );
+      // Adapt arrow position
+      const arrowPosition =
+        linkRect.right - containerRect.left - linkRect.width / 2;
+      this.languageListOverlay.style.setProperty(
+        '--ecl-language-arrow-position',
+        `${arrowPosition}px`,
+      );
     }
 
     // Mobile popover (full width)
-    if (popoverRect.left === 0) {
-      const linkRect = this.languageLink.getBoundingClientRect();
-
+    if (window.innerWidth < this.tabletBreakpoint) {
       // Push the popover to the right
       this.languageListOverlay.classList.add(
         'ecl-site-header__language-container--full',
@@ -357,7 +380,6 @@ export class SiteHeader {
       // Adapt arrow position
       const arrowPosition =
         popoverRect.right - linkRect.right + linkRect.width / 2;
-
       this.languageListOverlay.style.setProperty(
         '--ecl-language-arrow-position',
         `calc(${arrowPosition}px - ${this.arrowSize})`,

src/themes/ec/variables/_language-list.scss

@@ -14,6 +14,7 @@ $language-list: (
   category-separator: 1px solid var(--c-n),
   category-stack-margin: var(--s-s),
   list-margin: 0 0 0 calc(-1 * var(--s-s)),
+  list-margin-rtl: calc(-1 * var(--s-s)) 0 0 0,
   item-padding: var(--s-xs) var(--s-s),
   code-color: var(--c-d),
   code-font-weight: map.get($font-weight, 'regular'),

src/themes/eu/variables/_language-list.scss

@@ -14,6 +14,7 @@ $language-list: (
   category-separator: 1px solid var(--c-p-20),
   category-stack-margin: var(--s-s),
   list-margin: 0 0 0 calc(-1 * var(--s-s)),
+  list-margin-rtl: calc(-1 * var(--s-s)) 0 0 0,
   item-padding: var(--s-s),
   code-color: var(--c-d-140),
   code-font-weight: map.get($font-weight, 'bold'),