diff --git a/.changeset/serious-pigs-watch.md b/.changeset/serious-pigs-watch.md
index 6736c64557..2efd8697f3 100644
--- a/.changeset/serious-pigs-watch.md
+++ b/.changeset/serious-pigs-watch.md
@@ -5,6 +5,6 @@
'@backstage/plugin-search-react': patch
---
-`ListItem` wrapper component moved to `SearchResultListItemExtension` for all `*SearchResultListItems`. This is to make sure the list only contains list elements.
+`ListItem` wrapper component moved to `SearchResultListItemExtension` for all `*SearchResultListItems` that are exported as extensions. This is to make sure the list only contains list elements.
-Note: If you have implemented a custom result list item, you can remove the list item wrapper to avoid duplicated `
` elements.
+Note: If you have implemented a custom result list item, we recommend you to remove the list item wrapper to avoid nested `` elements.
diff --git a/plugins/explore/api-report.md b/plugins/explore/api-report.md
index 02b917b9ed..e7adde4b77 100644
--- a/plugins/explore/api-report.md
+++ b/plugins/explore/api-report.md
@@ -139,7 +139,5 @@ export interface ToolSearchResultListItemProps {
rank?: number;
// (undocumented)
result?: IndexableDocument;
- // (undocumented)
- toggleModal?: () => void;
}
```
diff --git a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx
index f3573007fc..eb12ba45d8 100644
--- a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx
+++ b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx
@@ -50,7 +50,6 @@ export interface ToolSearchResultListItemProps {
result?: IndexableDocument;
highlight?: ResultHighlight;
rank?: number;
- toggleModal?: () => void;
}
/** @public */
@@ -94,8 +93,9 @@ export function ToolSearchResultListItem(props: ToolSearchResultListItemProps) {
}
/>
- {result.tags &&
- result.tags.map((tag: string) => )}
+ {result.tags?.map((tag: string) => (
+
+ ))}
>
diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx
index 932995b895..9971b0e7e5 100644
--- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx
+++ b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx
@@ -17,7 +17,14 @@
import React from 'react';
import _unescape from 'lodash/unescape';
import { Link } from '@backstage/core-components';
-import { ListItemText, ListItemIcon, Box, Chip } from '@material-ui/core';
+import {
+ Divider,
+ ListItem,
+ ListItemText,
+ ListItemIcon,
+ Box,
+ Chip,
+} from '@material-ui/core';
import { useAnalytics } from '@backstage/core-plugin-api';
import { ResultHighlight } from '@backstage/plugin-search-common';
import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
@@ -45,44 +52,47 @@ export const StackOverflowSearchResultListItem = (
return (
<>
- {props.icon && {props.icon}}
-
-
- {highlight?.fields?.title ? (
-
+
+ {props.icon && {props.icon}}
+
+
+ {highlight?.fields?.title ? (
+
+ ) : (
+ _unescape(title)
+ )}
+
+ }
+ secondary={
+ highlight?.fields?.text ? (
+ <>
+ Author:{' '}
+
+ >
) : (
- _unescape(title)
- )}
-
- }
- secondary={
- highlight?.fields?.text ? (
- <>
- Author:{' '}
-
- >
- ) : (
- `Author: ${text}`
- )
- }
- />
-
- {tags &&
- tags.map((tag: string) => (
-
- ))}
-
+ `Author: ${text}`
+ )
+ }
+ />
+
+ {tags &&
+ tags.map((tag: string) => (
+
+ ))}
+
+
+
>
);
};