From 361aab70854e44eb23c78497c23e14fdf210bd21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 11:43:32 -0300
Subject: [PATCH] Adding Formfield

---
 src/core/client/auth/components/SignIn.tsx    |  8 +++----
 .../ui/components/FormField/FormField.css     | 12 +++++++++-
 .../ui/components/FormField/FormField.tsx     | 24 +++++++++++++------
 .../ui/components/TextField/TextField.tsx     |  2 +-
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 1e0db967e..f5f350e2b 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -20,7 +20,7 @@ const SignIn: StatelessComponent = props => {
 
         <FormField>
           <InputLabel>Email Address</InputLabel>
-          <TextField fullWidth />
+          <TextField />
         </FormField>
 
         <FormField>
@@ -29,18 +29,18 @@ const SignIn: StatelessComponent = props => {
             A unique identifier displayed on your comments. You may use “_” and
             “.”
           </Typography>
-          <TextField fullWidth />
+          <TextField />
         </FormField>
 
         <FormField>
           <InputLabel>Password</InputLabel>
           <Typography>Must be at least 8 characters</Typography>
-          <TextField fullWidth />
+          <TextField />
         </FormField>
 
         <FormField>
           <InputLabel>Confirm Password</InputLabel>
-          <TextField fullWidth />
+          <TextField />
         </FormField>
 
         <Button variant="filled" color="primary" size="large" fullWidth>
diff --git a/src/core/client/ui/components/FormField/FormField.css b/src/core/client/ui/components/FormField/FormField.css
index c5096a4f2..7d919365e 100644
--- a/src/core/client/ui/components/FormField/FormField.css
+++ b/src/core/client/ui/components/FormField/FormField.css
@@ -1,5 +1,15 @@
 .root {
-  display: block;
+  display: flex;
+  flex-direction: column;
   margin-bottom: var(--spacing-unit);
   width: 100%;
+  justify-content: space-between;
+
+  &.halfItemGutter > * {
+    margin-left: calc(0.5 * var(--spacing-unit)) !important;
+  }
+
+  &.itemGutter > * {
+    margin-top: var(--spacing-unit) !important;
+  }
 }
diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
index 41c762785..fe5b6dd7b 100644
--- a/src/core/client/ui/components/FormField/FormField.tsx
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -3,7 +3,6 @@ import React, { ReactNode } from "react";
 import { StatelessComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
-import Flex from "../Flex";
 
 import * as styles from "./FormField.css";
 
@@ -12,22 +11,33 @@ interface InnerProps {
   classes: typeof styles;
   id?: string;
   className?: string;
+  itemGutter?: boolean | "half";
 }
 
 const FormField: StatelessComponent<InnerProps> = props => {
-  const { classes, className, children, ...rest } = props;
+  const { classes, className, children, itemGutter, ...rest } = props;
 
+  // TODO (bc): Use flex component once the extra div issue is solved.
   return (
-    <Flex
-      direction="column"
-      itemGutter="half"
-      className={cn(classes.root, className)}
+    <div
+      className={cn(
+        classes.root,
+        {
+          [classes.itemGutter]: itemGutter === true,
+          [classes.halfItemGutter]: itemGutter === "half",
+        },
+        className
+      )}
       {...rest}
     >
       {children}
-    </Flex>
+    </div>
   );
 };
 
+FormField.defaultProps = {
+  itemGutter: true,
+};
+
 const enhanced = withStyles(styles)(FormField);
 export default enhanced;
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index c07e8b4a6..e3771b2b6 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -72,7 +72,7 @@ const TextField: StatelessComponent<TextFieldProps> = props => {
 
 TextField.defaultProps = {
   color: "regular",
-  fullWidth: false,
+  fullWidth: true,
   placeholder: "",
 };