From ba261f9dcd058eee7dca7e41972c20417307eb4a Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Thu, 18 May 2023 13:00:37 +0200
Subject: [PATCH] fix(search): input base styles

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .../templates/DefaultTemplate.stories.tsx     | 17 ++--
 .../SearchAutocomplete.stories.tsx            | 59 ++++---------
 .../SearchAutocomplete/SearchAutocomplete.tsx | 34 +++++---
 .../SearchBar/SearchBar.stories.tsx           | 58 +++++--------
 .../src/components/SearchBar/SearchBar.tsx    |  1 -
 .../HomePageComponent/HomePageSearchBar.tsx   |  4 +-
 .../src/search/components/TechDocsSearch.tsx  | 82 ++++++++-----------
 7 files changed, 104 insertions(+), 151 deletions(-)

diff --git a/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx b/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx
index 9cf2e8ab35..52fab3c55f 100644
--- a/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx
+++ b/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx
@@ -140,15 +140,16 @@ export default {
 };
 
 const useStyles = makeStyles(theme => ({
-  searchBar: {
-    display: 'flex',
+  searchBarInput: {
     maxWidth: '60vw',
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: theme.shadows[1],
-    padding: '8px 0',
-    borderRadius: '50px',
     margin: 'auto',
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: '50px',
+    boxShadow: theme.shadows[1],
   },
+  searchBarOutline: {
+    borderStyle: 'none'
+  }
 }));
 
 const useLogoStyles = makeStyles(theme => ({
@@ -177,9 +178,9 @@ export const DefaultTemplate = () => {
               className={container}
               logo={<TemplateBackstageLogo classes={{ svg, path }} />}
             />
-            <Grid container item xs={12} alignItems="center" direction="row">
+            <Grid container item xs={12} justifyContent='center'>
               <HomePageSearchBar
-                classes={{ root: classes.searchBar }}
+                InputProps={{ classes: { root: classes.searchBarInput, notchedOutline: classes.searchBarOutline }}}
                 placeholder="Search"
               />
             </Grid>
diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx
index a43b6b048e..6db7955ec8 100644
--- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx
+++ b/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}
+        />
+      )}
+    />
   );
 };
diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx
index 8a5ae7a3ce..2a3cb6bee4 100644
--- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.tsx
+++ b/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],
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx
index 3abd40b179..05a46d11e1 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx
+++ b/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,
+        },
+      }}
+    />
   );
 };
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx
index ac4aee3c1d..cfd0538694 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx
+++ b/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>
diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx
index 9d126c6449..4b9161aff7 100644
--- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx
+++ b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx
@@ -23,7 +23,7 @@ import {
 import { useNavigateToQuery } from '../util';
 
 const useStyles = makeStyles({
-  root: {
+  searchBarRoot: {
     fontSize: '1.5em',
   },
   searchBarOutline: {
@@ -62,12 +62,12 @@ export const HomePageSearchBar = (props: HomePageSearchBarProps) => {
 
   return (
     <SearchBarBase
-      classes={{ root: classes.root }}
       value={query}
       onSubmit={handleSubmit}
       onChange={handleChange}
       InputProps={{
         classes: {
+          root: classes.searchBarRoot,
           notchedOutline: classes.searchBarOutline,
           ...props.InputProps?.classes,
         },
diff --git a/plugins/techdocs/src/search/components/TechDocsSearch.tsx b/plugins/techdocs/src/search/components/TechDocsSearch.tsx
index 56b51af795..665f99c1bb 100644
--- a/plugins/techdocs/src/search/components/TechDocsSearch.tsx
+++ b/plugins/techdocs/src/search/components/TechDocsSearch.tsx
@@ -21,20 +21,10 @@ import {
   SearchContextProvider,
   useSearch,
 } from '@backstage/plugin-search-react';
-import { makeStyles, Paper } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem';
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    width: '100%',
-  },
-  bar: {
-    padding: theme.spacing(1),
-  },
-}));
-
 /**
  * Props for {@link TechDocsSearch}
  *
@@ -75,7 +65,6 @@ const TechDocsSearchBar = (props: TechDocsSearchProps) => {
     setFilters,
     result: { loading, value: searchVal },
   } = useSearch();
-  const classes = useStyles();
   const [options, setOptions] = useState<any[]>([]);
   useEffect(() => {
     let mounted = true;
@@ -117,43 +106,40 @@ const TechDocsSearchBar = (props: TechDocsSearchProps) => {
   };
 
   return (
-    <Paper className={classes.bar} variant="outlined">
-      <SearchAutocomplete
-        classes={{ root: classes.root }}
-        data-testid="techdocs-search-bar"
-        size="small"
-        open={open}
-        getOptionLabel={() => ''}
-        filterOptions={x => {
-          return x; // This is needed to get renderOption to be called after options change. Bug in material-ui?
-        }}
-        onClose={() => {
-          setOpen(false);
-        }}
-        onFocus={() => {
-          setOpen(true);
-        }}
-        onChange={handleSelection}
-        blurOnSelect
-        noOptionsText="No results found"
-        value={null}
-        options={options}
-        renderOption={({ document, highlight }) => (
-          <TechDocsSearchResultListItem
-            result={document}
-            lineClamp={3}
-            asListItem={false}
-            asLink={false}
-            title={document.title}
-            highlight={highlight}
-          />
-        )}
-        loading={loading}
-        inputDebounceTime={debounceTime}
-        inputPlaceholder={`Search ${entityTitle || entityId.name} docs`}
-        freeSolo={false}
-      />
-    </Paper>
+    <SearchAutocomplete
+      data-testid="techdocs-search-bar"
+      size="small"
+      open={open}
+      getOptionLabel={() => ''}
+      filterOptions={x => {
+        return x; // This is needed to get renderOption to be called after options change. Bug in material-ui?
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      onFocus={() => {
+        setOpen(true);
+      }}
+      onChange={handleSelection}
+      blurOnSelect
+      noOptionsText="No results found"
+      value={null}
+      options={options}
+      renderOption={({ document, highlight }) => (
+        <TechDocsSearchResultListItem
+          result={document}
+          lineClamp={3}
+          asListItem={false}
+          asLink={false}
+          title={document.title}
+          highlight={highlight}
+        />
+      )}
+      loading={loading}
+      inputDebounceTime={debounceTime}
+      inputPlaceholder={`Search ${entityTitle || entityId.name} docs`}
+      freeSolo={false}
+    />
   );
 };