From 353dbc0537ef3b46b9ba13a365ebc5da269de4c7 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 19 Jan 2022 13:33:47 -0500 Subject: [PATCH] fix(toggle): setting dir on ion-toggle to enable rtl mode now supported (#24600) --- core/src/components/toggle/test/rtl/e2e.ts | 11 +++++ .../src/components/toggle/test/rtl/index.html | 41 +++++++++++++++++++ core/src/components/toggle/toggle.tsx | 7 ++-- 3 files changed, 55 insertions(+), 4 deletions(-) create mode 100644 core/src/components/toggle/test/rtl/e2e.ts create mode 100644 core/src/components/toggle/test/rtl/index.html diff --git a/core/src/components/toggle/test/rtl/e2e.ts b/core/src/components/toggle/test/rtl/e2e.ts new file mode 100644 index 0000000000..a9530b417b --- /dev/null +++ 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 new file mode 100644 index 0000000000..04581ac61b --- /dev/null +++ b/core/src/components/toggle/test/rtl/index.html @@ -0,0 +1,41 @@ + + + + + + Toggle - RTL + + + + + + + + + + + + + + Toggle - RTL + + + + + + + + + + + Toggle + + + + + + + + + diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index eaad0e04b6..5e32f2d2b9 100644 --- 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));