From 7e1eeaaccc526ffc2a5644ac16ef67c8d197aa58 Mon Sep 17 00:00:00 2001
From: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
Date: Thu, 20 Dec 2018 18:51:37 +0000
Subject: [PATCH] [TextField] Add Solo Field demo (#13945)

* Add Google Maps Inspired Input

* small changes :)
---
 .../demos/text-fields/CustomizedInputBase.js  | 57 +++++++++++++++++++
 .../pages/demos/text-fields/text-fields.md    |  4 ++
 pages/demos/text-fields.js                    |  7 +++
 3 files changed, 68 insertions(+)
 create mode 100644 docs/src/pages/demos/text-fields/CustomizedInputBase.js

diff --git a/docs/src/pages/demos/text-fields/CustomizedInputBase.js b/docs/src/pages/demos/text-fields/CustomizedInputBase.js
new file mode 100644
index 00000000000000..e2e27ee9470f60
--- /dev/null
+++ b/docs/src/pages/demos/text-fields/CustomizedInputBase.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import InputBase from '@material-ui/core/InputBase';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+import DirectionsIcon from '@material-ui/icons/Directions';
+
+const styles = {
+  root: {
+    padding: '2px 4px',
+    display: 'flex',
+    alignItems: 'center',
+    width: 400,
+  },
+  input: {
+    marginLeft: 8,
+    flex: 1,
+  },
+  iconButton: {
+    padding: 10,
+  },
+  divider: {
+    width: 1,
+    height: 28,
+    margin: 4,
+  },
+};
+
+function CustomizedInputBase(props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.root} elevation={1}>
+      <IconButton className={classes.iconButton} aria-label="Menu">
+        <MenuIcon />
+      </IconButton>
+      <InputBase className={classes.input} placeholder="Search Google Maps" />
+      <IconButton className={classes.iconButton} aria-label="Search">
+        <SearchIcon />
+      </IconButton>
+      <Divider className={classes.divider} />
+      <IconButton color="primary" className={classes.iconButton} aria-label="Directions">
+        <DirectionsIcon />
+      </IconButton>
+    </Paper>
+  );
+}
+
+CustomizedInputBase.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomizedInputBase);
diff --git a/docs/src/pages/demos/text-fields/text-fields.md b/docs/src/pages/demos/text-fields/text-fields.md
index 0364aa92575ff2..d5fc4efd67347c 100644
--- a/docs/src/pages/demos/text-fields/text-fields.md
+++ b/docs/src/pages/demos/text-fields/text-fields.md
@@ -57,6 +57,10 @@ but you are not confident jumping in, here's an example of how you can change th
 
 {{"demo": "pages/demos/text-fields/CustomizedInputs.js"}}
 
+Customization does not stop at CSS, you can use composition to build custom components and give your app a unique feel. It's demonstrating a use case for the [`InputBase`](/api/input-base/) component inspired by Google Maps.
+
+{{"demo": "pages/demos/text-fields/CustomizedInputBase.js"}}
+
 ## Input Adornments
 
 `Input` allows the provision of `InputAdornment`.
diff --git a/pages/demos/text-fields.js b/pages/demos/text-fields.js
index cf037cb3e98e6e..03f89dafcc8aa2 100644
--- a/pages/demos/text-fields.js
+++ b/pages/demos/text-fields.js
@@ -85,6 +85,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/text-fields/CustomizedInputs'), 'utf8')
+`,
+        },
+        'pages/demos/text-fields/CustomizedInputBase.js': {
+          js: require('docs/src/pages/demos/text-fields/CustomizedInputBase').default,
+          raw: preval`
+module.exports = require('fs').readFileSync(
+  require.resolve('docs/src/pages/demos/text-fields/CustomizedInputBase'), 'utf8')
 `,
         },
         'pages/demos/text-fields/InputWithIcon.js': {