fix: Add directionStyles for input-control-styles

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 } from 'react';
+import type { CSSProperties, ReactNode, HTMLInputTypeAttribute } from 'react';
 
 /**
  * Internal dependencies
@@ -141,6 +141,7 @@ type InputProps = {
 	dragCursor?: CSSProperties[ 'cursor' ];
 	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
 	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
+	type?: HTMLInputTypeAttribute;
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
@@ -153,6 +154,15 @@ 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',
@@ -283,16 +293,11 @@ export const Input = styled.input< InputProps >`
 		${ fontSizeStyles }
 		${ sizeStyles }
 		${ customPaddings }
+		${ directionStyles }
 
 		&::-webkit-input-placeholder {
 			line-height: normal;
 		}
-
-		&[type='email'],
-		&[type='url'] {
-			/* rtl:ignore */
-			direction: ltr;
-		}
 	}
 `;