diff --git a/.changeset/eight-hounds-dream.md b/.changeset/eight-hounds-dream.md new file mode 100644 index 0000000000..8bf945d684 --- /dev/null +++ b/.changeset/eight-hounds-dream.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-adr': patch +--- + +Fix alignment of text in `AdrSearchResultListItem`. Update size and font to match other `SearchResultListItem`. diff --git a/.changeset/orange-walls-complain.md b/.changeset/orange-walls-complain.md new file mode 100644 index 0000000000..477d42d913 --- /dev/null +++ b/.changeset/orange-walls-complain.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Add line clamping to `CatalogSearchResultListItem` diff --git a/plugins/adr/src/search/AdrSearchResultListItem.tsx b/plugins/adr/src/search/AdrSearchResultListItem.tsx index eebf74861d..f0c408df48 100644 --- a/plugins/adr/src/search/AdrSearchResultListItem.tsx +++ b/plugins/adr/src/search/AdrSearchResultListItem.tsx @@ -18,8 +18,6 @@ import React, { ReactNode } from 'react'; import { Box, Chip, - Divider, - ListItem, ListItemIcon, ListItemText, makeStyles, @@ -68,66 +66,63 @@ export function AdrSearchResultListItem(props: AdrSearchResultListItemProps) { if (!result) return null; return ( - <> - - {icon && {icon}} -
- - {highlight?.fields.title ? ( - - ) : ( - result.title - )} - - } - secondary={ - - {highlight?.fields.text ? ( - - ) : ( - result.text - )} - - } +
+ {icon && {icon}} +
+ + {highlight?.fields.title ? ( + + ) : ( + result.title + )} + + } + secondary={ + + {highlight?.fields.text ? ( + + ) : ( + result.text + )} + + } + /> + + - - - {result.status && ( - - )} - {result.date && ( - - )} - -
- - - + {result.status && ( + + )} + {result.date && } + +
+
); } diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index feda3fd70d..d37cbfccc2 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -139,6 +139,8 @@ export interface CatalogSearchResultListItemProps { // (undocumented) icon?: ReactNode | ((result: IndexableDocument) => ReactNode); // (undocumented) + lineClamp?: number; + // (undocumented) rank?: number; // (undocumented) result?: IndexableDocument; diff --git a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx index 4c6b567d8a..f2ef05b128 100644 --- a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx +++ b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx @@ -20,6 +20,7 @@ import { Chip, ListItemIcon, ListItemText, + Typography, makeStyles, } from '@material-ui/core'; import { Link } from '@backstage/core-components'; @@ -56,6 +57,7 @@ export interface CatalogSearchResultListItemProps { result?: IndexableDocument; highlight?: ResultHighlight; rank?: number; + lineClamp?: number; } /** @public */ @@ -94,15 +96,27 @@ export function CatalogSearchResultListItem( } secondary={ - highlight?.fields.text ? ( - - ) : ( - result.text - ) + + {highlight?.fields.text ? ( + + ) : ( + result.text + )} + } />