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> | <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 `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-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> | <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 `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> | <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 `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 `color="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/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.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"

packages/material-ui/src/FilledInput/FilledInput.d.ts

@@ -3,11 +3,10 @@ import { StandardProps } from '..';
 import { InputBaseProps, InputBaseClassKey } from '../InputBase';
 
 export interface FilledInputProps extends StandardProps<InputBaseProps, FilledInputClassKey> {
-  color?: 'primary' | 'secondary';
   disableUnderline?: boolean;
 }
 
-export type FilledInputClassKey = InputBaseClassKey | 'underline' | 'underlineColorSecondary';
+export type FilledInputClassKey = InputBaseClassKey | 'colorSecondary' | 'underline';
 
 declare const FilledInput: React.ComponentType<FilledInputProps>;
 

packages/material-ui/src/FilledInput/FilledInput.js

@@ -35,10 +35,16 @@ export const styles = theme => {
         backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
       },
     },
+    /* Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: {
+      '&$underline:after': {
+        borderBottomColor: theme.palette.secondary.main,
+      },
+    },
     /* Styles applied to the root element if `disableUnderline={false}`. */
     underline: {
       '&:after': {
-        borderBottom: `2px solid ${theme.palette.primary[light ? 'dark' : 'light']}`,
+        borderBottom: `2px solid ${theme.palette.primary.main}`,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
@@ -79,12 +85,6 @@ export const styles = theme => {
         borderBottomStyle: 'dotted',
       },
     },
-    /* Styles applied to the root element `disableUnderline={false}` and `color="secondary"`. */
-    underlineColorSecondary: {
-      '&:after': {
-        borderBottomColor: theme.palette.secondary[light ? 'dark' : 'light'],
-      },
-    },
     /* Styles applied to the root element if the component is focused. */
     focused: {},
     /* Styles applied to the root element if `disabled={true}`. */
@@ -156,7 +156,6 @@ const FilledInput = React.forwardRef(function FilledInput(props, ref) {
   const {
     disableUnderline,
     classes,
-    color = 'primary',
     fullWidth = false,
     inputComponent = 'input',
     multiline = false,
@@ -170,10 +169,8 @@ const FilledInput = React.forwardRef(function FilledInput(props, ref) {
         ...classes,
         root: clsx(classes.root, {
           [classes.underline]: !disableUnderline,
-          [classes.underlineColorSecondary]: !disableUnderline && color === 'secondary',
         }),
         underline: null,
-        underlineColorSecondary: null,
       }}
       fullWidth={fullWidth}
       inputComponent={inputComponent}

packages/material-ui/src/FilledInput/FilledInput.test.js

@@ -36,10 +36,4 @@ describe('<FilledInput />', () => {
     const root = container.firstChild;
     expect(root).not.to.have.class(classes.underline);
   });
-
-  it('can set the color to be secondary', () => {
-    const { container } = render(<FilledInput color="secondary" />);
-    const root = container.firstChild;
-    expect(root).to.have.class(classes.underlineColorSecondary);
-  });
 });

packages/material-ui/src/FormLabel/FormLabel.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
+import capitalize from '../utils/capitalize';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
@@ -13,7 +14,7 @@ export const styles = theme => ({
     lineHeight: 1,
     padding: 0,
     '&$focused': {
-      color: theme.palette.primary[theme.palette.type === 'light' ? 'dark' : 'light'],
+      color: theme.palette.primary.main,
     },
     '&$disabled': {
       color: theme.palette.text.disabled,
@@ -25,7 +26,7 @@ export const styles = theme => ({
   /* Styles applied to the root element if the color is secondary. */
   colorSecondary: {
     '&$focused': {
-      color: theme.palette.secondary[theme.palette.type === 'light' ? 'dark' : 'light'],
+      color: theme.palette.secondary.main,
     },
   },
   /* Pseudo-class applied to the root element if `focused={true}`. */
@@ -51,6 +52,7 @@ const FormLabel = React.forwardRef(function FormLabel(props, ref) {
     children,
     classes,
     className: classNameProp,
+    color,
     component: Component = 'label',
     disabled,
     error,
@@ -71,8 +73,8 @@ const FormLabel = React.forwardRef(function FormLabel(props, ref) {
     <Component
       className={clsx(
         classes.root,
+        classes[`color${capitalize(fcs.color || 'primary')}`],
         {
-          [classes.colorSecondary]: fcs.color === 'secondary',
           [classes.disabled]: fcs.disabled,
           [classes.error]: fcs.error,
           [classes.filled]: fcs.filled,