feat(experiments): Refine multiple metrics UI (#27443)

PostHog · Jan 10, 2025 · 1fccf79 · 1fccf79
1 parent d32374f
commit 1fccf79
Show file tree

Hide file tree

Showing 2 changed files with 255 additions and 266 deletions.
diff --git a/frontend/src/scenes/experiments/ExperimentView/components.tsx b/frontend/src/scenes/experiments/ExperimentView/components.tsx
@@ -12,6 +12,7 @@ import {
     Link,
     Tooltip,
 } from '@posthog/lemon-ui'
+import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { AnimationType } from 'lib/animations/animations'
 import { Animation } from 'lib/components/Animation/Animation'
@@ -43,11 +44,13 @@ export function VariantTag({
     variantKey,
     muted = false,
     fontSize,
+    className,
 }: {
     experimentId: ExperimentIdType
     variantKey: string
     muted?: boolean
     fontSize?: number
+    className?: string
 }): JSX.Element {
     const { experiment, getIndexForVariant, metricResults } = useValues(experimentLogic({ experimentId }))
 
@@ -57,7 +60,7 @@ export function VariantTag({
 
     if (experiment.holdout && variantKey === `holdout-${experiment.holdout_id}`) {
         return (
-            <span className="flex items-center min-w-0">
+            <span className={clsx('flex items-center min-w-0', className)}>
                 <div
                     className="w-2 h-2 rounded-full shrink-0"
                     // eslint-disable-next-line react/forbid-dom-props
@@ -73,7 +76,7 @@ export function VariantTag({
     }
 
     return (
-        <span className="flex items-center min-w-0">
+        <span className={clsx('flex items-center min-w-0', className)}>
             <div
                 className="w-2 h-2 rounded-full shrink-0"
                 // eslint-disable-next-line react/forbid-dom-props