Merge pull request #62 from MacPaw/feat/icon_for_input

add icon to Input component
MacPaw · May 17, 2022 · e4a182f · e4a182f
2 parents a930088 + 679ca13
commit e4a182f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@macpaw/macpaw-ui",
-  "version": "3.9.7",
+  "version": "3.10.0",
   "main": "lib/ui.js",
   "scripts": {
     "dev": "next -p 1234",

diff --git a/pages/input.mdx b/pages/input.mdx
@@ -1,4 +1,5 @@
 import { Input, FormRow, Button, Password } from '../src/ui';
+import { SearchIcon } from '../src/Icons/jsx';
 
 # Input
 
@@ -269,4 +270,20 @@ const [value, setValue] = React.useState(10);
         />
     </FormRow>
 </div>
-```
+```
+
+# Input with icon
+
+<div style={{ width: 300 }}>
+    <FormRow>
+        <Input type="text" name="name" placeholder="Name" onChange={() => {}} label="Default" icon={<SearchIcon />} />
+    </FormRow>
+</div>
+
+```
+<div style={{ width: 300 }}>
+    <FormRow>
+        <Input type="text" name="name" placeholder="Name" onChange={() => {}} label="Default" icon={<SearchIcon />} />
+    </FormRow>
+</div>
+```
diff --git a/src/Input/Input.scss b/src/Input/Input.scss
@@ -42,6 +42,14 @@
     right: 18px;
   }
 
+  &-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 15px;
+    line-height: 1;
+  }
+
   &-currency {
     position: absolute;
     top: 50%;
@@ -96,6 +104,10 @@
     &.-with-currency {
       padding-right: 60px;
     }
+
+    &.-with-icon {
+      padding-left: 44px;
+    }
   }
 
   textarea {

diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
@@ -18,6 +18,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   action?: ReactNode;
   multiline?: boolean;
   label?: string | ReactNode;
+  icon?: ReactNode;
   rows?: number;
   currency?: string;
   formatOnEvent?: 'blur' | 'input';
@@ -37,6 +38,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     label,
     currency,
     className,
+    icon,
     value,
     onChange,
     formatOnEvent = '',
@@ -59,7 +61,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const inputValue = !isDirtyRef.current ? (format?.(value ?? '') ?? value) : value;
   const inputClassNames = cx(className, {
     '-with-action': action,
-    '-with-currency': currency
+    '-with-currency': currency,
+    '-with-icon': icon
   });
 
   const componentProps: any = {
@@ -110,6 +113,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     <label className={classNames} style={style}>
       {label && <span className="input-label h6">{label}{`${other.required ? ' *' : ''}`}</span>}
       <span className="input-field">
+        {icon && <span className="input-icon">{icon}</span>}
         <Component
           {...componentProps}
           {...other}