From bf9966d6bde364a3f024edcfe63b68e2e81e0fa6 Mon Sep 17 00:00:00 2001
From: Janet Cobb <jacobb@redhat.com>
Date: Mon, 29 Jul 2024 03:29:05 -0400
Subject: [PATCH] Decrease spacing between search item title/description
 (#2908)

* Decrease spacing between search item title/description

This should also fix the bug where the search title starts spanning three lines (name, pipe, then bundle), which appears to be caused by some Javascript making the TextContent styling reassert itself.

* Make search title classname prop optional

---------

Co-authored-by: Martin Marosi <marvusm.mmi@gmail.com>
---
 src/components/Search/SearchInput.tsx  |  2 +-
 src/components/Search/SearchTitle.scss |  4 ++++
 src/components/Search/SearchTitle.tsx  | 25 ++++++++++++++-----------
 3 files changed, 19 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Search/SearchTitle.scss

diff --git a/src/components/Search/SearchInput.tsx b/src/components/Search/SearchInput.tsx
index f92c31644..15da18922 100644
--- a/src/components/Search/SearchInput.tsx
+++ b/src/components/Search/SearchInput.tsx
@@ -225,7 +225,7 @@ const SearchInput = ({ onStateChange }: SearchInputListener) => {
                     className="pf-v5-u-mb-xs"
                     component={(props) => <ChromeLink {...props} href={item.pathname} />}
                   >
-                    <SearchTitle title={item.title} bundleTitle={item.bundleTitle.replace(/(\[|\])/gm, '')} />
+                    <SearchTitle title={item.title} bundleTitle={item.bundleTitle.replace(/(\[|\])/gm, '')} className="pf-v5-u-mb-xs" />
                     <SearchDescription description={item.description} />
                   </MenuItem>
                 ))}
diff --git a/src/components/Search/SearchTitle.scss b/src/components/Search/SearchTitle.scss
new file mode 100644
index 000000000..85031e25c
--- /dev/null
+++ b/src/components/Search/SearchTitle.scss
@@ -0,0 +1,4 @@
+.chr-search-title-content small {
+  // Value stolen from Patternfly TextContent, but the appropriate variable isn't available here.
+  font-size: 0.875rem;
+}
diff --git a/src/components/Search/SearchTitle.tsx b/src/components/Search/SearchTitle.tsx
index 7d67965df..810a56987 100644
--- a/src/components/Search/SearchTitle.tsx
+++ b/src/components/Search/SearchTitle.tsx
@@ -1,18 +1,21 @@
 import React from 'react';
-import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
+import './SearchTitle.scss';
 
-const SearchTitle = ({ title, bundleTitle }: { title: string; bundleTitle: string }) => {
+const SearchTitle = ({ title, bundleTitle, className = '' }: { title: string; bundleTitle: string; className?: string }) => {
   const showBundleTitle = bundleTitle.replace(/\s/g, '').length > 0;
   return (
-    <TextContent>
-      <Text component="small" className="pf-v5-u-link-color chr-c-search-title" dangerouslySetInnerHTML={{ __html: title }}></Text>
-      {showBundleTitle && (
-        <Text component="small" className="pf-v5-u-link-color">
-          <span className="pf-v5-u-px-sm">|</span>
-        </Text>
-      )}
-      {showBundleTitle && <Text component="small" className="pf-v5-u-link-color" dangerouslySetInnerHTML={{ __html: bundleTitle }}></Text>}
-    </TextContent>
+    <div className={`chr-search-title-content pf-v5-u-link-color ${className}`}>
+      <small className="pf-v5-u-link-color chr-c-search-title">
+        <span className="chr-c-search-title" dangerouslySetInnerHTML={{ __html: title }} />
+
+        {showBundleTitle && (
+          <>
+            <span className="pf-v5-u-px-sm">|</span>
+            <span dangerouslySetInnerHTML={{ __html: bundleTitle }} />
+          </>
+        )}
+      </small>
+    </div>
   );
 };