From d7663db6cffae8830a419790cba35498b2237372 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Fri, 13 Sep 2024 16:02:55 +0800
Subject: [PATCH] fix(experience-legacy): flip arrow icons on rtl (#6584)

---
 .../src/components/Button/MfaFactorButton.tsx |  5 ++-
 .../components/FlipOnRtl/index.module.scss    |  3 ++
 .../src/components/FlipOnRtl/index.tsx        | 38 +++++++++++++++++++
 .../src/components/NavBar/index.tsx           | 10 ++++-
 4 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 packages/experience-legacy/src/components/FlipOnRtl/index.module.scss
 create mode 100644 packages/experience-legacy/src/components/FlipOnRtl/index.tsx

diff --git a/packages/experience-legacy/src/components/Button/MfaFactorButton.tsx b/packages/experience-legacy/src/components/Button/MfaFactorButton.tsx
index be8a5d0c210..52ddd2e1223 100644
--- a/packages/experience-legacy/src/components/Button/MfaFactorButton.tsx
+++ b/packages/experience-legacy/src/components/Button/MfaFactorButton.tsx
@@ -8,6 +8,7 @@ import FactorTotp from '@/assets/icons/factor-totp.svg?react';
 import FactorWebAuthn from '@/assets/icons/factor-webauthn.svg?react';
 
 import DynamicT from '../DynamicT';
+import FlipOnRtl from '../FlipOnRtl';
 
 import mfaFactorButtonStyles from './MfaFactorButton.module.scss';
 import styles from './index.module.scss';
@@ -65,7 +66,9 @@ const MfaFactorButton = ({ factor, isBinding, onClick }: Props) => {
           <DynamicT forKey={(isBinding ? linkFactorDescription : factorDescription)[factor]} />
         </div>
       </div>
-      <ArrowNext className={mfaFactorButtonStyles.icon} />
+      <FlipOnRtl>
+        <ArrowNext className={mfaFactorButtonStyles.icon} />
+      </FlipOnRtl>
     </button>
   );
 };
diff --git a/packages/experience-legacy/src/components/FlipOnRtl/index.module.scss b/packages/experience-legacy/src/components/FlipOnRtl/index.module.scss
new file mode 100644
index 00000000000..c7d735b82ec
--- /dev/null
+++ b/packages/experience-legacy/src/components/FlipOnRtl/index.module.scss
@@ -0,0 +1,3 @@
+.flip {
+  transform: scaleX(-1);
+}
diff --git a/packages/experience-legacy/src/components/FlipOnRtl/index.tsx b/packages/experience-legacy/src/components/FlipOnRtl/index.tsx
new file mode 100644
index 00000000000..c39698a0241
--- /dev/null
+++ b/packages/experience-legacy/src/components/FlipOnRtl/index.tsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { cloneElement, isValidElement, type ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './index.module.scss';
+
+type Props = {
+  readonly children: ReactElement<HTMLElement>;
+};
+
+/**
+ * This component flips its child element horizontally if the browser's text direction is RTL (right-to-left).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FlipOnRtl>
+ *   <SVG />
+ * </FlipOnRtl>
+ * ```
+ *
+ * @param {React.ReactNode} children - The SVG or other HTML content to render and flip if RTL.
+ * @returns {JSX.Element} The flipped content.
+ */
+function FlipOnRtl({ children }: Props) {
+  const { i18n } = useTranslation();
+  const isRtl = i18n.dir() === 'rtl';
+
+  if (!isValidElement(children)) {
+    return children;
+  }
+
+  return cloneElement(children, {
+    className: classNames(children.props.className, isRtl && styles.flip),
+  });
+}
+
+export default FlipOnRtl;
diff --git a/packages/experience-legacy/src/components/NavBar/index.tsx b/packages/experience-legacy/src/components/NavBar/index.tsx
index abcfdab530d..e5e1bb60781 100644
--- a/packages/experience-legacy/src/components/NavBar/index.tsx
+++ b/packages/experience-legacy/src/components/NavBar/index.tsx
@@ -7,6 +7,8 @@ import ArrowPrev from '@/assets/icons/arrow-prev.svg?react';
 import NavClose from '@/assets/icons/nav-close.svg?react';
 import { onKeyDownHandler } from '@/utils/a11y';
 
+import FlipOnRtl from '../FlipOnRtl';
+
 import styles from './index.module.scss';
 
 type Props = {
@@ -48,7 +50,13 @@ const NavBar = ({ title, type = 'back', isHidden, onClose, onSkip }: Props) => {
         onKeyDown={onKeyDownHandler(clickHandler)}
         onClick={clickHandler}
       >
-        {isClosable ? <NavClose /> : <ArrowPrev />}
+        {isClosable ? (
+          <NavClose />
+        ) : (
+          <FlipOnRtl>
+            <ArrowPrev />
+          </FlipOnRtl>
+        )}
         {!isClosable && <span>{t('action.nav_back')}</span>}
       </div>
       {title && <div className={styles.title}>{title}</div>}