fix(react): TextField prefix/suffix first render transition (#153)

jonambas · Sep 19, 2023 · 7ba9923 · 7ba9923
1 parent a047506
commit 7ba9923
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/src/text-field/TextField.tsx b/packages/react/src/text-field/TextField.tsx
@@ -43,7 +43,8 @@ const inputStyles = cva({
     background: 'transparent',
     fontSize: '3',
     paddingX: '3',
-    transition: '0.15s',
+    transitionDuration: '0.15s',
+    transitionProperty: 'background, border',
     outline: 'none',
     color: 'gray12',
     '&:hover:not(:focus)': {
@@ -116,8 +117,8 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
     useEffect(() => {
       const styles: HTMLAttributes<'input'>['style'] = {
-        paddingLeft: undefined,
-        paddingRight: undefined
+        paddingLeft: prefix ? `calc(1rem + 1ch)` : undefined,
+        paddingRight: suffix ? `calc(1rem + 1ch)` : undefined
       };
 
       if (prefixRef.current) {
@@ -129,7 +130,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       }
 
       setPadding(styles);
-    }, [prefixRef, suffixRef]);
+    }, [prefix, suffix, prefixRef, suffixRef]);
 
     return (
       <div className={containerStyles}>