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

src/docs/forms.mdx

@@ -14,29 +14,29 @@ import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Fl
 
 ## Simple Form
 <Playground>
-  <Flex itemGutter direction="column">
+  <Flex itemGutter="double" direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
 
     <FormField>
       <InputLabel>Email Address</InputLabel>
-      <TextField/>
+      <TextField fullWidth />
     </FormField>
 
     <FormField>
       <InputLabel>Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
-      <TextField/>
+      <TextField fullWidth />
     </FormField>
 
     <FormField>
       <InputLabel>Password</InputLabel>
       <InputDescription>Must be at least 8 characters</InputDescription>
-      <TextField/>
+      <TextField fullWidth />
     </FormField>
 
     <FormField>
       <InputLabel>Confirm Password</InputLabel>
-      <TextField/>
+      <TextField fullWidth />
     </FormField>
 
     <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
@@ -46,31 +46,31 @@ import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Fl
 ## Simple Form with error
 
 <Playground>
-  <Flex itemGutter direction="column">
+  <Flex itemGutter="double" direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
 
     <FormField>
       <InputLabel>Email Address</InputLabel>
-      <TextField/>
+      <TextField fullWidth />
     </FormField>
 
     <FormField>
       <InputLabel defaultValue="something.com">Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
-      <TextField/>
-      <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
+      <TextField fullWidth/>
+      <ValidationMessage fullWidth>Invalid characters. Try again.</ValidationMessage>
     </FormField>
 
 
     <FormField>
       <InputLabel>Password</InputLabel>
       <InputDescription>Must be at least 8 characters</InputDescription>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
     <FormField>
       <InputLabel>Confirm Password</InputLabel>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
     <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
@@ -80,30 +80,30 @@ import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Fl
 ## Simple Form with CallOut
 
 <Playground>
-  <Flex itemGutter direction="column">
+  <Flex itemGutter="double" direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
     <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
     <FormField>
       <InputLabel>Email Address</InputLabel>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
     <FormField>
       <InputLabel defaultValue="something.com">Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
 
     <FormField>
       <InputLabel>Password</InputLabel>
       <InputDescription>Must be at least 8 characters</InputDescription>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
     <FormField>
       <InputLabel>Confirm Password</InputLabel>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
     <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>