fix(range): setting dir on ion-range to enable rtl mode now supported (…

…#24597) Resolves #20201
ionic-team · Jan 19, 2022 · 5dba4e5 · 5dba4e5
1 parent bbbe778
commit 5dba4e5
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 12 deletions.
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
@@ -3,6 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
 import { getIonMode } from '../../global/ionic-global';
 import { Color, Gesture, GestureDetail, KnobName, RangeChangeEventDetail, RangeValue, StyleEventDetail } from '../../interface';
 import { clamp, debounceEvent, getAriaLabel, inheritAttributes, renderHiddenInput } from '../../utils/helpers';
+import { isRTL } from '../../utils/rtl';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 import { PinFormatter } from './range-interface';
@@ -290,13 +291,13 @@ export class Range implements ComponentInterface {
 
     // figure out which knob they started closer to
     let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
-    if (document.dir === 'rtl') {
+    if (isRTL(this.el)) {
       ratio = 1 - ratio;
     }
 
     this.pressedKnob =
       !this.dualKnobs ||
-      Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)
+        Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)
         ? 'A'
         : 'B';
 
@@ -320,7 +321,7 @@ export class Range implements ComponentInterface {
     // update the knob being interacted with
     const rect = this.rect;
     let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
-    if (document.dir === 'rtl') {
+    if (isRTL(this.el)) {
       ratio = 1 - ratio;
     }
 
@@ -384,9 +385,9 @@ export class Range implements ComponentInterface {
     this.value = !this.dualKnobs
       ? valA
       : {
-          lower: Math.min(valA, valB),
-          upper: Math.max(valA, valB)
-        };
+        lower: Math.min(valA, valB),
+        upper: Math.max(valA, valB)
+      };
 
     this.noUpdate = false;
   }
@@ -432,10 +433,10 @@ export class Range implements ComponentInterface {
     const barStart = `${ratioLower * 100}%`;
     const barEnd = `${100 - ratioUpper * 100}%`;
 
-    const doc = document;
-    const isRTL = doc.dir === 'rtl';
-    const start = isRTL ? 'right' : 'left';
-    const end = isRTL ? 'left' : 'right';
+    const rtl = isRTL(this.el);
+
+    const start = rtl ? 'right' : 'left';
+    const end = rtl ? 'left' : 'right';
 
     const tickStyle = (tick: any) => {
       return {
@@ -502,7 +503,7 @@ export class Range implements ComponentInterface {
             part="bar-active"
           />
 
-          { renderKnob(isRTL, {
+          {renderKnob(rtl, {
             knob: 'A',
             pressed: pressedKnob === 'A',
             value: this.valA,
@@ -516,7 +517,7 @@ export class Range implements ComponentInterface {
             labelText
           })}
 
-          { this.dualKnobs && renderKnob(isRTL, {
+          {this.dualKnobs && renderKnob(rtl, {
             knob: 'B',
             pressed: pressedKnob === 'B',
             value: this.valB,

diff --git a/core/src/components/range/test/rtl/e2e.ts b/core/src/components/range/test/rtl/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('range: RTL', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/range/test/rtl?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/range/test/rtl/index.html b/core/src/components/range/test/rtl/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Range - 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>Range - RTL</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="content">
+
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Range
+          </ion-label>
+        </ion-list-header>
+        <ion-item>
+          <ion-range dir="rtl" value="20" aria-label="Default Range"></ion-range>
+        </ion-item>
+
+    </ion-content>
+
+  </ion-app>
+
+</body>
+
+</html>