style: Add direction ltr for email and url for rtl languages

im3dabasia · Dec 28, 2024 · 39deacb · 39deacb
1 parent d517683
commit 39deacb
Showing 1 changed file with 7 additions and 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
@@ -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;
+		}
 	}
 `;