TextField component with helper text.

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

@@ -24,11 +24,14 @@ export let makeStyles = ({
     isActive ? colors.gray[200] : colors.gray[400]
 
   return {
+    wrapper: css`
+      display: block;
+      font-family: ${typography.fonts.base};
+    `,
     container: css`
       position: relative;
       min-width: 250px;
       height: 50px;
-      font-family: ${typography.fonts.base};
       display: inline-flex;
       cursor: ${disabled ? "not-allowed" : "default"};
     `,
@@ -46,7 +49,7 @@ export let makeStyles = ({
     label: css`
       color: ${error ? colors.error : colors.gray[400]};
       padding: 0 ${spacing.s};
-      ${icon ? `padding-${iconPosition}: ${spacing["4l"]};` : ""}
+      ${icon ? `padding-${iconPosition}: ${spacing.xxxxl};` : ""}
       background-color: ${colors.black};
       transition: all 0.1s linear;
     `,
@@ -54,7 +57,7 @@ export let makeStyles = ({
       display: none;
       width: 100%;
       margin: 0 ${spacing.s};
-      ${icon ? `margin-${iconPosition}: ${spacing["4l"]};` : ""}
+      ${icon ? `margin-${iconPosition}: ${spacing.xxxxl};` : ""}
       background: none;
       border: none;
       color: ${colors.white};
@@ -66,6 +69,11 @@ export let makeStyles = ({
       position: absolute;
       top: ${spacing.s};
       ${iconPosition}: ${spacing.s};
+    `,
+    helper: css`
+      color: ${error ? colors.error : colors.gray[400]};
+      font-size: ${typography.sizes.caption};
+      margin: ${spacing.xxs} ${spacing.xs};
     `
   }
 }

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

@@ -6,6 +6,7 @@ import { spacing } from "./../../theme"
 
 type TextFieldProps = {
   label: string
+  helper?: string
   value?: string
   icon?: IconProp
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
@@ -14,6 +15,7 @@ type TextFieldProps = {
 
 export default function TextField({
   label,
+  helper = "",
   value = "",
   icon = null,
   disabled = false,
@@ -49,32 +51,37 @@ export default function TextField({
   } 
   
   return (
-    <div css={styles.container} onClick={onTextFieldClick}>
-      <div css={styles.border}>
-        <div
-          css={styles.label}
-          style={!inputTextValue && !isActive ? {} : {
-            position: "absolute",
-            top: "-8px",
-            left: "5px",
-            fontSize: "0.7rem",
-            padding: `0 ${spacing.xs}`
-          }}>
-            {label}
+    <div css={styles.wrapper}>
+      <div css={styles.container} onClick={onTextFieldClick}>
+        <div css={styles.border}>
+          <div
+            css={styles.label}
+            style={!inputTextValue && !isActive ? {} : {
+              position: "absolute",
+              top: "-8px",
+              left: "5px",
+              fontSize: "0.7rem",
+              padding: `0 ${spacing.xs}`
+            }}>
+              {label}
+          </div>
+          <input
+            css={styles.input}
+            style={{ display: !!inputTextValue || isActive ? "block" : "none"}}
+            ref={inputRef}
+            type="text"
+            value={inputTextValue}
+            onChange={disabled ? null : onInputTextChange}
+            onBlur={onInputTextBlur}
+          />
+          {!!icon &&
+            <FontAwesomeIcon icon={icon} css={styles.icon} />
+          }
         </div>
-        <input
-          css={styles.input}
-          style={{ display: !!inputTextValue || isActive ? "block" : "none"}}
-          ref={inputRef}
-          type="text"
-          value={inputTextValue}
-          onChange={disabled ? null : onInputTextChange}
-          onBlur={onInputTextBlur}
-        />
-        {!!icon &&
-          <FontAwesomeIcon icon={icon} css={styles.icon} />
-        }
       </div>
+      {!!helper &&
+        <p css={styles.helper}>{helper}</p>
+      }
     </div>
   )
 }

packages/components/src/theme/spacing.ts

@@ -7,6 +7,6 @@ export default {
   xl: "24px",
   xxl: "32px",
   xxxl: "40px",
-  "4l": "48px",
-  "5l": "64px"
+  xxxxl: "48px",
+  xxxxxl: "64px"
 }

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

@@ -48,3 +48,21 @@ export const PrimaryWithIconLeft = () => (
     <TextField label="Label" icon={faBan} iconPosition="left" />
   </div>
 )
+
+export const PrimaryWithHelperText = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <TextField label="Label" helper="Helper text" />
+  </div>
+)
+
+export const FocusWithHelperText = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <TextField label="Label" focus={true} helper="Helper text" />
+  </div>
+)
+
+export const ErrorWithHelperText = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <TextField label="Label" error={true} helper="Helper text" />
+  </div>
+)