Merge pull request #75 from Trendyol/feat/rtl

feat(rtl) added RTL compatibility to components
Trendyol · Dec 25, 2024 · 3f8d409 · 3f8d409
2 parents 4d652cd + fb81638
commit 3f8d409
Show file tree

Hide file tree

Showing 16 changed files with 121 additions and 99 deletions.
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pressable, StyleSheet } from 'react-native';
+import { Pressable, StyleSheet, I18nManager } from 'react-native';
 import {
   VariantProps,
   createRestyleComponent,
@@ -34,6 +34,8 @@ const AlertContainer = createRestyleComponent<
   Theme
 >([variantVariant], Box);
 
+const isRTL = I18nManager.isRTL;
+
 const Alert = ({
   variant = 'info',
   icon,
@@ -57,13 +59,21 @@ const Alert = ({
         </Box>
         <Box flex={1}>
           {caption ? (
-            <Text variant="subtitle03Medium" pb="2xs" testID="alert-caption">
+            <Text
+              variant="subtitle03Medium"
+              pb="2xs"
+              testID="alert-caption"
+              textAlign={isRTL ? 'left' : 'right'}>
               {caption}
             </Text>
           ) : null}
 
           {description ? (
-            <Text testID="alert-description">{description}</Text>
+            <Text
+              testID="alert-description"
+              textAlign={isRTL ? 'left' : 'right'}>
+              {description}
+            </Text>
           ) : null}
 
           {children ? (

diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -124,6 +124,7 @@ exports[`Alert should render alert correctly 1`] = `
               "fontWeight": "500",
               "lineHeight": 16,
               "paddingBottom": 8,
+              "textAlign": "right",
             },
           ]
         }
@@ -140,6 +141,7 @@ exports[`Alert should render alert correctly 1`] = `
               "color": "#273142",
               "fontFamily": "Rubik-Regular",
               "fontSize": 14,
+              "textAlign": "right",
             },
           ]
         }

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -6,6 +6,7 @@ import {
   TextInput,
   TextInputProps,
   TextInputFocusEventData,
+  I18nManager,
 } from 'react-native';
 import theme, { Theme } from '../../theme';
 import Box from '../Box/Box';
@@ -35,7 +36,7 @@ import Text from '../Text/Text';
 type InputProps = React.ComponentProps<typeof Box> &
   TextInputProps & {
     label?: string | null;
-    subLabel?: string | null;
+    subLabel?: string;
     labelFixed?: boolean;
     placeholder?: string;
     helpText?: string | null;
@@ -76,12 +77,14 @@ export type TextInputHandles = Pick<
   'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
 >;
 
+const isRTL = I18nManager.isRTL;
+
 const Input = forwardRef<TextInputHandles, InputProps>(
   (
     {
       size = 'large',
       label,
-      subLabel,
+      subLabel = '',
       labelFixed,
       placeholder,
       helpText,
@@ -120,7 +123,6 @@ const Input = forwardRef<TextInputHandles, InputProps>(
       subLabel,
       labelFixed,
       placeholder,
-      required,
       value,
       focused,
     });
@@ -235,10 +237,8 @@ const Input = forwardRef<TextInputHandles, InputProps>(
       <Box py={'2xs'}>
         <InputLabel
           label={label}
-          subLabel={` ${subLabel}`}
+          subLabel={` ${subLabel} `}
           labelFixed={labelFixed}
-          required={required}
-          requiredText={requiredText}
           errorState={errorState}
           successState={successState}
           animatedViewProps={animatedViewProps}
@@ -284,6 +284,7 @@ const Input = forwardRef<TextInputHandles, InputProps>(
             editable={!disabled}
             accessibilityLabel={testID}
             testID={testID}
+            textAlign={isRTL ? 'right' : 'left'}
           />
           {trailingText ? (
             <Box ml="m" mr={icon ? 'm' : 'none'}>

diff --git a/src/components/Input/InputHelpText.tsx b/src/components/Input/InputHelpText.tsx
@@ -2,6 +2,9 @@ import React from 'react';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
 import { getHelpText, getTextColor } from './utils';
+import { I18nManager } from 'react-native';
+
+const isRTL = I18nManager.isRTL;
 
 export const InputHelpText = React.memo(
   ({
@@ -33,7 +36,10 @@ export const InputHelpText = React.memo(
 
     return content ? (
       <Box mt="3xs" ml="m">
-        <Text variant="subtitle04Regular" color={textColor}>
+        <Text
+          variant="subtitle04Regular"
+          color={textColor}
+          textAlign={isRTL ? 'left' : 'right'}>
           {content}
         </Text>
       </Box>

diff --git a/src/components/Input/InputLabel.tsx b/src/components/Input/InputLabel.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import { Animated } from 'react-native';
+import { Animated, I18nManager } from 'react-native';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
 import { AnimatedTextPropsType, AnimatedViewPropsType } from './types';
 import { getLabelColor } from './utils';
 
+const isRTL = I18nManager.isRTL;
+
 export const InputLabel = React.memo(
   ({
     label,
     subLabel,
     labelFixed,
-    required,
-    requiredText,
     errorState,
     successState,
     animatedViewProps,
@@ -21,8 +21,6 @@ export const InputLabel = React.memo(
     label?: string | null;
     subLabel?: string | null;
     labelFixed?: boolean;
-    required?: boolean;
-    requiredText?: boolean;
     errorState: boolean;
     successState: boolean;
     animatedViewProps: AnimatedViewPropsType;
@@ -44,9 +42,9 @@ export const InputLabel = React.memo(
             testID="fixed-label">
             {label}
           </Text>
-          {!required && requiredText ? (
+          {subLabel ? (
             <Text
-              testID="optional-fixed-label"
+              testID="subLabel"
               ml="4xs"
               variant="subtitle04Regular"
               color="neutralLight">
@@ -66,8 +64,9 @@ export const InputLabel = React.memo(
               height={inputHeight + 6}
               testID="outlined-label-box">
               <Animated.Text {...animatedTextProps}>
-                {label}
-                {subLabel ?? ''}
+                {isRTL
+                  ? `${subLabel ?? ''}${label}`
+                  : `${label}${subLabel ?? ''}`}
               </Animated.Text>
             </Box>
           </Animated.View>