fix(search): Fix SearchBar styles & update StoryBook stories for custom styles for notchedOutline class

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

.changeset/pink-goats-talk.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-search-react': patch
+'@backstage/plugin-search': patch
+---
+
+Fix SearchBar styles & update StoryBook stories for custom styles for `notchedOutline` class.

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

@@ -92,7 +92,7 @@ const useStyles = makeStyles({
     borderRadius: '50px',
     margin: 'auto',
   },
-  notchedOutline: {
+  searchBarOutline: {
     borderStyle: 'none',
   },
 });
@@ -102,7 +102,7 @@ export const CustomStyles = () => {
   return (
     <Paper className={classes.search}>
       <SearchBar
-        InputProps={{ classes: { notchedOutline: classes.notchedOutline } }}
+        InputProps={{ classes: { notchedOutline: classes.searchBarOutline } }}
       />
     </Paper>
   );

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

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

plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx

@@ -61,6 +61,9 @@ const useStyles = makeStyles(theme => ({
     borderRadius: '50px',
     margin: 'auto',
   },
+  searchBarOutline: {
+    borderStyle: 'none',
+  },
 }));
 
 export const CustomStyles = () => {
@@ -71,6 +74,7 @@ export const CustomStyles = () => {
       <Grid container item xs={12} alignItems="center" direction="row">
         <HomePageSearchBar
           classes={{ root: classes.searchBar }}
+          InputProps={{ classes: { notchedOutline: classes.searchBarOutline } }}
           placeholder="Search"
         />
       </Grid>

plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx

@@ -24,9 +24,11 @@ import { useNavigateToQuery } from '../util';
 
 const useStyles = makeStyles({
   root: {
+    fontSize: '1.5em',
+  },
+  searchBarOutline: {
     border: '1px solid #555',
     borderRadius: '6px',
-    fontSize: '1.5em',
   },
 });
 
@@ -64,6 +66,13 @@ export const HomePageSearchBar = (props: HomePageSearchBarProps) => {
       value={query}
       onSubmit={handleSubmit}
       onChange={handleChange}
+      InputProps={{
+        classes: {
+          notchedOutline: classes.searchBarOutline,
+          ...props.InputProps?.classes,
+        },
+        ...props.InputProps,
+      }}
       {...props}
     />
   );