From 2f660eb573ccccf16a0fac27466dd67eb3cfc2aa Mon Sep 17 00:00:00 2001
From: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
Date: Wed, 17 May 2023 19:28:55 -0500
Subject: [PATCH] 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                         |  6 ++++++
 .../src/components/SearchBar/SearchBar.stories.tsx    |  4 ++--
 .../src/components/SearchBar/SearchBar.tsx            |  1 +
 .../HomePageComponent/HomePageSearchBar.stories.tsx   |  4 ++++
 .../HomePageComponent/HomePageSearchBar.tsx           | 11 ++++++++++-
 5 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/pink-goats-talk.md

diff --git a/.changeset/pink-goats-talk.md b/.changeset/pink-goats-talk.md
new file mode 100644
index 0000000000..622c9f4188
--- /dev/null
+++ b/.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.
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx
index 7e97d790a7..3abd40b179 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx
+++ b/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>
   );
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx
index cfd0538694..ac4aee3c1d 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx
+++ b/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>
diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx
index 4c20ddec39..9a10aaa41b 100644
--- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx
+++ b/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>
diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx
index 4246f76ed0..9d126c6449 100644
--- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx
+++ b/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}
     />
   );