support custom list item props on search extensions

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Signed-off-by: Emma Indal <emma.indahl@gmail.com>

plugins/search-react/src/extensions.tsx

@@ -33,7 +33,7 @@ import {
 } from '@backstage/core-plugin-api';
 import { SearchDocument, SearchResult } from '@backstage/plugin-search-common';
 
-import { ListItem, List, ListProps } from '@material-ui/core';
+import { ListItem, List, ListProps, ListItemProps } from '@material-ui/core';
 
 import { DefaultResultListItem } from './components';
 
@@ -73,26 +73,34 @@ const findSearchResultListItemExtensionElement = (
 };
 
 /**
- * @internal
- * Props for {@link SearchResultListItemExtension}.
+ * @public
+ * Extends props for any search result list item extension
  */
-type SearchResultListItemExtensionProps = PropsWithChildren<{
-  rank?: number;
-  result?: SearchDocument;
-  noTrack?: boolean;
-}>;
+export type SearchResultListItemExtensionProps<Props extends {} = {}> = Props &
+  PropsWithChildren<
+    {
+      rank?: number;
+      result?: SearchDocument;
+      noTrack?: boolean;
+    } & Omit<ListItemProps, 'button'>
+  >;
 
 /**
  * @internal
  * Extends children with extension capabilities.
  * @param props - see {@link SearchResultListItemExtensionProps}.
  */
-const SearchResultListItemExtension = ({
-  rank,
-  result,
-  noTrack,
-  children,
-}: SearchResultListItemExtensionProps) => {
+const SearchResultListItemExtension = (
+  props: SearchResultListItemExtensionProps,
+) => {
+  const {
+    rank,
+    result,
+    noTrack,
+    children,
+    alignItems = 'flex-start',
+    ...rest
+  } = props;
   const analytics = useAnalytics();
 
   const handleClickCapture = useCallback(() => {
@@ -107,8 +115,9 @@ const SearchResultListItemExtension = ({
   return (
     <ListItem
       divider
-      alignItems="flex-start"
+      alignItems={alignItems}
       onClickCapture={handleClickCapture}
+      {...rest}
     >
       {children}
     </ListItem>