fix(segment): setting dir on ion-segment to enable rtl mode now suppo…

…rted (#24601) Resolves #23978
ionic-team · Jan 19, 2022 · 2940e73 · 2940e73
1 parent 3e2d04d
commit 2940e73
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 7 deletions.
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
@@ -5,6 +5,7 @@ import { getIonMode } from '../../global/ionic-global';
 import { Color, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
 import { Gesture, GestureDetail } from '../../utils/gesture';
 import { pointerCoord } from '../../utils/helpers';
+import { isRTL } from '../../utils/rtl';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
@@ -314,7 +315,7 @@ export class Segment implements ComponentInterface {
   }
 
   private setNextIndex(detail: GestureDetail, isEnd = false) {
-    const isRTL = document.dir === 'rtl';
+    const rtl = isRTL(this.el);
     const activated = this.activated;
     const buttons = this.getButtons();
     const index = buttons.findIndex(button => button.value === this.value);
@@ -350,8 +351,8 @@ export class Segment implements ComponentInterface {
     const root = this.el.getRootNode() as Document | ShadowRoot;
     const nextEl = root.elementFromPoint(currentX, previousY) as HTMLIonSegmentButtonElement;
 
-    const decreaseIndex = isRTL ? currentX > (left + width) : currentX < left;
-    const increaseIndex = isRTL ? currentX < left : currentX > (left + width);
+    const decreaseIndex = rtl ? currentX > (left + width) : currentX < left;
+    const increaseIndex = rtl ? currentX < left : currentX > (left + width);
 
     // If the indicator is currently activated then we have started the gesture
     // on top of the checked button so we need to slide the indicator
@@ -364,7 +365,7 @@ export class Segment implements ComponentInterface {
         if (newIndex >= 0) {
           nextIndex = newIndex;
         }
-      // Increase index, moves right in LTR & left in RTL
+        // Increase index, moves right in LTR & left in RTL
       } else if (increaseIndex) {
         if (activated && !isEnd) {
 
@@ -458,17 +459,17 @@ export class Segment implements ComponentInterface {
 
   @Listen('keydown')
   onKeyDown(ev: KeyboardEvent) {
-    const isRTL = document.dir === 'rtl';
+    const rtl = isRTL(this.el);
     let keyDownSelectsButton = this.selectOnFocus;
     let current;
     switch (ev.key) {
       case 'ArrowRight':
         ev.preventDefault();
-        current = isRTL ? this.getSegmentButton('previous') : this.getSegmentButton('next');
+        current = rtl ? this.getSegmentButton('previous') : this.getSegmentButton('next');
         break;
       case 'ArrowLeft':
         ev.preventDefault();
-        current = isRTL ? this.getSegmentButton('next') : this.getSegmentButton('previous')
+        current = rtl ? this.getSegmentButton('next') : this.getSegmentButton('previous')
         break;
       case 'Home':
         ev.preventDefault();

diff --git a/core/src/components/segment/test/rtl/e2e.ts b/core/src/components/segment/test/rtl/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('segment: rtl', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/segment/test/rtl?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/segment/test/rtl/index.html b/core/src/components/segment/test/rtl/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Segment - RTL</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Segment - RTL</ion-title>
+      </ion-toolbar>
+
+      <ion-content>
+        <div class="ion-padding">
+          <ion-segment dir="rtl">
+            <ion-segment-button>
+              <ion-label>Seg 1</ion-label>
+            </ion-segment-button>
+            <ion-segment-button>
+              <ion-label>Seg 2</ion-label>
+            </ion-segment-button>
+            <ion-segment-button>
+              <ion-label>Seg 3</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+
+      </ion-content>
+  </ion-app>
+</body>
+
+</html>