chore: update more tags (#18509)

.eslintrc.js

@@ -146,6 +146,10 @@ module.exports = {
                         element: 'LemonButtonWithDropdown',
                         message: 'use <LemonMenu> with a <LemonButton> child instead',
                     },
+                    {
+                        element: 'Tag',
+                        message: 'use <LemonTag> instead',
+                    },
                 ],
             },
         ],

frontend/src/lib/components/InsightLabel/index.tsx

@@ -1,4 +1,3 @@
-import { Tag } from 'antd'
 import { ActionFilter, BreakdownKeyType } from '~/types'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { capitalizeFirstLetter, hexToRGBA, midEllipsis } from 'lib/utils'
@@ -10,6 +9,7 @@ import { mathsLogic } from 'scenes/trends/mathsLogic'
 import clsx from 'clsx'
 import { groupsModel } from '~/models/groupsModel'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { LemonTag } from '@posthog/lemon-ui'
 
 export enum IconSize {
     Small = 'small',
@@ -54,18 +54,18 @@ function MathTag({ math, mathProperty, mathHogQL, mathGroupTypeIndex }: MathTagP
     const { aggregationLabel } = useValues(groupsModel)
 
     if (!math || math === 'total') {
-        return <Tag>Total</Tag>
+        return <LemonTag>Total</LemonTag>
     }
     if (math === 'dau') {
-        return <Tag>Unique</Tag>
+        return <LemonTag>Unique</LemonTag>
     }
     if (math === 'unique_group' && mathGroupTypeIndex != undefined) {
-        return <Tag>Unique {aggregationLabel(mathGroupTypeIndex).plural}</Tag>
+        return <LemonTag>Unique {aggregationLabel(mathGroupTypeIndex).plural}</LemonTag>
     }
     if (math && ['sum', 'avg', 'min', 'max', 'median', 'p90', 'p95', 'p99'].includes(math || '')) {
         return (
             <>
-                <Tag>{mathDefinitions[math]?.name || capitalizeFirstLetter(math)}</Tag>
+                <LemonTag>{mathDefinitions[math]?.name || capitalizeFirstLetter(math)}</LemonTag>
                 {mathProperty && (
                     <>
                         <span>of</span>
@@ -76,13 +76,9 @@ function MathTag({ math, mathProperty, mathHogQL, mathGroupTypeIndex }: MathTagP
         )
     }
     if (math === 'hogql') {
-        return (
-            <Tag title={String(mathHogQL)} className="max-w-60 text-ellipsis overflow-hidden">
-                {String(mathHogQL)}
-            </Tag>
-        )
+        return <LemonTag className="max-w-60 text-ellipsis overflow-hidden">{String(mathHogQL) || 'HogQL'}</LemonTag>
     }
-    return <Tag>{capitalizeFirstLetter(math)}</Tag>
+    return <LemonTag>{capitalizeFirstLetter(math)}</LemonTag>
 }
 
 export function InsightLabel({
@@ -171,12 +167,12 @@ export function InsightLabel({
                         <div className="flex flex-wrap gap-1">
                             {pillValues.map((pill) => (
                                 <Tooltip title={pill} key={pill}>
-                                    <Tag className="tag-pill" closable={false}>
+                                    <LemonTag className="tag-pill">
                                         {/* eslint-disable-next-line react/forbid-dom-props */}
                                         <span className="truncate" style={{ maxWidth: pillMaxWidth }}>
                                             {pillMidEllipsis ? midEllipsis(String(pill), 50) : pill}
                                         </span>
-                                    </Tag>
+                                    </LemonTag>
                                 </Tooltip>
                             ))}
                         </div>

frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx

@@ -1,6 +1,6 @@
 import './InfiniteList.scss'
 import '../../lemon-ui/Popover/Popover.scss'
-import { Empty, Tag } from 'antd'
+import { Empty } from 'antd'
 import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
 import { List, ListRowProps, ListRowRenderer } from 'react-virtualized/dist/es/List'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
@@ -22,6 +22,7 @@ import { ControlledDefinitionPopover } from 'lib/components/DefinitionPopover/De
 import { pluralize } from 'lib/utils'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { useState } from 'react'
+import { LemonTag } from '@posthog/lemon-ui'
 
 export interface InfiniteListProps {
     popupAnchorElement: HTMLDivElement | null
@@ -36,7 +37,7 @@ const staleIndicator = (parsedLastSeen: dayjs.Dayjs | null): JSX.Element => {
                 </>
             }
         >
-            <Tag className="lemonade-tag">Stale</Tag>
+            <LemonTag>Stale</LemonTag>
         </Tooltip>
     )
 }
@@ -64,7 +65,7 @@ const unusedIndicator = (eventNames: string[]): JSX.Element => {
                 </>
             }
         >
-            <Tag className="lemonade-tag">Not seen</Tag>
+            <LemonTag>Not seen</LemonTag>
         </Tooltip>
     )
 }

frontend/src/scenes/experiments/Experiment.tsx

@@ -1,10 +1,10 @@
-import { Card, Col, Popconfirm, Progress, Row, Skeleton, Tag, Tooltip } from 'antd'
+import { Card, Col, Popconfirm, Progress, Row, Skeleton, Tooltip } from 'antd'
 import { BindLogic, useActions, useValues } from 'kea'
 import { PageHeader } from 'lib/components/PageHeader'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { SceneExport } from 'scenes/sceneTypes'
-import { AvailableFeature, FunnelStep, InsightType } from '~/types'
+import { AvailableFeature, Experiment as ExperimentType, FunnelStep, InsightType } from '~/types'
 import './Experiment.scss'
 import { experimentLogic, ExperimentLogicProps } from './experimentLogic'
 import { IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'
@@ -37,6 +37,7 @@ import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
 import { ExperimentInsightCreator } from './MetricSelector'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { ExperimentResult } from './ExperimentResult'
+import { getExperimentStatus, getExperimentStatusColor } from './experimentsLogic'
 
 export const scene: SceneExport = {
     component: Experiment,
@@ -528,7 +529,7 @@ export function Experiment(): JSX.Element {
                                             >
                                                 <span className="text-muted">{experiment.feature_flag?.key}</span>
                                             </CopyToClipboardInline>
-                                            <StatusTag />
+                                            <StatusTag experiment={experiment} />
                                             <ResultsTag />
                                         </>
                                     }
@@ -829,27 +830,10 @@ export function Experiment(): JSX.Element {
     )
 }
 
-type ExperimentStatus = 'running' | 'draft' | 'complete'
-
-export function StatusTag(): JSX.Element {
-    const { experiment, isExperimentRunning } = useValues(experimentLogic)
-    const statusColors: Record<ExperimentStatus, LemonTagType> = {
-        running: 'success',
-        draft: 'default',
-        complete: 'completion',
-    }
-
-    const status: ExperimentStatus = useMemo(() => {
-        if (!isExperimentRunning) {
-            return 'draft'
-        } else if (!experiment?.end_date) {
-            return 'running'
-        }
-        return 'complete'
-    }, [isExperimentRunning, experiment.end_date])
-
+export function StatusTag({ experiment }: { experiment: ExperimentType }): JSX.Element {
+    const status = getExperimentStatus(experiment)
     return (
-        <LemonTag type={statusColors[status]}>
+        <LemonTag type={getExperimentStatusColor(status)}>
             <b className="uppercase">{status}</b>
         </LemonTag>
     )
@@ -858,10 +842,14 @@ export function StatusTag(): JSX.Element {
 export function ResultsTag(): JSX.Element {
     const { experiment, experimentResults, areResultsSignificant } = useValues(experimentLogic)
     if (experimentResults && experiment.end_date) {
+        const result: { color: LemonTagType; label: string } = areResultsSignificant
+            ? { color: 'success', label: 'Significant Results' }
+            : { color: 'primary', label: 'Results not significant' }
+
         return (
-            <Tag style={{ alignSelf: 'center' }} color={areResultsSignificant ? 'green' : 'geekblue'}>
-                <b className="uppercase">{areResultsSignificant ? 'Significant Results' : 'Results not significant'}</b>
-            </Tag>
+            <LemonTag type={result.color}>
+                <b className="uppercase">{result.label}</b>
+            </LemonTag>
         )
     }
 

frontend/src/scenes/experiments/Experiments.tsx

@@ -10,7 +10,6 @@ import { urls } from 'scenes/urls'
 import stringWithWBR from 'lib/utils/stringWithWBR'
 import { Link } from 'lib/lemon-ui/Link'
 import { dayjs } from 'lib/dayjs'
-import { Tag } from 'antd'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
@@ -22,6 +21,7 @@ import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductI
 import { router } from 'kea-router'
 import { ExperimentsHog } from 'lib/components/hedgehogs'
 import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
+import { StatusTag } from './Experiment'
 
 export const scene: SceneExport = {
     component: Experiments,
@@ -94,13 +94,7 @@ export function Experiments(): JSX.Element {
             title: 'Status',
             key: 'status',
             render: function Render(_, experiment: Experiment) {
-                const statusColors = { running: 'green', draft: 'default', complete: 'purple' }
-                const status = getExperimentStatus(experiment)
-                return (
-                    <Tag color={statusColors[status]} style={{ fontWeight: 600 }}>
-                        {status.toUpperCase()}
-                    </Tag>
-                )
+                return <StatusTag experiment={experiment} />
             },
             align: 'center',
             sorter: (a, b) => {

frontend/src/scenes/experiments/experimentsLogic.ts

@@ -10,6 +10,7 @@ import { subscriptions } from 'kea-subscriptions'
 import { loaders } from 'kea-loaders'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
+import { LemonTagType } from '@posthog/lemon-ui'
 
 export function getExperimentStatus(experiment: Experiment): ProgressStatus {
     if (!experiment.start_date) {
@@ -20,6 +21,17 @@ export function getExperimentStatus(experiment: Experiment): ProgressStatus {
     return ProgressStatus.Complete
 }
 
+export function getExperimentStatusColor(status: ProgressStatus): LemonTagType {
+    switch (status) {
+        case ProgressStatus.Draft:
+            return 'default'
+        case ProgressStatus.Running:
+            return 'success'
+        case ProgressStatus.Complete:
+            return 'completion'
+    }
+}
+
 export const experimentsLogic = kea<experimentsLogicType>([
     path(['scenes', 'experiments', 'experimentsLogic']),
     connect({

frontend/src/scenes/insights/InsightTooltip/InsightTooltip.scss

@@ -59,7 +59,7 @@
                 font-weight: 600;
             }
             .tag-pill {
-                background-color: rgba(0, 0, 0, 0.08);
+                background-color: var(--border-3000);
                 margin-right: 0;
                 border: 0;
                 color: var(--primary-alt);

frontend/src/scenes/notebooks/Nodes/NotebookNodeExperiment.tsx

@@ -65,7 +65,7 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeExperimentAttri
                     ) : (
                         <>
                             <span className="flex-1 font-semibold truncate">{experiment.name}</span>
-                            <StatusTag />
+                            <StatusTag experiment={experiment} />
                             <ResultsTag />
                         </>
                     )}

frontend/src/scenes/persons/PersonScene.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, Menu, Tag } from 'antd'
+import { Dropdown, Menu } from 'antd'
 // eslint-disable-next-line no-restricted-imports
 import { DownOutlined } from '@ant-design/icons'
 import { useActions, useValues } from 'kea'
@@ -19,7 +19,7 @@ import { RelatedGroups } from 'scenes/groups/RelatedGroups'
 import { groupsAccessLogic } from 'lib/introductions/groupsAccessLogic'
 import { ActivityLog } from 'lib/components/ActivityLog/ActivityLog'
 import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
-import { LemonButton, LemonDivider, LemonSelect, Link } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, LemonSelect, LemonTag, Link } from '@posthog/lemon-ui'
 import { teamLogic } from 'scenes/teamLogic'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { PersonDeleteModal } from 'scenes/persons/PersonDeleteModal'
@@ -76,10 +76,10 @@ function PersonCaption({ person }: { person: PersonType }): JSX.Element {
                         }
                         trigger={['click']}
                     >
-                        <Tag className="extra-ids">
-                            +{person.distinct_ids.length - 1}
+                        <LemonTag className="extra-ids space-x-1">
+                            <div>+{person.distinct_ids.length - 1}</div>
                             <DownOutlined />
-                        </Tag>
+                        </LemonTag>
                     </Dropdown>
                 )}
             </div>

frontend/src/styles/global.scss

@@ -522,12 +522,6 @@ input::-ms-clear {
     }
 }
 
-.lemonade-tag {
-    color: var(--primary-alt) !important;
-    background-color: var(--mid) !important;
-    border-color: var(--border) !important;
-}
-
 // Main app/body styles
 
 .fullscreen-scroll {