From 2f0d3d327853d5121278e10a62e43d9ddc14306c Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Fri, 21 Jan 2022 12:24:23 +0100
Subject: [PATCH] [Home] forward classes to HomePageSearchBar instead of using
 className (#9049)

* override styles

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

* add changeset

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

* update api report

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

* forward classes instad of using className

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

* update changeset breaking change, add instructions

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 .changeset/good-poets-change.md               | 13 +++++++++
 .../src/templates/DefaultTemplate.stories.tsx | 12 ++++-----
 plugins/search/api-report.md                  |  1 -
 .../HomePageSearchBar.stories.tsx             | 27 +++++++++++++------
 .../HomePageComponent/HomePageSearchBar.tsx   | 15 +++--------
 5 files changed, 41 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/good-poets-change.md

diff --git a/.changeset/good-poets-change.md b/.changeset/good-poets-change.md
new file mode 100644
index 0000000000..505e642a31
--- /dev/null
+++ b/.changeset/good-poets-change.md
@@ -0,0 +1,13 @@
+---
+'@backstage/plugin-search': minor
+---
+
+Forwarding classes to HomePageSearchBar instead of using className prop. For custom styles of the HomePageSearchBar, use classes prop instead:
+
+```diff
+<HomePageSearchBar
+-  className={searchBar}
++  classes={{ root: classes.searchBar }}
+  placeholder="Search"
+/>
+```
diff --git a/plugins/home/src/templates/DefaultTemplate.stories.tsx b/plugins/home/src/templates/DefaultTemplate.stories.tsx
index 18518e47a9..fb62591fbd 100644
--- a/plugins/home/src/templates/DefaultTemplate.stories.tsx
+++ b/plugins/home/src/templates/DefaultTemplate.stories.tsx
@@ -47,14 +47,12 @@ export default {
 };
 
 const useStyles = makeStyles(theme => ({
-  search: {
+  searchBar: {
+    display: 'flex',
+    maxWidth: '60vw',
     backgroundColor: theme.palette.background.paper,
     boxShadow: theme.shadows[1],
-    maxWidth: '60vw',
-    display: 'flex',
-    justifyContent: 'space-between',
     padding: '8px 0',
-    borderColor: 'transparent',
     borderRadius: '50px',
     margin: 'auto',
   },
@@ -74,7 +72,7 @@ const useLogoStyles = makeStyles(theme => ({
 }));
 
 export const DefaultTemplate = () => {
-  const { search } = useStyles();
+  const classes = useStyles();
   const { svg, path, container } = useLogoStyles();
 
   return (
@@ -88,7 +86,7 @@ export const DefaultTemplate = () => {
             />
             <Grid container item xs={12} alignItems="center" direction="row">
               <HomePageSearchBar
-                className={search}
+                classes={{root: classes.searchBar}}
                 placeholder="Search"
               />
             </Grid>
diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md
index 1fa89f7688..0a7da01ffd 100644
--- a/plugins/search/api-report.md
+++ b/plugins/search/api-report.md
@@ -66,7 +66,6 @@ export type FiltersState = {
 //
 // @public (undocumented)
 export const HomePageSearchBar: ({
-  className: defaultClassName,
   ...props
 }: Partial<Omit<SearchBarBaseProps, 'onChange' | 'onSubmit'>>) => JSX.Element;
 
diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx
index 48f0cbaa1e..1a6c5fbf7b 100644
--- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx
+++ b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx
@@ -41,27 +41,38 @@ export default {
   ],
 };
 
+export const Default = () => {
+  return (
+    <Grid container justifyContent="center" spacing={6}>
+      <Grid container item xs={12} alignItems="center" direction="row">
+        <HomePageSearchBar placeholder="Search" />
+      </Grid>
+    </Grid>
+  );
+};
+
 const useStyles = makeStyles(theme => ({
-  search: {
+  searchBar: {
+    display: 'flex',
+    maxWidth: '60vw',
     backgroundColor: theme.palette.background.paper,
     boxShadow: theme.shadows[1],
-    maxWidth: '60vw',
-    display: 'flex',
-    justifyContent: 'space-between',
     padding: '8px 0',
-    borderColor: 'transparent',
     borderRadius: '50px',
     margin: 'auto',
   },
 }));
 
-export const Default = () => {
-  const { search } = useStyles();
+export const CustomStyles = () => {
+  const classes = useStyles();
 
   return (
     <Grid container justifyContent="center" spacing={6}>
       <Grid container item xs={12} alignItems="center" direction="row">
-        <HomePageSearchBar className={search} placeholder="Search" />
+        <HomePageSearchBar
+          classes={{ root: classes.searchBar }}
+          placeholder="Search"
+        />
       </Grid>
     </Grid>
   );
diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx
index 20517be978..bccf38ab1d 100644
--- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx
+++ b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx
@@ -21,7 +21,7 @@ import { SearchBarBase, SearchBarBaseProps } from '../SearchBar';
 import { useNavigateToQuery } from '../util';
 
 const useStyles = makeStyles({
-  searchBar: {
+  root: {
     border: '1px solid #555',
     borderRadius: '6px',
     fontSize: '1.5em',
@@ -42,18 +42,11 @@ export type HomePageSearchBarProps = Partial<
  *
  * @public
  */
-export const HomePageSearchBar = ({
-  className: defaultClassName,
-  ...props
-}: HomePageSearchBarProps) => {
-  const classes = useStyles();
+export const HomePageSearchBar = ({ ...props }: HomePageSearchBarProps) => {
+  const classes = useStyles(props);
   const [query, setQuery] = useState('');
   const handleSearch = useNavigateToQuery();
 
-  const className = defaultClassName
-    ? `${classes.searchBar} ${defaultClassName}`
-    : classes.searchBar;
-
   const handleSubmit = () => {
     handleSearch({ query });
   };
@@ -67,7 +60,7 @@ export const HomePageSearchBar = ({
 
   return (
     <SearchBarBase
-      className={className}
+      classes={{ root: classes.root }}
       value={query}
       onSubmit={handleSubmit}
       onChange={handleChange}