enhance(ui): RunInfo - add xlarge variation

relative-ci · May 25, 2024 · d2bc728 · d2bc728
1 parent 9ad63a3
commit d2bc728
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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;