Changed TextInput to have dynamic width rather than 'full'

0xsequence · Oct 18, 2024 · f59d1f9 · f59d1f9
1 parent 37789c5
commit f59d1f9
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -63,22 +63,25 @@ export const TextInput: PolymorphicComponent<TextInputProps, 'input'> =
                 styles.wrapVariants({ borderRadius })
               )}
             >
-              {LeftIcon && <LeftIcon size="sm" />}
+              <Box className={styles.inputContainer}>
+                {LeftIcon && <LeftIcon size="sm" />}
 
-              <Box
-                as={as}
-                autoComplete={autoComplete}
-                spellCheck="false"
-                className={styles.input({ numeric })}
-                disabled={disabled}
-                id={id ?? name}
-                name={name}
-                ref={ref}
-                type={type}
-                {...rest}
-              />
+                <Box
+                  as={as}
+                  autoComplete={autoComplete}
+                  spellCheck="false"
+                  className={styles.input({ numeric })}
+                  disabled={disabled}
+                  id={id ?? name}
+                  name={name}
+                  ref={ref}
+                  type={type}
+                  {...rest}
+                />
+
+                {RightIcon && <RightIcon size="sm" />}
+              </Box>
 
-              {RightIcon && <RightIcon size="sm" />}
               {controls}
             </Box>
           </Box>

diff --git a/src/components/TextInput/styles.css.ts b/src/components/TextInput/styles.css.ts
@@ -56,6 +56,15 @@ export const wrapVariants = recipe({
 
 export type WrapVariants = RecipeVariants<typeof wrapVariants>
 
+export const inputContainer = style([
+  atoms({
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexGrow: '1',
+    gap: '2',
+  }),
+])
+
 export const input = recipe({
   base: atoms({
     display: 'block',
@@ -64,7 +73,7 @@ export const input = recipe({
     border: 'none',
     paddingX: '0',
     paddingY: '4',
-    width: 'full',
+    flexGrow: '1',
     height: 'full',
     focusRing: 'none',
   }),