[docs] Add placeholder for search bar (#12296)

* Added placeholder for search bar * Added placeholder for search bar * fix placeholder color
mui · Jul 27, 2018 · 2ce95c0 · 2ce95c0
1 parent d5bab6c
commit 2ce95c0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 20 deletions.
diff --git 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
@@ -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,12 +171,17 @@ class AppSearch extends React.Component {
         <div className={classes.search}>
           <SearchIcon />
         </div>
-        <input
+        <Input
+          disableUnderline
+          placeholder="Search…"
           id="docsearch-input"
-          ref={ref => {
+          inputRef={ref => {
             this.inputRef = ref;
           }}
-          className={classes.input}
+          classes={{
+            root: classes.inputRoot,
+            input: classes.inputInput,
+          }}
         />
       </div>
     );