TextField with icon.

packages/components/src/components/TextField/TextField.style.ts

@@ -1,18 +1,21 @@
 import { css } from "@emotion/core"
-import { typography, colors } from "./../../theme"
+import { typography, colors, spacing } from "./../../theme"
+import { icon } from "@fortawesome/fontawesome-svg-core"
 
 export type TextFieldStyleProps = {
   disabled?: boolean
   focus?: boolean
   error?: boolean
   isActive?: boolean
+  iconPosition?: "right" | "left"
 }
 
 export let makeStyles = ({
   disabled = false,
   focus = false,
   error = false,
-  isActive = false
+  isActive = false,
+  iconPosition = "right"
 }: TextFieldStyleProps) => {
 
   const borderColor = disabled ? colors.gray[200] :
@@ -42,18 +45,27 @@ export let makeStyles = ({
     `,
     label: css`
       color: ${error ? colors.error : colors.gray[400]};
-      padding: 0 10px;
+      padding: 0 ${spacing.s};
+      ${icon ? `padding-${iconPosition}: ${spacing["4l"]};` : ""}
       background-color: ${colors.black};
       transition: all 0.1s linear;
     `,
     input: css`
       display: none;
       width: 100%;
-      margin: 0 10px;
+      margin: 0 ${spacing.s};
+      ${icon ? `margin-${iconPosition}: ${spacing["4l"]};` : ""}
       background: none;
       border: none;
       color: ${colors.white};
       outline: none;
+    `,
+    icon: css`
+      color: ${colors.gray[300]};
+      font-size: ${typography.sizes.icon.xlarge};
+      position: absolute;
+      top: ${spacing.s};
+      ${iconPosition}: ${spacing.s};
     `
   }
 }

packages/components/src/components/TextField/TextField.tsx

@@ -1,14 +1,13 @@
 import React, { useState, useRef, useEffect } from "react"
 import { makeStyles, TextFieldStyleProps } from "./TextField.style"
-import { colors } from "./../../theme"
 import { IconProp } from "@fortawesome/fontawesome-svg-core"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { spacing } from "./../../theme"
 
 type TextFieldProps = {
   label: string
-  value?: string,
+  value?: string
   icon?: IconProp
-  iconPosition?: "right" | "left"
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
   onChange?: (e: React.ChangeEvent) => void
 } & TextFieldStyleProps
@@ -17,7 +16,6 @@ export default function TextField({
   label,
   value = "",
   icon = null,
-  iconPosition = "right",
   disabled = false,
   onClick,
   onChange,
@@ -46,9 +44,9 @@ export default function TextField({
     setIsActive(false)
   }
 
-  function onInputTextChange(event: React.FormEvent<HTMLInputElement>): React.ChangeEventHandler {
+  function onInputTextChange(event: React.FormEvent<HTMLInputElement>): void {
     if (!disabled) setInputTextValue(event.currentTarget.value)
-  }
+  } 
   
   return (
     <div css={styles.container} onClick={onTextFieldClick}>
@@ -59,7 +57,8 @@ export default function TextField({
             position: "absolute",
             top: "-8px",
             left: "5px",
-            fontSize: "0.7rem"
+            fontSize: "0.7rem",
+            padding: `0 ${spacing.xs}`
           }}>
             {label}
         </div>
@@ -72,6 +71,9 @@ export default function TextField({
           onChange={disabled ? null : onInputTextChange}
           onBlur={onInputTextBlur}
         />
+        {!!icon &&
+          <FontAwesomeIcon icon={icon} css={styles.icon} />
+        }
       </div>
     </div>
   )

packages/components/src/theme/spacing.ts

@@ -1,7 +1,7 @@
 export default {
-  xxs: "2px",
-  xs: "4px",
-  s: "8px",
+  xxs: "4px",
+  xs: "8px",
+  s: "12px",
   m: "16px",
   l: "20px",
   xl: "24px",

packages/components/stories/06-TextField.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { TextField } from "../src"
+import { TextField } from "./../src"
+import { faBan } from "@fortawesome/free-solid-svg-icons"
 
 export default {
   title: "TextField",
@@ -35,3 +36,15 @@ export const DisabledWithValue = () => (
     <TextField label="Label" value="Disabled" disabled={true} />
   </div>
 )
+
+export const PrimaryWithIconRight = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <TextField label="Label" icon={faBan} iconPosition="right" />
+  </div>
+)
+
+export const PrimaryWithIconLeft = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <TextField label="Label" icon={faBan} iconPosition="left" />
+  </div>
+)