Fix formfield by using Flex

src/core/client/ui/components/FormField/FormField.css

@@ -1,14 +1,3 @@
 .root {
-  display: flex;
-  flex-direction: column;
   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.mdx

@@ -16,7 +16,7 @@ FormField manages the gutters between inner elements. It's a form field wrapper
     <FormField>
       <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
-      <TextField/>
+      <TextField fullWidth />
       <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
     </FormField>
 </Playground>

src/core/client/ui/components/FormField/FormField.tsx

@@ -4,6 +4,7 @@ import { StatelessComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
+import Flex from "../Flex";
 import * as styles from "./FormField.css";
 
 interface InnerProps {
@@ -17,21 +18,15 @@ interface InnerProps {
 const FormField: StatelessComponent<InnerProps> = props => {
   const { classes, className, children, itemGutter, ...rest } = props;
 
-  // TODO (bc): Use flex component once the extra div issue is solved.
   return (
-    <div
-      className={cn(
-        classes.root,
-        {
-          [classes.itemGutter]: itemGutter === true,
-          [classes.halfItemGutter]: itemGutter === "half",
-        },
-        className
-      )}
+    <Flex
+      direction="column"
+      className={cn(classes.root, className)}
+      itemGutter="half"
       {...rest}
     >
       {children}
-    </div>
+    </Flex>
   );
 };