review

docs/pages/api/filled-input.md

@@ -2,7 +2,6 @@
 filename: /packages/material-ui/src/FilledInput/FilledInput.js
 ---
 
-
 <!--- This documentation is automatically generated, do not try to edit it. -->
 
 # FilledInput API
@@ -29,6 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be focused during the first mount. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">className</span> | <span class="prop-type">string</span> |  | The CSS class name of the wrapper element. |
+| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> |  | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">any</span> |  | The default `input` element value. Use when the component is not controlled. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be disabled. |
 | <span class="prop-name">disableUnderline</span> | <span class="prop-type">bool</span> |  | If `true`, the input will not have an underline. |
@@ -64,6 +64,7 @@ Any other props supplied will be provided to the root element ([InputBase](/api/
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiFilledInput-root</span> | Styles applied to the root element.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiFilledInput-colorSecondary</span> | Styles applied to the root element if color secondary.
 | <span class="prop-name">underline</span> | <span class="prop-name">.MuiFilledInput-underline</span> | Styles applied to the root element if `disableUnderline={false}`.
 | <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root element if the component is focused.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.

docs/pages/api/form-control.md

@@ -46,6 +46,7 @@ You can find one composition example below and more going to [the demos](/compon
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The contents of the form control. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the label, input and helper text should be displayed in a disabled state. |
 | <span class="prop-name">error</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the label should be displayed in an error state. |

docs/pages/api/form-label.md

@@ -26,6 +26,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> |  | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'label'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the label should be displayed in a disabled state. |
 | <span class="prop-name">error</span> | <span class="prop-type">bool</span> |  | If `true`, the label should be displayed in an error state. |
@@ -45,6 +46,7 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiFormLabel-root</span> | Styles applied to the root element.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiFormLabel-colorSecondary</span> | Styles applied to the root element if the color is secondary.
 | <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Pseudo-class applied to the root element if `focused={true}`.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
 | <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Pseudo-class applied to the root element if `error={true}`.

docs/pages/api/input-base.md

@@ -30,6 +30,7 @@ It contains a load of style reset and some state logic.
 | <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be focused during the first mount. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">className</span> | <span class="prop-type">string</span> |  | The CSS class name of the wrapper element. |
+| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> |  | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">any</span> |  | The default `input` element value. Use when the component is not controlled. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be disabled. |
 | <span class="prop-name">endAdornment</span> | <span class="prop-type">node</span> |  | End `InputAdornment` for this component. |
@@ -73,6 +74,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Styles applied to the root element if `error={true}`.
 | <span class="prop-name">marginDense</span> | <span class="prop-name">.MuiInputBase-marginDense</span> | Styles applied to the `input` element if `margin="dense"`.
 | <span class="prop-name">multiline</span> | <span class="prop-name">.MuiInputBase-multiline</span> | Styles applied to the root element if `multiline={true}`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiInputBase-colorSecondary</span> | Styles applied to the root element if the color is secondary.
 | <span class="prop-name">fullWidth</span> | <span class="prop-name">.MuiInputBase-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
 | <span class="prop-name">input</span> | <span class="prop-name">.MuiInputBase-input</span> | Styles applied to the `input` element.
 | <span class="prop-name">inputMarginDense</span> | <span class="prop-name">.MuiInputBase-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.

docs/pages/api/input-label.md

@@ -26,6 +26,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The contents of the `InputLabel`. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> |  | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">disableAnimation</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the transition animation is disabled. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, apply disabled class. |
 | <span class="prop-name">error</span> | <span class="prop-type">bool</span> |  | If `true`, the label will be displayed in an error state. |

docs/pages/api/input.md

@@ -28,6 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be focused during the first mount. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">className</span> | <span class="prop-type">string</span> |  | The CSS class name of the wrapper element. |
+| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> |  | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">any</span> |  | The default `input` element value. Use when the component is not controlled. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be disabled. |
 | <span class="prop-name">disableUnderline</span> | <span class="prop-type">bool</span> |  | If `true`, the input will not have an underline. |
@@ -66,6 +67,7 @@ Any other props supplied will be provided to the root element ([InputBase](/api/
 | <span class="prop-name">formControl</span> | <span class="prop-name">.MuiInput-formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
 | <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root element if the component is focused.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiInput-colorSecondary</span> | Styles applied to the root element if color secondary.
 | <span class="prop-name">underline</span> | <span class="prop-name">.MuiInput-underline</span> | Styles applied to the root element if `disableUnderline={false}`.
 | <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Styles applied to the root element if `error={true}`.
 | <span class="prop-name">multiline</span> | <span class="prop-name">.MuiInput-multiline</span> | Styles applied to the root element if `multiline={true}`.

docs/pages/api/outlined-input.md

@@ -28,6 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be focused during the first mount. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">className</span> | <span class="prop-type">string</span> |  | The CSS class name of the wrapper element. |
+| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> |  | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">any</span> |  | The default `input` element value. Use when the component is not controlled. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be disabled. |
 | <span class="prop-name">endAdornment</span> | <span class="prop-type">node</span> |  | End `InputAdornment` for this component. |
@@ -64,6 +65,7 @@ Any other props supplied will be provided to the root element ([InputBase](/api/
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiOutlinedInput-root</span> | Styles applied to the root element.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiOutlinedInput-colorSecondary</span> | Styles applied to the root element if the color is secondary.
 | <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root element if the component is focused.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
 | <span class="prop-name">adornedStart</span> | <span class="prop-name">.MuiOutlinedInput-adornedStart</span> | Styles applied to the root element if `startAdornment` is provided.

docs/pages/api/text-field.md

@@ -56,6 +56,7 @@ For advanced cases, please look at the source of TextField by clicking on the
 | <span class="prop-name">autoComplete</span> | <span class="prop-type">string</span> |  | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). |
 | <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be focused during the first mount. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">any</span> |  | The default value of the `input` element. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be disabled. |
 | <span class="prop-name">error</span> | <span class="prop-type">bool</span> |  | If `true`, the label will be displayed in an error state. |

docs/src/pages/components/text-fields/ColorsTextField.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+      width: 200,
+    },
+  },
+}));
+
+export default function ColorsTextField() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <TextField id="color-primary-standard" label="Color primary" />
+      <TextField id="color-secondary-standard" label="Color secondary" color="secondary" />
+      <br />
+      <TextField id="color-primary-outlined" label="Color primary" variant="outlined" />
+      <TextField
+        id="color-secondary-outlined"
+        label="Color secondary"
+        variant="outlined"
+        color="secondary"
+      />
+      <br />
+      <TextField id="color-primary-filled" label="Color primary" variant="filled" />
+      <TextField
+        id="color-secondary-filled"
+        label="Color secondary"
+        variant="filled"
+        color="secondary"
+      />
+    </div>
+  );
+}

docs/src/pages/components/text-fields/ColorsTextField.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+      width: 200,
+    },
+  },
+}));
+
+export default function ColorsTextField() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <TextField id="color-primary-standard" label="Color primary" />
+      <TextField id="color-secondary-standard" label="Color secondary" color="secondary" />
+      <br />
+      <TextField id="color-primary-outlined" label="Color primary" variant="outlined" />
+      <TextField
+        id="color-secondary-outlined"
+        label="Color secondary"
+        variant="outlined"
+        color="secondary"
+      />
+      <br />
+      <TextField id="color-primary-filled" label="Color primary" variant="filled" />
+      <TextField
+        id="color-secondary-filled"
+        label="Color secondary"
+        variant="filled"
+        color="secondary"
+      />
+    </div>
+  );
+}

docs/src/pages/components/text-fields/FilledTextFields.js

@@ -64,14 +64,6 @@ export default function FilledTextFields() {
         margin="normal"
         variant="filled"
       />
-      <TextField
-        id="filled-secondary"
-        label="Secondary color"
-        className={classes.textField}
-        margin="normal"
-        color="secondary"
-        variant="filled"
-      />
       <TextField
         id="filled-uncontrolled"
         label="Uncontrolled"

docs/src/pages/components/text-fields/FilledTextFields.tsx

@@ -73,14 +73,6 @@ export default function FilledTextFields() {
         margin="normal"
         variant="filled"
       />
-      <TextField
-        id="filled-secondary"
-        label="Secondary color"
-        className={classes.textField}
-        margin="normal"
-        color="secondary"
-        variant="filled"
-      />
       <TextField
         id="filled-uncontrolled"
         label="Uncontrolled"

docs/src/pages/components/text-fields/OutlinedTextFields.js

@@ -64,14 +64,6 @@ export default function OutlinedTextFields() {
         margin="normal"
         variant="outlined"
       />
-      <TextField
-        id="outlined-secondary"
-        label="Secondary color"
-        className={classes.textField}
-        margin="normal"
-        color="secondary"
-        variant="outlined"
-      />
       <TextField
         id="outlined-uncontrolled"
         label="Uncontrolled"

docs/src/pages/components/text-fields/OutlinedTextFields.tsx

@@ -73,14 +73,6 @@ export default function OutlinedTextFields() {
         margin="normal"
         variant="outlined"
       />
-      <TextField
-        id="outlined-secondary"
-        label="Secondary color"
-        className={classes.textField}
-        margin="normal"
-        color="secondary"
-        variant="outlined"
-      />
       <TextField
         id="outlined-uncontrolled"
         label="Uncontrolled"

docs/src/pages/components/text-fields/TextFields.js

@@ -64,13 +64,6 @@ export default function TextFields() {
         onChange={handleChange('name')}
         margin="normal"
       />
-      <TextField
-        id="standard-secondary"
-        label="Secondary color"
-        className={classes.textField}
-        margin="normal"
-        color="secondary"
-      />
       <TextField
         id="standard-uncontrolled"
         label="Uncontrolled"

docs/src/pages/components/text-fields/TextFields.tsx

@@ -73,13 +73,6 @@ export default function TextFields() {
         onChange={handleChange('name')}
         margin="normal"
       />
-      <TextField
-        id="standard-secondary"
-        label="Secondary color"
-        className={classes.textField}
-        margin="normal"
-        color="secondary"
-      />
       <TextField
         id="standard-uncontrolled"
         label="Uncontrolled"