[TextField] Add Solo Field demo (#13945)

* Add Google Maps Inspired Input

* small changes :)

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);

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`.

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': {