[Docs] migrate select-field to the new standard

docs/src/app/app-routes.jsx

@@ -43,7 +43,7 @@ import Paper from './components/pages/components/paper';
 import Popover from './components/pages/components/popover';
 import Progress from './components/pages/components/progress';
 import RefreshIndicator from './components/pages/components/refresh-indicator';
-import SelectFields from './components/pages/components/select-fields';
+import SelectField from './components/pages/components/SelectField/Page';
 import Sliders from './components/pages/components/sliders';
 import SnackbarPage from './components/pages/components/Snackbar/Page';
 import Switches from './components/pages/components/switches';
@@ -104,7 +104,7 @@ const AppRoutes = (
       <Route path="popover" component={Popover} />
       <Route path="progress" component={Progress} />
       <Route path="refresh-indicator" component={RefreshIndicator} />
-      <Route path="select-fields" component={SelectFields} />
+      <Route path="select-field" component={SelectField} />
       <Route path="sliders" component={Sliders} />
       <Route path="switches" component={Switches} />
       <Route path="snackbar" component={SnackbarPage} />

docs/src/app/components/pages/components.jsx

@@ -23,7 +23,7 @@ const menuItems = [
   {route: '/components/popover', text: 'Popover'},
   {route: '/components/progress', text: 'Progress'},
   {route: '/components/refresh-indicator', text: 'Refresh Indicator'},
-  {route: '/components/select-fields', text: 'Select Fields'},
+  {route: '/components/select-field', text: 'Select Field'},
   {route: '/components/sliders', text: 'Sliders'},
   {route: '/components/switches', text: 'Switches'},
   {route: '/components/snackbar', text: 'Snackbar'},

docs/src/app/components/pages/components/SelectField/ExampleCustomLabel.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import SelectField from 'material-ui/lib/SelectField';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+export default class SelectFieldExampleCustomLabel extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: 1};
+  }
+
+  handleChange = (event, index, value) => this.setState({value});
+
+  render() {
+    return (
+      <SelectField value={this.state.value} onChange={this.handleChange}>
+        <MenuItem value={1} label="5 am - 12 pm" primaryText="Morning"/>
+        <MenuItem value={2} label="12 pm - 5 pm" primaryText="Afternoon"/>
+        <MenuItem value={3} label="5 pm to 9 pm" primaryText="Evening"/>
+        <MenuItem value={4} label="9 pm to 4 am" primaryText="Night"/>
+      </SelectField>
+    );
+  }
+}

docs/src/app/components/pages/components/SelectField/ExampleDisabled.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import SelectField from 'material-ui/lib/SelectField';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+const SelectFieldExampleDisabled = () => (
+  <SelectField value={1} disabled={true}>
+    <MenuItem value={1} primaryText="Never"/>
+    <MenuItem value={2} primaryText="Every Night"/>
+  </SelectField>
+);
+
+export default SelectFieldExampleDisabled;

docs/src/app/components/pages/components/SelectField/ExampleError.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import SelectField from 'material-ui/lib/SelectField';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+const items = [
+  <MenuItem key={1} value={1} primaryText="Never"/>,
+  <MenuItem key={2} value={2} primaryText="Every Night"/>,
+  <MenuItem key={3} value={3} primaryText="Weeknights"/>,
+  <MenuItem key={4} value={4} primaryText="Weekends"/>,
+  <MenuItem key={5} value={5} primaryText="Weekly"/>,
+];
+
+export default class SelectFieldExampleError extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: null};
+  }
+
+  handleChange = (event, index, value) => this.setState({value});
+
+  render() {
+    const {value} = this.state;
+
+    const night = value === 2 || value === 3;
+
+    return (
+      <div>
+        <SelectField
+          value={value}
+          onChange={this.handleChange}
+          errorText={!night && 'Should be Night'}
+        >
+          {items}
+        </SelectField>
+        <br/>
+        <SelectField
+          value={value}
+          onChange={this.handleChange}
+          errorText={night && 'Should not be Night (Custom error style)'}
+          errorStyle={{color: 'orange'}}
+        >
+          {items}
+        </SelectField>
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/SelectField/ExampleFloatingLabel.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import SelectField from 'material-ui/lib/SelectField';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+const items = [
+  <MenuItem key={1} value={1} primaryText="Never"/>,
+  <MenuItem key={2} value={2} primaryText="Every Night"/>,
+  <MenuItem key={3} value={3} primaryText="Weeknights"/>,
+  <MenuItem key={4} value={4} primaryText="Weekends"/>,
+  <MenuItem key={5} value={5} primaryText="Weekly"/>,
+];
+
+export default class SelectFieldExampleFloatingLabel extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: null};
+  }
+
+  handleChange = (event, index, value) => this.setState({value});
+
+  render() {
+    return (
+      <div>
+        <SelectField
+          value={this.state.value}
+          onChange={this.handleChange}
+          floatingLabelText="Float Label Text"
+        >
+          {items}
+        </SelectField>
+        <br/>
+        <SelectField
+          value={this.state.value}
+          onChange={this.handleChange}
+          floatingLabelText="Custom Float Label Text"
+          floatingLabelStyle={{color: 'red'}}
+        >
+          {items}
+        </SelectField>
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/SelectField/ExampleSimple.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import SelectField from 'material-ui/lib/SelectField';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+export default class SelectFieldExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: 2};
+  }
+
+  handleChange = (event, index, value) => this.setState({value});
+
+  render() {
+    return (
+      <SelectField value={this.state.value} onChange={this.handleChange}>
+        <MenuItem value={1} primaryText="Never"/>
+        <MenuItem value={2} primaryText="Every Night"/>
+        <MenuItem value={3} primaryText="Weeknights"/>
+        <MenuItem value={4} primaryText="Weekends"/>
+        <MenuItem value={5} primaryText="Weekly"/>
+      </SelectField>
+    );
+  }
+}

docs/src/app/components/pages/components/SelectField/Page.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import selectFieldReadmeText from './README';
+import SelectFieldExampleSimple from './ExampleSimple';
+import selectFieldExampleSimpleCode from '!raw!./ExampleSimple';
+import SelectFieldExampleDisabled from './ExampleDisabled';
+import selectFieldExampleDisabledCode from '!raw!./ExampleDisabled';
+import SelectFieldExampleCustomLabel from './ExampleCustomLabel';
+import selectFieldExampleCustomLabelCode from '!raw!./ExampleCustomLabel';
+import SelectFieldExampleFloatingLabel from './ExampleFloatingLabel';
+import selectFieldExampleFloatingLabelCode from '!raw!./ExampleFloatingLabel';
+import SelectFieldExampleError from './ExampleError';
+import selectFieldExampleErrorCode from '!raw!./ExampleError';
+import selectFieldCode from '!raw!material-ui/lib/SelectField/SelectField';
+
+const SelectFieldPage = () => (
+  <div>
+    <MarkdownElement text={selectFieldReadmeText} />
+    <CodeExample code={selectFieldExampleSimpleCode}>
+      <SelectFieldExampleSimple />
+    </CodeExample>
+    <CodeExample code={selectFieldExampleDisabledCode}>
+      <SelectFieldExampleDisabled />
+    </CodeExample>
+    <CodeExample code={selectFieldExampleCustomLabelCode}>
+      <SelectFieldExampleCustomLabel />
+    </CodeExample>
+    <CodeExample code={selectFieldExampleFloatingLabelCode}>
+      <SelectFieldExampleFloatingLabel />
+    </CodeExample>
+    <CodeExample code={selectFieldExampleErrorCode}>
+      <SelectFieldExampleError />
+    </CodeExample>
+    <PropTypeDescription code={selectFieldCode}/>
+  </div>
+);
+
+export default SelectFieldPage;

docs/src/app/components/pages/components/SelectField/README.md

@@ -0,0 +1,6 @@
+## Select Field
+
+To learn more about `SelectField` please visit the specifications
+[here](https://www.google.com/design/spec/components/menus.html#menus-usage).
+
+### Examples