From c5579c6779ebd28a8f411390ba9c3f3536c6ba0d Mon Sep 17 00:00:00 2001
From: DheenodaraRao <dheenodararao@gmail.com>
Date: Fri, 27 Jul 2018 09:34:24 +0800
Subject: [PATCH 1/3] Added placeholder for search bar

---
 docs/src/modules/components/AppSearch.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 778adc7f78caea..22ef8035bb7bcd 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -180,7 +180,8 @@ class AppSearch extends React.Component {
           <SearchIcon />
         </div>
         <input
-          id="docsearch-input"
+        placeholder={'Search here'}
+          id="docsear'ch-input"
           ref={ref => {
             this.inputRef = ref;
           }}

From 14f2926a5cdf077cda5c4f7f365ddccbf86fd65f Mon Sep 17 00:00:00 2001
From: DheenodaraRao <dheenodararao@gmail.com>
Date: Fri, 27 Jul 2018 15:41:13 +0800
Subject: [PATCH 2/3] Added placeholder for search bar

---
 docs/src/modules/components/AppSearch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 22ef8035bb7bcd..3097f5de5927e6 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -180,7 +180,7 @@ class AppSearch extends React.Component {
           <SearchIcon />
         </div>
         <input
-        placeholder={'Search here'}
+          placeholder={'Search here'}
           id="docsear'ch-input"
           ref={ref => {
             this.inputRef = ref;

From 9213bd968ecd0e82b564f80cb1d2469396cdb134 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 27 Jul 2018 13:26:08 +0200
Subject: [PATCH 3/3] fix placeholder color

---
 .size-limit.js                           |  2 +-
 docs/src/modules/components/AppSearch.js | 38 +++++++++++-------------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/.size-limit.js b/.size-limit.js
index b55df1ec040fa6..f935bed921952c 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -33,7 +33,7 @@ module.exports = [
     name: 'The main bundle of the docs',
     webpack: false,
     path: getMainFile().path,
-    limit: '176 KB',
+    limit: '179 KB',
   },
   {
     name: 'The home page of the docs',
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 3097f5de5927e6..04ba13f7251658 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -6,6 +6,7 @@ import EventListener from 'react-event-listener';
 import PropTypes from 'prop-types';
 import Router from 'next/router';
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
+import Input from '@material-ui/core/Input';
 import SearchIcon from '@material-ui/icons/Search';
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';
@@ -117,11 +118,11 @@ const styles = theme => ({
     '&:hover': {
       background: fade(theme.palette.common.white, 0.25),
     },
-    '& $input': {
+    '& $inputInput': {
       transition: theme.transitions.create('width'),
-      width: 200,
+      width: 120,
       '&:focus': {
-        width: 250,
+        width: 170,
       },
     },
   },
@@ -134,21 +135,12 @@ const styles = theme => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  input: {
-    font: 'inherit',
+  inputRoot: {
+    color: 'inherit',
+  },
+  inputInput: {
     padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
       .spacing.unit * 9}px`,
-    border: 0,
-    display: 'block',
-    verticalAlign: 'middle',
-    whiteSpace: 'normal',
-    background: 'none',
-    margin: 0, // Reset for Safari
-    color: 'inherit',
-    width: '100%',
-    '&:focus': {
-      outline: 0,
-    },
   },
 });
 
@@ -179,13 +171,17 @@ class AppSearch extends React.Component {
         <div className={classes.search}>
           <SearchIcon />
         </div>
-        <input
-          placeholder={'Search here'}
-          id="docsear'ch-input"
-          ref={ref => {
+        <Input
+          disableUnderline
+          placeholder="Search…"
+          id="docsearch-input"
+          inputRef={ref => {
             this.inputRef = ref;
           }}
-          className={classes.input}
+          classes={{
+            root: classes.inputRoot,
+            input: classes.inputInput,
+          }}
         />
       </div>
     );