[TextField] Make it meet guidelines

docs/src/pages/component-demos/text-fields/ComposedTextField.js

@@ -13,7 +13,8 @@ const styleSheet = createStyleSheet('ComposedTextField', () => ({
     flexWrap: 'wrap',
   },
   input: {
-    margin: 10,
+    marginLeft: 10,
+    marginRight: 10,
   },
 }));
 

src/Form/FormControl.js

@@ -11,6 +11,8 @@ export const styleSheet = createStyleSheet('MuiFormControl', () => {
     root: {
       display: 'flex',
       flexDirection: 'column',
+      marginBottom: 8,
+      marginTop: 16,
       position: 'relative',
     },
     row: {
@@ -55,10 +57,19 @@ export default class FormControl extends Component {
     muiFormControl: PropTypes.object.isRequired,
   };
 
-  state = {
-    dirty: false,
-    focused: false,
-  };
+  constructor(props, context) {
+    super(props, context);
+
+    const dirty = props.children.some((child) => {
+      return child.type && child.type.name === 'Input' &&
+        child.props.value && child.props.value.length > 0;
+    });
+
+    this.state = {
+      dirty,
+      focused: false,
+    };
+  }
 
   getChildContext() {
     const { error, required } = this.props;

src/Input/Input.js

@@ -16,11 +16,13 @@ export const styleSheet = createStyleSheet('MuiInput', (theme) => {
     wrapper: {
       // Mimics the default input display property used by browsers for an input.
       display: 'inline-block',
+      marginBottom: 8,
+      marginTop: 8,
       position: 'relative',
     },
     formControl: {
-      marginTop: 10,
-      marginBottom: 10,
+      marginBottom: 0,
+      marginTop: 16,
     },
     inkbar: {
       '&:after': {

src/Input/InputLabel.js

@@ -17,10 +17,10 @@ export const styleSheet = createStyleSheet('MuiInputLabel', (theme) => {
       position: 'absolute',
       left: 0,
       top: 0,
-      transform: 'translate(0, 18px) scale(1)',
+      transform: 'translate(0, 24px) scale(1)',
     },
     shrink: {
-      transform: 'translate(0, 0px) scale(0.75)',
+      transform: 'translate(0, 0) scale(0.75)',
       transformOrigin: 'top left',
     },
     animated: {