diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 0bd9322..8860515 100644
--- 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 = ({
{caption ? (
-
+
{caption}
) : null}
{description ? (
- {description}
+
+ {description}
+
) : null}
{children ? (
diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index c8935ed..a78a8de 100644
--- 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
index 2dc4469..7fe66e0 100644
--- 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 &
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(
(
{
size = 'large',
label,
- subLabel,
+ subLabel = '',
labelFixed,
placeholder,
helpText,
@@ -120,7 +123,6 @@ const Input = forwardRef(
subLabel,
labelFixed,
placeholder,
- required,
value,
focused,
});
@@ -235,10 +237,8 @@ const Input = forwardRef(
(
editable={!disabled}
accessibilityLabel={testID}
testID={testID}
+ textAlign={isRTL ? 'right' : 'left'}
/>
{trailingText ? (
diff --git a/src/components/Input/InputHelpText.tsx b/src/components/Input/InputHelpText.tsx
index 034b937..8665e8e 100644
--- 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 ? (
-
+
{content}
diff --git a/src/components/Input/InputLabel.tsx b/src/components/Input/InputLabel.tsx
index 804546d..249d793 100644
--- 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}
- {!required && requiredText ? (
+ {subLabel ? (
@@ -66,8 +64,9 @@ export const InputLabel = React.memo(
height={inputHeight + 6}
testID="outlined-label-box">
- {label}
- {subLabel ?? ''}
+ {isRTL
+ ? `${subLabel ?? ''}${label}`
+ : `${label}${subLabel ?? ''}`}
diff --git a/src/components/Input/__snapshots__/Input.test.tsx.snap b/src/components/Input/__snapshots__/Input.test.tsx.snap
index 4e2796e..a024a6a 100644
--- a/src/components/Input/__snapshots__/Input.test.tsx.snap
+++ b/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -53,8 +53,7 @@ exports[`Input should render disabled input correctly 1`] = `
}
}
>
- label
- undefined
+ label
@@ -98,6 +97,7 @@ exports[`Input should render disabled input correctly 1`] = `
]
}
testID="input"
+ textAlign="left"
/>
@@ -156,8 +156,7 @@ exports[`Input should render input correctly 1`] = `
}
}
>
- label
- undefined
+ label
@@ -201,6 +200,7 @@ exports[`Input should render input correctly 1`] = `
]
}
testID="input"
+ textAlign="left"
/>
@@ -259,8 +259,7 @@ exports[`Input should render input with error state and error text correctly 1`]
}
}
>
- label
- undefined
+ label
@@ -304,6 +303,7 @@ exports[`Input should render input with error state and error text correctly 1`]
]
}
testID="input"
+ textAlign="left"
/>
- label
- undefined
+ label
@@ -497,6 +497,7 @@ exports[`Input should render input with error state correctly 1`] = `
]
}
testID="input"
+ textAlign="left"
/>
- label
- undefined
+ label
@@ -662,6 +662,7 @@ exports[`Input should render input with help text correctly 1`] = `
]
}
testID="input"
+ textAlign="left"
/>
- label
- undefined
+ label
@@ -793,6 +794,7 @@ exports[`Input should render input with icon correctly 1`] = `
]
}
testID="input"
+ textAlign="left"
/>
- label
- undefined
+ label
@@ -1015,6 +1016,7 @@ exports[`Input should render input with leadingText correctly 1`] = `
]
}
testID="input"
+ textAlign="left"
/>
@@ -1073,8 +1075,7 @@ exports[`Input should render input with medium size correctly 1`] = `
}
}
>
- label
- undefined
+ label
@@ -1118,6 +1119,7 @@ exports[`Input should render input with medium size correctly 1`] = `
]
}
testID="input"
+ textAlign="left"
/>
@@ -1176,8 +1178,7 @@ exports[`Input should render input with small size correctly 1`] = `
}
}
>
- label
- undefined
+ label
@@ -1221,6 +1222,7 @@ exports[`Input should render input with small size correctly 1`] = `
]
}
testID="input"
+ textAlign="left"
/>
@@ -1279,8 +1281,7 @@ exports[`Input should render input with success state and success text correctly
}
}
>
- label
- undefined
+ label
@@ -1324,6 +1325,7 @@ exports[`Input should render input with success state and success text correctly
]
}
testID="input"
+ textAlign="left"
/>
- label
- undefined
+ label
@@ -1517,6 +1519,7 @@ exports[`Input should render input with success state correctly 1`] = `
]
}
testID="input"
+ textAlign="left"
/>
- label
- undefined
+ label
@@ -1682,6 +1684,7 @@ exports[`Input should render input with trailingText correctly 1`] = `
]
}
testID="input"
+ textAlign="left"
/>
label
+
+
+
diff --git a/src/components/Input/__snapshots__/InputHelpText.test.tsx.snap b/src/components/Input/__snapshots__/InputHelpText.test.tsx.snap
index 859f8fe..e31cfd6 100644
--- a/src/components/Input/__snapshots__/InputHelpText.test.tsx.snap
+++ b/src/components/Input/__snapshots__/InputHelpText.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`Input Help Text should render help text correctly 1`] = `
"fontSize": 12,
"fontWeight": "400",
"lineHeight": 14,
+ "textAlign": "right",
},
]
}
diff --git a/src/components/Input/__snapshots__/InputLabel.test.tsx.snap b/src/components/Input/__snapshots__/InputLabel.test.tsx.snap
index a296ea9..ac1fca3 100644
--- a/src/components/Input/__snapshots__/InputLabel.test.tsx.snap
+++ b/src/components/Input/__snapshots__/InputLabel.test.tsx.snap
@@ -96,7 +96,6 @@ exports[`Input Label should render outlined label correctly 1`] = `
style={Object {}}
>
Label
-
@@ -126,7 +125,6 @@ exports[`Input Label should render outlined label with optional correctly 1`] =
style={Object {}}
>
Label
-
diff --git a/src/components/Input/utils.test.ts b/src/components/Input/utils.test.ts
index 678837a..8e6bd6f 100644
--- a/src/components/Input/utils.test.ts
+++ b/src/components/Input/utils.test.ts
@@ -14,7 +14,6 @@ describe('Input Utils', () => {
const label = null;
const labelFixed = false;
const placeholder = null;
- const required = false;
const focused = false;
const value = '';
@@ -23,7 +22,6 @@ describe('Input Utils', () => {
label,
labelFixed,
placeholder,
- required,
value,
focused,
});
@@ -32,12 +30,11 @@ describe('Input Utils', () => {
expect(result).toBe('');
});
- test('should return placeholder when label null and has placeholder and required', () => {
+ test('should return placeholder when label null and has placeholder', () => {
// given
const label = null;
const labelFixed = false;
const placeholder = 'placeholder';
- const required = true;
const focused = false;
const value = '';
@@ -46,7 +43,6 @@ describe('Input Utils', () => {
label,
labelFixed,
placeholder,
- required,
value,
focused,
});
@@ -55,37 +51,11 @@ describe('Input Utils', () => {
expect(result).toBe('placeholder');
});
- test('should return placeholder optional when label null, has placeholder and required false', () => {
- // given
- const label = null;
- const subLabel = null;
- const labelFixed = false;
- const placeholder = 'placeholder';
- const required = false;
- const focused = false;
- const value = '';
-
- // when
- const result = getPlaceholderText({
- label,
- subLabel,
- labelFixed,
- placeholder,
- required,
- value,
- focused,
- });
-
- // then
- expect(result).toBe(`placeholder ${subLabel}`);
- });
-
test('should return empty text when placeholder null and has label', () => {
// given
const label = 'label';
const labelFixed = false;
const placeholder = null;
- const required = false;
const focused = false;
const value = '';
@@ -94,7 +64,6 @@ describe('Input Utils', () => {
label,
labelFixed,
placeholder,
- required,
value,
focused,
});
@@ -108,7 +77,6 @@ describe('Input Utils', () => {
const label = 'label';
const labelFixed = true;
const placeholder = 'placeholder';
- const required = false;
const focused = false;
const value = '';
@@ -117,7 +85,6 @@ describe('Input Utils', () => {
label,
labelFixed,
placeholder,
- required,
value,
focused,
});
@@ -131,7 +98,6 @@ describe('Input Utils', () => {
const label = 'label';
const labelFixed = false;
const placeholder = 'placeholder';
- const required = false;
const focused = false;
const value = '';
@@ -140,7 +106,6 @@ describe('Input Utils', () => {
label,
labelFixed,
placeholder,
- required,
value,
focused,
});
@@ -154,7 +119,6 @@ describe('Input Utils', () => {
const label = 'label';
const labelFixed = false;
const placeholder = 'placeholder';
- const required = false;
const focused = true;
const value = 'value';
@@ -163,7 +127,6 @@ describe('Input Utils', () => {
label,
labelFixed,
placeholder,
- required,
value,
focused,
});
@@ -177,7 +140,6 @@ describe('Input Utils', () => {
const label = 'label';
const labelFixed = false;
const placeholder = 'placeholder';
- const required = false;
const focused = false;
const value = 'value';
@@ -186,7 +148,6 @@ describe('Input Utils', () => {
label,
labelFixed,
placeholder,
- required,
value,
focused,
});
@@ -200,7 +161,6 @@ describe('Input Utils', () => {
const label = 'label';
const labelFixed = false;
const placeholder = 'placeholder';
- const required = false;
const focused = true;
const value = '';
@@ -209,7 +169,6 @@ describe('Input Utils', () => {
label,
labelFixed,
placeholder,
- required,
value,
focused,
});
diff --git a/src/components/Input/utils.ts b/src/components/Input/utils.ts
index 4b54b7f..1a47584 100644
--- a/src/components/Input/utils.ts
+++ b/src/components/Input/utils.ts
@@ -3,15 +3,13 @@ export const getPlaceholderText = ({
subLabel,
labelFixed,
placeholder,
- required,
value,
focused,
}: {
label?: string | null;
- subLabel?: string | null;
+ subLabel?: string;
labelFixed?: boolean;
placeholder?: string | null;
- required: boolean;
value?: string;
focused: boolean;
}) => {
@@ -32,10 +30,10 @@ export const getPlaceholderText = ({
}
if (!label && placeholder) {
- if (required) {
- return placeholder;
- } else {
+ if (subLabel) {
return `${placeholder} ${subLabel}`;
+ } else {
+ return placeholder;
}
}
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 1eeeaff..182f38f 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -5,6 +5,7 @@ import {
ScrollView,
StyleSheet,
TouchableOpacity,
+ I18nManager,
} from 'react-native';
import theme from '../../theme';
import Box from '../Box/Box';
@@ -32,6 +33,8 @@ export type ModalProps = A11yProps &
wrongPressThresholdMs?: number;
}>;
+const isRTL = I18nManager.isRTL;
+
const Modal = ({
visible,
title,
@@ -96,7 +99,8 @@ const Modal = ({
+ numberOfLines={2}
+ textAlign={isRTL ? 'left' : 'right'}>
{title}
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index 0c25052..5628605 100644
--- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -95,6 +95,7 @@ exports[`Modal should render Modal when visible true with children 1`] = `
"fontSize": 16,
"fontWeight": "500",
"lineHeight": 20,
+ "textAlign": "right",
},
]
}
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 3395164..5f80ffd 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -13,6 +13,7 @@ import {
Pressable,
StyleProp,
ViewStyle,
+ I18nManager,
} from 'react-native';
import theme, { Theme } from '../../theme';
import Text from '../Text/Text';
@@ -139,6 +140,8 @@ const Switch = ({
return result;
}, [testID, accessibilityLabel, accessible]);
+ const isRTL = I18nManager.isRTL;
+
return (
handleValueChange(!isEnabled)}
{...testProps}>
&
TextInputProps & {
label?: string | null;
@@ -237,6 +240,7 @@ const TextArea = forwardRef(
editable={!disabled}
accessibilityLabel={testID}
testID={testID}
+ textAlign={isRTL ? 'right' : 'left'}
/>
diff --git a/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap b/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap
index ba9856b..76e0cc8 100644
--- a/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap
+++ b/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap
@@ -99,6 +99,7 @@ exports[`TextArea should render TextArea correctly 1`] = `
]
}
testID="textArea"
+ textAlign="left"
/>