Issue 1:
[ X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When a INPUT or SELECT components are inside of GRID component, they should follow the layout established by the GRID component.

Current Behavior

Right now <INPUT and <SELECT are rendered without fill the space assigned by the GRID and they must be CSS styleshed 1 by 1. This is worst when the <INPUT has autocomplete because lot of CSS must be used for something that is expected: any component/html inside of a GRID item should use all the space assigned to it.

Steps to Reproduce (for bugs)

https://24zr5plwwy.codesandbox.io/

/* eslint-disable flowtype/require-valid-file-annotation */

import React, { Component } from 'react';
import withRoot from '../components/withRoot';
import Grid from 'material-ui/Grid';
import { InputLabel } from "material-ui/Input";
import { Input } from "material-ui";
import Checkbox from 'material-ui/Checkbox';

class Index extends Component {

render() {
const factor = {
"field_id": "1",
"editLabel": "This is an edit label"
}
return (
<div>
<p>current behavior: the input do not fill the space assigend by the grid</p>
<Grid container>
<Grid item xs={11}>
<div style={{ background: 'pink' }}>
<InputLabel style={{ background: 'yellow' }} htmlFor={factor.field_id}>{factor.editLabel}</InputLabel>
<Input style={{ background: 'cyan' }} id={factor.field_id} onChange={this.handleChange.bind(this)} type="number" />
</div>
</Grid>
<Grid item xs={1} style={{ background: 'orange' }}>
<Checkbox onChange={this.handleChange.bind(this)} style={{ background: 'cyan' }} />
</Grid>
</Grid>

<p>{"expected behavior: the input field (and selects) should fill all the space assigned to it by the <GRID item>"}</p>
<Grid container>
<Grid item xs={11}>
<div style={{ background: 'pink' }}>
<InputLabel style={{ display: 'block', background: 'yellow' }} htmlFor={factor.field_id}>{factor.editLabel}</InputLabel>
<Input style={{ display: 'block', background: 'cyan' }} id={factor.field_id} onChange={this.handleChange.bind(this)} type="number" />
</div>
</Grid>
<Grid item xs={1} style={{ background: 'orange' }}>
<Checkbox onChange={this.handleChange.bind(this)} style={{ background: 'cyan' }}/>
</Grid>
</Grid>
</div>
);
}

handleChange(event) {
alert(event.target.value);
}
}

export default withRoot(Index);

An example is in: https://codesandbox.io/s/24zr5plwwy

Context

I believe this is a problem because <INPUT and <SELECT are not following the space assignation rules of the <GRID component, making the <GRID component not so useful to build forms.

Your Environment

Tech
Version

Material-UI
1.0.13beta

React
last version 15.x and 16.0.0

browser
last chrome and firefox on apple and ubuntu

Issue 2:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I am expecting strong types for easier discovery through autocomplete when passing configurations to e.g <Grid>

<Grid container direction={GridDirection.Row}>

Current Behavior

Passing String as configurations to <Grid>

<Grid container direction={'row'}>

Context

From a developer UX point of view, discoverability is the key to making people comfortable and familiar with the large API. Thus offering a decent API is vital.

export enum GridDirection {
Row = 'row',
RowReverse = 'row-reverse',
Column = 'column',
Columnreverse = 'column-reverse'
}

Would make things more stronger typed and easier to get help from autocomplete when filling in values at call site.

Tech
Version

Material-UI
v1.0.0-beta.22