From 39deacbf75786cc36a72482ca86d5f56ef9f19ba Mon Sep 17 00:00:00 2001
From: im3dabasia <eshaan.dabasiya@rtcamp.com>
Date: Sat, 28 Dec 2024 14:31:46 +0530
Subject: [PATCH] style: Add direction ltr for email and url for rtl languages

---
 .../styles/input-control-styles.tsx           | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index 7530f2944aa6c7..db24a5e60f137a 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -4,7 +4,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import type { CSSProperties, ReactNode, HTMLInputTypeAttribute } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -141,7 +141,6 @@ type InputProps = {
 	dragCursor?: CSSProperties[ 'cursor' ];
 	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
 	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
-	type?: HTMLInputTypeAttribute;
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
@@ -154,15 +153,6 @@ const disabledStyles = ( { disabled }: InputProps ) => {
 	} );
 };
 
-const directionStyles = ( { type }: InputProps ) => {
-	if ( type !== 'url' && type !== 'email' ) {
-		return '';
-	}
-	return css`
-		direction: ltr;
-	`;
-};
-
 export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: '13px',
@@ -293,11 +283,16 @@ export const Input = styled.input< InputProps >`
 		${ fontSizeStyles }
 		${ sizeStyles }
 		${ customPaddings }
-		${ directionStyles }
 
 		&::-webkit-input-placeholder {
 			line-height: normal;
 		}
+
+		&[type='email'],
+		&[type='url'] {
+			/* rtl:ignore */
+			direction: ltr;
+		}
 	}
 `;