enhance(ui): MetricRunInfo - show metric title on hovercard

relative-ci · Sep 22, 2023 · 695de79 · 695de79
1 parent ca6c59c
commit 695de79
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/packages/ui/src/components/metric-run-info/metric-run-info.module.css b/packages/ui/src/components/metric-run-info/metric-run-info.module.css
@@ -1,3 +1,8 @@
+.metricHoverCardTitle {
+  font-weight: bold;
+  font-size: 1em;
+}
+
 .readMoreLink {
   appearance: none;
   background: none;
@@ -15,4 +20,3 @@
   color: var(--color-primary-dark);
   text-decoration: none;
 }
-
diff --git a/packages/ui/src/components/metric-run-info/metric-run-info.tsx b/packages/ui/src/components/metric-run-info/metric-run-info.tsx
@@ -2,15 +2,18 @@ import React, { useCallback, useMemo } from 'react';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
+import { FlexStack } from '../../layout/flex-stack';
+import { Icon } from '../../ui/icon';
 import { RunInfo, RunInfoProps } from '../run-info';
 import css from './metric-run-info.module.css';
 
 interface MetricInfoProps {
+  title: string;
   description: string;
   url?: string;
 }
 
-const MetricHoverCard = ({ description, url }: MetricInfoProps) => {
+const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
   // The component parent can be rendered inside a link, use button to avoid using nested links
   const onClick = useCallback(() => {
     if (url) {
@@ -19,15 +22,21 @@ const MetricHoverCard = ({ description, url }: MetricInfoProps) => {
   }, [url]);
 
   return (
-    <Stack space="xxxsmall">
-      <p>{description}</p>
-      {url && (
-        <p>
-          <button type="button" onClick={onClick} className={css.readMoreLink}>
-            Read more
-          </button>
-        </p>
-      )}
+    <Stack space="xxsmall" className={css.metricHoverCard}>
+      <h3 className={css.metricHoverCardTitle}>{title}</h3>
+      <Stack space="xxxsmall">
+        <p className={css.metricHoverCardDescription}>{description}</p>
+        {url && (
+          <div>
+            <button type="button" onClick={onClick} className={css.readMoreLink}>
+              <FlexStack alignItems="center" space="xxxsmall">
+                <span>Read more</span>
+                <Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
+              </FlexStack>
+            </button>
+          </div>
+        )}
+      </Stack>
     </Stack>
   );
 };
@@ -59,7 +68,9 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
 
   const titleHoverCard = useMemo(() => {
     if (showMetricDescription) {
-      return <MetricHoverCard description={metric.description} url={metric.url} />;
+      return (
+        <MetricHoverCard title={metric.label} description={metric.description} url={metric.url} />
+      );
     }
 
     return null;