From d2bc728073263e74a2266ba8527783f664aadb84 Mon Sep 17 00:00:00 2001
From: Viorel Cojocaru <vio@beanon.com>
Date: Sat, 25 May 2024 12:14:17 +0200
Subject: [PATCH] enhance(ui): RunInfo - add xlarge variation

---
 .../ui/src/components/run-info/run-info.module.css |  4 ++++
 .../src/components/run-info/run-info.stories.tsx   |  2 +-
 packages/ui/src/components/run-info/run-info.tsx   | 14 +++++++-------
 packages/ui/src/css/variables.css                  |  1 +
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/run-info/run-info.module.css b/packages/ui/src/components/run-info/run-info.module.css
index 69db3f0529..553d496995 100644
--- a/packages/ui/src/components/run-info/run-info.module.css
+++ b/packages/ui/src/components/run-info/run-info.module.css
@@ -89,3 +89,7 @@
 .large .baselineMetric {
   font-size: var(--size-small);
 }
+
+.xlarge .currentMetric {
+  font-size: var(--size-xxxxlarge);
+}
diff --git a/packages/ui/src/components/run-info/run-info.stories.tsx b/packages/ui/src/components/run-info/run-info.stories.tsx
index e8011c2dde..c1462026d0 100644
--- a/packages/ui/src/components/run-info/run-info.stories.tsx
+++ b/packages/ui/src/components/run-info/run-info.stories.tsx
@@ -11,7 +11,7 @@ export default {
   },
   argTypes: {
     size: {
-      options: ['small', 'medium', 'large'],
+      options: ['small', 'medium', 'large', 'xlarge'],
       control: { type: 'select' },
     },
   },
diff --git a/packages/ui/src/components/run-info/run-info.tsx b/packages/ui/src/components/run-info/run-info.tsx
index 65387d8fca..e4199ec66f 100644
--- a/packages/ui/src/components/run-info/run-info.tsx
+++ b/packages/ui/src/components/run-info/run-info.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { type ReactNode, useMemo } from 'react';
 import cx from 'classnames';
 
 import { Icon } from '../../ui/icon';
@@ -25,17 +25,17 @@ const getMetricParams = (value: string): [string, string?] => {
 };
 
 export interface RunInfoProps {
-  title?: string;
-  titleHoverCard?: React.ReactNode;
-  titleTooltip?: React.ReactNode;
-  current?: React.ReactNode;
+  title?: ReactNode;
+  titleHoverCard?: ReactNode;
+  titleTooltip?: ReactNode;
+  current?: ReactNode;
   baseline?: string;
   delta?: string;
   deltaPercentage?: string;
   deltaType?: string;
 
   as?: React.ElementType;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
 
   showBaseline?: boolean;
   loading?: boolean;
@@ -66,7 +66,7 @@ export const RunInfo = ({
     (delta || deltaPercentage) && css.showDelta,
   );
 
-  const currentValueParams: [React.ReactNode, string?] = useMemo(() => {
+  const currentValueParams: [ReactNode, string?] = useMemo(() => {
     if (!enhance || typeof current !== 'string') {
       return [current];
     }
diff --git a/packages/ui/src/css/variables.css b/packages/ui/src/css/variables.css
index 82e6421bc6..8a50a951a4 100644
--- a/packages/ui/src/css/variables.css
+++ b/packages/ui/src/css/variables.css
@@ -22,6 +22,7 @@
   --size-xlarge: 1.266rem;
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
+  --size-xxxxlarge: 1.802rem;
 
   --line-height: 1.66;
   --line-height-heading: 1.33;