[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

@@ -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"
+/>
+```

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>

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;
 

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>
   );

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}