fix(search): input base styles

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx

@@ -16,7 +16,7 @@
 
 import React, { ComponentType } from 'react';
 
-import { Grid, makeStyles, Paper } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import LabelIcon from '@material-ui/icons/Label';
 
 import { TestApiProvider } from '@backstage/test-utils';
@@ -45,51 +45,24 @@ export default {
   ],
 };
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    padding: theme.spacing(1),
-  },
-}));
-
 export const Default = () => {
-  const classes = useStyles();
-  return (
-    <Paper className={classes.root}>
-      <SearchAutocomplete options={['hello-word', 'petstore', 'spotify']} />
-    </Paper>
-  );
+  return <SearchAutocomplete options={['hello-word', 'petstore', 'spotify']} />;
 };
 
 export const Outlined = () => {
-  const classes = useStyles();
-  return (
-    <Paper className={classes.root} variant="outlined">
-      <SearchAutocomplete options={['hello-word', 'petstore', 'spotify']} />
-    </Paper>
-  );
+  return <SearchAutocomplete options={['hello-word', 'petstore', 'spotify']} />;
 };
 
 export const Initialized = () => {
-  const classes = useStyles();
   const options = ['hello-word', 'petstore', 'spotify'];
-  return (
-    <Paper className={classes.root}>
-      <SearchAutocomplete options={options} value={options[0]} />
-    </Paper>
-  );
+  return <SearchAutocomplete options={options} value={options[0]} />;
 };
 
 export const LoadingOptions = () => {
-  const classes = useStyles();
-  return (
-    <Paper className={classes.root}>
-      <SearchAutocomplete options={[]} loading />
-    </Paper>
-  );
+  return <SearchAutocomplete options={[]} loading />;
 };
 
 export const RenderingCustomOptions = () => {
-  const classes = useStyles();
   const options = [
     {
       title: 'hello-world',
@@ -106,17 +79,15 @@ export const RenderingCustomOptions = () => {
   ];
 
   return (
-    <Paper className={classes.root}>
-      <SearchAutocomplete
-        options={options}
-        renderOption={option => (
-          <SearchAutocompleteDefaultOption
-            icon={<LabelIcon titleAccess="Option icon" />}
-            primaryText={option.title}
-            secondaryText={option.text}
-          />
-        )}
-      />
-    </Paper>
+    <SearchAutocomplete
+      options={options}
+      renderOption={option => (
+        <SearchAutocompleteDefaultOption
+          icon={<LabelIcon titleAccess="Option icon" />}
+          primaryText={option.title}
+          secondaryText={option.text}
+        />
+      )}
+    />
   );
 };

plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -16,7 +16,7 @@
 
 import React, { ChangeEvent, useCallback, useMemo } from 'react';
 
-import { CircularProgress } from '@material-ui/core';
+import { CircularProgress, makeStyles } from '@material-ui/core';
 import {
   Autocomplete,
   AutocompleteProps,
@@ -28,6 +28,13 @@ import {
 import { SearchContextProvider, useSearch } from '../../context';
 import { SearchBar, SearchBarProps } from '../SearchBar';
 
+const useStyles = makeStyles(theme => ({
+  loading: {
+    right: theme.spacing(1),
+    position: 'absolute',
+  },
+}));
+
 /**
  * Props for {@link SearchAutocomplete}.
  *
@@ -61,6 +68,18 @@ const withContext = (
   );
 };
 
+const SearchAutocompleteLoadingAdornment = () => {
+  const classes = useStyles();
+  return (
+    <CircularProgress
+      className={classes.loading}
+      data-testid="search-autocomplete-progressbar"
+      color="inherit"
+      size={20}
+    />
+  );
+};
+
 /**
  * Recommended search autocomplete when you use the Search Provider or Search Context.
  *
@@ -116,7 +135,7 @@ export const SearchAutocomplete = withContext(
 
     const renderInput = useCallback(
       ({
-        InputProps: { ref, endAdornment },
+        InputProps: { ref, className, endAdornment },
         InputLabelProps,
         ...params
       }: AutocompleteRenderInputParams) => (
@@ -128,16 +147,9 @@ export const SearchAutocomplete = withContext(
           placeholder={inputPlaceholder}
           debounceTime={inputDebounceTime}
           endAdornment={
-            loading ? (
-              <CircularProgress
-                data-testid="search-autocomplete-progressbar"
-                color="inherit"
-                size={20}
-              />
-            ) : (
-              endAdornment
-            )
+            loading ? <SearchAutocompleteLoadingAdornment /> : endAdornment
           }
+          InputProps={{ className }}
         />
       ),
       [loading, inputValue, inputPlaceholder, inputDebounceTime],

plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentType } from 'react';
-import { Grid, makeStyles, Paper } from '@material-ui/core';
+import { Grid, makeStyles } from '@material-ui/core';
 
 import { TestApiProvider } from '@backstage/test-utils';
 
@@ -43,67 +43,51 @@ export default {
 };
 
 export const Default = () => {
-  return (
-    <Paper style={{ padding: '8px' }}>
-      <SearchBar />
-    </Paper>
-  );
+  return <SearchBar />;
 };
 
 export const CustomPlaceholder = () => {
-  return (
-    <Paper style={{ padding: '8px' }}>
-      <SearchBar placeholder="This is a custom placeholder" />
-    </Paper>
-  );
+  return <SearchBar placeholder="This is a custom placeholder" />;
 };
 
 export const CustomLabel = () => {
-  return (
-    <Paper style={{ padding: '8px' }}>
-      <SearchBar label="This is a custom label" />
-    </Paper>
-  );
+  return <SearchBar label="This is a custom label" />;
 };
 
 export const Focused = () => {
   return (
-    <Paper style={{ padding: '8px' }}>
-      {/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */}
-      {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
-      <SearchBar autoFocus />
-    </Paper>
+    // decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    <SearchBar autoFocus />
   );
 };
 
 export const WithoutClearButton = () => {
-  return (
-    <Paper style={{ padding: '8px' }}>
-      <SearchBar clearButton={false} />
-    </Paper>
-  );
+  return <SearchBar clearButton={false} />;
 };
 
-const useStyles = makeStyles({
-  search: {
-    display: 'flex',
-    justifyContent: 'space-between',
+const useStyles = makeStyles(theme => ({
+  searchBarRoot: {
     padding: '8px 16px',
+    background: theme.palette.background.paper,
+    boxShadow: theme.shadows[1],
     borderRadius: '50px',
-    margin: 'auto',
   },
   searchBarOutline: {
     borderStyle: 'none',
   },
-});
+}));
 
 export const CustomStyles = () => {
   const classes = useStyles();
   return (
-    <Paper className={classes.search}>
-      <SearchBar
-        InputProps={{ classes: { notchedOutline: classes.searchBarOutline } }}
-      />
-    </Paper>
+    <SearchBar
+      InputProps={{
+        classes: {
+          root: classes.searchBarRoot,
+          notchedOutline: classes.searchBarOutline,
+        },
+      }}
+    />
   );
 };

plugins/search-react/src/components/SearchBar/SearchBar.tsx

@@ -178,7 +178,6 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
             fullWidth={fullWidth}
             onChange={handleChange}
             onKeyDown={handleKeyDown}
-            style={{ margin: 0 }}
             {...rest}
           />
         </TrackSearch>