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 <[email protected]>
RedHatInsights · Jul 29, 2024 · bf9966d · bf9966d
1 parent 5fd849e
commit bf9966d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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>
   );
 };