Adding Formfield

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>

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;
+  }
 }

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;

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: "",
 };