chore: Extend input component

ApeSwapFinance · Jun 17, 2022 · 8e70b89 · 8e70b89
1 parent bab3df1
commit 8e70b89
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 34 deletions.
diff --git a/src/__tests__/components/input.test.tsx b/src/__tests__/components/input.test.tsx
@@ -9,10 +9,10 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="css-1u137ur"
+        class="css-qxbvaj"
       >
         <input
-          class="css-1spk4n4"
+          class="css-waj1w6"
           type="text"
           value="input"
         />

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -3,39 +3,43 @@ import { Input as ThemeUIInput, Box } from "theme-ui";
 import { InputProps, sizes, iconSizes } from "./types";
 import { Svg } from "../Svg";
 
-const Input: React.FC<InputProps> = ({ size = sizes.MD, icon, width, sx, ...props }) => {
-  return (
-    <Box
-      sx={{
-        position: "relative",
-        width: "fit-content",
-      }}
-    >
-      <ThemeUIInput
-        {...props}
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ size = sizes.MD, icon, width = "200px", ...props }, ref) => {
+    return (
+      <Box
         sx={{
+          position: "relative",
+          display: "inline-block",
           width,
-          pl: "15px",
-          pr: icon ? "40px" : "15px",
-          variant: `forms.input.${size}`,
-          color: "text",
-          outline: "none",
         }}
-      />
-      {icon && (
-        <Box
+      >
+        <ThemeUIInput
+          {...props}
+          ref={ref}
           sx={{
-            position: "absolute",
-            top: "50%",
-            transform: "translateY(-50%)",
-            right: "15px",
+            pl: "15px",
+            pr: icon ? "40px" : "15px",
+            variant: `forms.input.${size}`,
+            color: "text",
+            outline: "none",
+            width: "100%",
           }}
-        >
-          <Svg icon={icon} width={iconSizes[size]} />
-        </Box>
-      )}
-    </Box>
-  );
-};
+        />
+        {icon && (
+          <Box
+            sx={{
+              position: "absolute",
+              top: "50%",
+              transform: "translateY(-50%)",
+              right: "15px",
+            }}
+          >
+            <Svg icon={icon} width={iconSizes[size]} />
+          </Box>
+        )}
+      </Box>
+    );
+  }
+);
 
 export default Input;
diff --git a/src/theme/Apeswap/index.ts b/src/theme/Apeswap/index.ts
@@ -92,19 +92,16 @@ const Apeswap: Theme = {
         background: "white3",
         borderRadius: 10,
         height: "32px",
-        width: "200px",
       },
       md: {
         background: "white3",
         borderRadius: 10,
         height: "36px",
-        width: "200px",
       },
       lg: {
         background: "white3",
         borderRadius: 14,
         height: "48px",
-        width: "200px",
       },
     },
     textarea: {