paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(SearchResultListItems): Apply consistent styling

Browse Source 
Signed-off-by: Rutuja Marathe <rutujasudam.marathe@factset.com>
This commit is contained in:
Rutuja Marathe
2024-01-18 22:45:57 -05:00
parent 3a74587d41
commit 987f565d85
5 changed files with 92 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/eight-hounds-dream.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-adr': patch
---
Fix alignment of text in `AdrSearchResultListItem`. Update size and font to match other `SearchResultListItem`.
.changeset/orange-walls-complain.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-catalog': patch
---
Add line clamping to `CatalogSearchResultListItem`
plugins/adr/src/search/AdrSearchResultListItem.tsx
+57 -62
View File
@@ -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 (
<>
<ListItem alignItems="flex-start" className={classes.item}>
{icon && <ListItemIcon>{icon}</ListItemIcon>}
<div className={classes.flexContainer}>
<ListItemText
className={classes.itemText}
primaryTypographyProps={{ variant: 'h6' }}
primary={
<Link noTrack to={result.location}>
{highlight?.fields.title ? (
<HighlightedSearchResultText
text={highlight?.fields.title || ''}
preTag={highlight?.preTag || ''}
postTag={highlight?.postTag || ''}
/>
) : (
result.title
)}
</Link>
}
secondary={
<Typography
component="span"
style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: lineClamp,
overflow: 'hidden',
}}
>
{highlight?.fields.text ? (
<HighlightedSearchResultText
text={highlight.fields.text}
preTag={highlight.preTag}
postTag={highlight.postTag}
/>
) : (
result.text
)}
</Typography>
}
<div className={classes.item}>
{icon && <ListItemIcon>{icon}</ListItemIcon>}
<div className={classes.flexContainer}>
<ListItemText
className={classes.itemText}
primaryTypographyProps={{ variant: 'h6' }}
primary={
<Link noTrack to={result.location}>
{highlight?.fields.title ? (
<HighlightedSearchResultText
text={highlight?.fields.title || ''}
preTag={highlight?.preTag || ''}
postTag={highlight?.postTag || ''}
/>
) : (
result.title
)}
</Link>
}
secondary={
<Typography
component="span"
style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: lineClamp,
overflow: 'hidden',
}}
color="textSecondary"
variant="body2"
>
{highlight?.fields.text ? (
<HighlightedSearchResultText
text={highlight.fields.text}
preTag={highlight.preTag}
postTag={highlight.postTag}
/>
) : (
result.text
)}
</Typography>
}
/>
<Box>
<Chip
label={`Entity: ${
result.entityTitle ??
humanizeEntityRef(parseEntityRef(result.entityRef))
}`}
size="small"
/>
<Box>
<Chip
label={`Entity: ${
result.entityTitle ??
humanizeEntityRef(parseEntityRef(result.entityRef))
}`}
size="small"
/>
{result.status && (
<Chip label={`Status: ${result.status}`} size="small" />
)}
{result.date && (
<Chip label={`Date: ${result.date}`} size="small" />
)}
</Box>
</div>
</ListItem>
<Divider component="li" />
</>
{result.status && (
<Chip label={`Status: ${result.status}`} size="small" />
)}
{result.date && <Chip label={`Date: ${result.date}`} size="small" />}
</Box>
</div>
</div>
);
}
plugins/catalog/api-report.md
+2
View File
@@ -139,6 +139,8 @@ export interface CatalogSearchResultListItemProps {
// (undocumented)
icon?: ReactNode | ((result: IndexableDocument) => ReactNode);
// (undocumented)
lineClamp?: number;
// (undocumented)
rank?: number;
// (undocumented)
result?: IndexableDocument;
plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx
+23 -9
View File
@@ -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(
</Link>
}
secondary={
highlight?.fields.text ? (
<HighlightedSearchResultText
text={highlight.fields.text}
preTag={highlight.preTag}
postTag={highlight.postTag}
/>
) : (
result.text
)
<Typography
component="span"
style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: props.lineClamp,
overflow: 'hidden',
}}
color="textSecondary"
variant="body2"
>
{highlight?.fields.text ? (
<HighlightedSearchResultText
text={highlight.fields.text}
preTag={highlight.preTag}
postTag={highlight.postTag}
/>
) : (
result.text
)}
</Typography>
}
/>
<Box>