From 987f565d855806a44c35f01985acfac8c4d685d1 Mon Sep 17 00:00:00 2001
From: Rutuja Marathe <rutujasudam.marathe@factset.com>
Date: Thu, 18 Jan 2024 22:45:57 -0500
Subject: [PATCH] feat(SearchResultListItems): Apply consistent styling

Signed-off-by: Rutuja Marathe <rutujasudam.marathe@factset.com>
---
 .changeset/eight-hounds-dream.md              |   5 +
 .changeset/orange-walls-complain.md           |   5 +
 .../src/search/AdrSearchResultListItem.tsx    | 119 +++++++++---------
 plugins/catalog/api-report.md                 |   2 +
 .../CatalogSearchResultListItem.tsx           |  32 +++--
 5 files changed, 92 insertions(+), 71 deletions(-)
 create mode 100644 .changeset/eight-hounds-dream.md
 create mode 100644 .changeset/orange-walls-complain.md

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 (
-    <>
-      <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>
   );
 }
diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md
index bef24b50d8..94d316d2b1 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(
             </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>