From 5f2331ab2c8ead8b0a84d54d820f7bf94e552c70 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 27 Oct 2017 23:11:48 +0200
Subject: [PATCH] [docs] Show how to change the color of the TextField (#8880)

---
 .../demos/text-fields/CustomizedInputs.js     | 95 +++++++++++++++++++
 .../pages/demos/text-fields/text-fields.md    |  9 ++
 pages/api/select.md                           |  2 +-
 pages/demos/text-fields.js                    |  7 ++
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/demos/text-fields/CustomizedInputs.js

diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.js b/docs/src/pages/demos/text-fields/CustomizedInputs.js
new file mode 100644
index 00000000000000..d24bcebb9dd56f
--- /dev/null
+++ b/docs/src/pages/demos/text-fields/CustomizedInputs.js
@@ -0,0 +1,95 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Input, { InputLabel } from 'material-ui/Input';
+import TextField from 'material-ui/TextField';
+import { FormControl } from 'material-ui/Form';
+import purple from 'material-ui/colors/purple';
+
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  formControl: {
+    margin: theme.spacing.unit,
+  },
+  inputLabelFocused: {
+    color: purple[500],
+  },
+  inputInkbar: {
+    '&:after': {
+      backgroundColor: purple[500],
+    },
+  },
+  textFieldRoot: {
+    padding: 0,
+    'label + &': {
+      marginTop: theme.spacing.unit * 3,
+    },
+  },
+  textFieldInput: {
+    borderRadius: 4,
+    background: theme.palette.common.white,
+    border: '1px solid #ced4da',
+    fontSize: 16,
+    padding: '10px 12px',
+    width: 'calc(100% - 24px)',
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    '&:focus': {
+      borderColor: '#80bdff',
+      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+    },
+  },
+  textFieldFormLabel: {
+    fontSize: 18,
+  },
+});
+
+function CustomizedInputs(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.container}>
+      <FormControl className={classes.formControl}>
+        <InputLabel
+          FormControlClasses={{
+            focused: classes.inputLabelFocused,
+          }}
+          htmlFor="custom-color-input"
+        >
+          Name
+        </InputLabel>
+        <Input
+          classes={{
+            inkbar: classes.inputInkbar,
+          }}
+          id="custom-color-input"
+        />
+      </FormControl>
+      <TextField
+        defaultValue="react-bootstrap"
+        label="Bootstrap"
+        InputProps={{
+          disableUnderline: true,
+          classes: {
+            root: classes.textFieldRoot,
+            input: classes.textFieldInput,
+          },
+        }}
+        InputLabelProps={{
+          shrink: true,
+          className: classes.textFieldFormLabel,
+        }}
+      />
+    </div>
+  );
+}
+
+CustomizedInputs.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomizedInputs);
diff --git a/docs/src/pages/demos/text-fields/text-fields.md b/docs/src/pages/demos/text-fields/text-fields.md
index 63f069d6176929..d5d0ad52aa3e78 100644
--- a/docs/src/pages/demos/text-fields/text-fields.md
+++ b/docs/src/pages/demos/text-fields/text-fields.md
@@ -48,3 +48,12 @@ We demonstrate how you could be using third-party libraries to [format your inpu
 Here, we are using [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries.
 
 {{demo='pages/demos/text-fields/FormattedInputs.js'}}
+
+## Customized inputs
+
+You have been reading our [overrides documentation page](/customization/overrides)
+but you are not confident jumping in?
+Here is an example of how you can change the main color of an input from "primary" to purple.
+There is no limit.
+
+{{demo='pages/demos/text-fields/CustomizedInputs.js'}}
diff --git a/pages/api/select.md b/pages/api/select.md
index c410d6537f46d2..8f6f77ae41e6a2 100644
--- a/pages/api/select.md
+++ b/pages/api/select.md
@@ -21,7 +21,7 @@ filename: /src/Select/Select.js
 | multiple | boolean | false | If true, `value` must be an array and the menu will support multiple selections. You can only use it when the `native` property is `false` (default). |
 | native | boolean | false | If `true`, the component will be using a native `select` element. |
 | renderValue | Function |  | Render the selected value. You can only use it when the `native` property is `false` (default). |
-| value | union:&nbsp;Array<string<br>&nbsp;number><br>&nbsp;string<br>&nbsp;number<br> |  | The input value, required for a controlled component. |
+| value | union:&nbsp;$ReadOnlyArray<string<br>&nbsp;number><br>&nbsp;string<br>&nbsp;number<br> |  | The input value, required for a controlled component. |
 
 Any other properties supplied will be [spread to the root element](/customization/api#spread).
 
diff --git a/pages/demos/text-fields.js b/pages/demos/text-fields.js
index 222f77f15505d6..e829e687358d7a 100644
--- a/pages/demos/text-fields.js
+++ b/pages/demos/text-fields.js
@@ -50,6 +50,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/text-fields/FormattedInputs'), 'utf8')
+`,
+        },
+        'pages/demos/text-fields/CustomizedInputs.js': {
+          js: require('docs/src/pages/demos/text-fields/CustomizedInputs').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/text-fields/CustomizedInputs'), 'utf8')
 `,
         },
       }}