fix(toggle): setting dir on ion-toggle to enable rtl mode now supported (#24600)

sean-perkins · web-flow · commit 353dbc0537ef · 2022-01-19T13:33:47.000-05:00
diff --git a/core/src/components/toggle/test/rtl/e2e.ts b/core/src/components/toggle/test/rtl/e2e.ts
@@ -0,0 +1,11 @@
+
+import { newE2EPage } from '@stencil/core/testing';
+
+test('toggle: RTL', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toggle/test/rtl?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/toggle/test/rtl/index.html b/core/src/components/toggle/test/rtl/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Toggle - 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>Toggle - RTL</ion-title>
+        <ion-buttons slot="primary">
+          <ion-toggle aria-label="Toggle"></ion-toggle>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="content">
+
+      <ion-list>
+        <ion-item>
+          <ion-label>Toggle</ion-label>
+          <ion-toggle dir="rtl" slot="start" name="item-1" checked></ion-toggle>
+        </ion-item>
+
+    </ion-content>
+
+  </ion-app>
+</body>
+
+</html>
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
@@ -4,6 +4,7 @@ import { getIonMode } from '../../global/ionic-global';
 import { Color, Gesture, GestureDetail, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
 import { getAriaLabel, renderHiddenInput } from '../../utils/helpers';
 import { hapticSelection } from '../../utils/native/haptic';
+import { isRTL } from '../../utils/rtl';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
@@ -138,7 +139,7 @@ export class Toggle implements ComponentInterface {
   }
 
   private onMove(detail: GestureDetail) {
-    if (shouldToggle(document, this.checked, detail.deltaX, -10)) {
+    if (shouldToggle(isRTL(this.el), this.checked, detail.deltaX, -10)) {
       this.checked = !this.checked;
       hapticSelection();
     }
@@ -224,9 +225,7 @@ export class Toggle implements ComponentInterface {
   }
 }
 
-const shouldToggle = (doc: HTMLDocument, checked: boolean, deltaX: number, margin: number): boolean => {
-  const isRTL = doc.dir === 'rtl';
-
+const shouldToggle = (isRTL: boolean, checked: boolean, deltaX: number, margin: number): boolean => {
   if (checked) {
     return (!isRTL && (margin > deltaX)) ||
       (isRTL && (- margin < deltaX));

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ import { getIonMode } from '../../global/ionic-global';`
`4`	`4`	`import { Color, Gesture, GestureDetail, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';`
`5`	`5`	`import { getAriaLabel, renderHiddenInput } from '../../utils/helpers';`
`6`	`6`	`import { hapticSelection } from '../../utils/native/haptic';`
	`7`	`+import { isRTL } from '../../utils/rtl';`
`7`	`8`	`import { createColorClasses, hostContext } from '../../utils/theme';`
`8`	`9`
`9`	`10`	`/**`
`@@ -138,7 +139,7 @@ export class Toggle implements ComponentInterface {`
`138`	`139`	`}`
`139`	`140`
`140`	`141`	`private onMove(detail: GestureDetail) {`
`141`		`- if (shouldToggle(document, this.checked, detail.deltaX, -10)) {`
	`142`	`+ if (shouldToggle(isRTL(this.el), this.checked, detail.deltaX, -10)) {`
`142`	`143`	`this.checked = !this.checked;`
`143`	`144`	`hapticSelection();`
`144`	`145`	`}`
`@@ -224,9 +225,7 @@ export class Toggle implements ComponentInterface {`
`224`	`225`	`}`
`225`	`226`	`}`
`226`	`227`
`227`		`-const shouldToggle = (doc: HTMLDocument, checked: boolean, deltaX: number, margin: number): boolean => {`
`228`		`- const isRTL = doc.dir === 'rtl';`
`229`		`-`
	`228`	`+const shouldToggle = (isRTL: boolean, checked: boolean, deltaX: number, margin: number): boolean => {`
`230`	`229`	`if (checked) {`
`231`	`230`	`return (!isRTL && (margin > deltaX)) \|\|`
`232`	`231`	`(isRTL && (- margin < deltaX));`