chore: remove antd tags (#18684)

.eslintrc.js

@@ -188,10 +188,6 @@ module.exports = {
                         element: 'LemonButtonWithDropdown',
                         message: 'use <LemonMenu> with a <LemonButton> child instead',
                     },
-                    {
-                        element: 'Tag',
-                        message: 'use <LemonTag> instead',
-                    },
                 ],
             },
         ],
@@ -248,6 +244,8 @@ module.exports = {
                         message: 'use <Link> instead',
                     },
                     {
+                        element: 'Tag',
+                        message: 'use <LemonTag> instead',
                         element: 'Alert',
                         message: 'use <LemonBanner> instead',
                     },

frontend/src/lib/colors.ts

@@ -1,5 +1,7 @@
 import { LifecycleToggle } from '~/types'
 
+import { LemonTagType } from './lemon-ui/LemonTag'
+
 /** --brand-blue in HSL for saturation mixing */
 export const BRAND_BLUE_HSL: [number, number, number] = [228, 100, 56]
 
@@ -22,18 +24,15 @@ const dataColorVars = [
     'color-15',
 ]
 
-export const tagColors = [
-    'blue',
-    'cyan',
-    'orange',
-    'gold',
-    'green',
-    'lime',
-    'volcano',
-    'magenta',
-    'purple',
-    'red',
-    'geekblue',
+export const tagColors: LemonTagType[] = [
+    'primary',
+    'highlight',
+    'warning',
+    'danger',
+    'success',
+    'completion',
+    'caution',
+    'option',
 ]
 
 export function getColorVar(variable: string): string {

frontend/src/lib/components/ObjectTags/ObjectTags.tsx

@@ -1,7 +1,8 @@
 // eslint-disable-next-line no-restricted-imports
 import { CloseOutlined, SyncOutlined } from '@ant-design/icons'
 import { IconPlus } from '@posthog/icons'
-import { Select, Tag } from 'antd'
+import { LemonTag, LemonTagType } from '@posthog/lemon-ui'
+import { Select } from 'antd'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { objectTagsLogic } from 'lib/components/ObjectTags/objectTagsLogic'
@@ -38,11 +39,11 @@ export type ObjectTagsProps =
           tagsAvailable?: string[] /** Whether this field should be gated behind a "paywall". */
       })
 
-const COLOR_OVERRIDES: Record<string, string> = {
-    official: 'green',
-    approved: 'green',
-    verified: 'green',
-    deprecated: 'red',
+const COLOR_OVERRIDES: Record<string, LemonTagType> = {
+    official: 'success',
+    approved: 'success',
+    verified: 'success',
+    deprecated: 'danger',
 }
 
 let uniqueMemoizedIndex = 1
@@ -90,9 +91,9 @@ export function ObjectTags({
                       .filter((t) => !!t)
                       .map((tag, index) => {
                           return (
-                              <Tag
+                              <LemonTag
                                   key={index}
-                                  color={COLOR_OVERRIDES[tag] || colorForString(tag)}
+                                  type={COLOR_OVERRIDES[tag] || colorForString(tag)}
                                   style={{ marginRight: 0 }}
                               >
                                   {tag}{' '}
@@ -111,29 +112,28 @@ export function ObjectTags({
                                               }
                                           />
                                       ))}
-                              </Tag>
+                              </LemonTag>
                           )
                       })}
             {saving && <Spinner />}
             {!staticOnly && onChange && saving !== undefined && (
                 <span className="inline-flex font-normal">
-                    <Tag
+                    <LemonTag
+                        type="none"
                         onClick={() =>
                             onGuardClick(() => {
                                 setAddingNewTag(true)
                             })
                         }
                         data-attr="button-add-tag"
+                        icon={<IconPlus />}
+                        className="border border-dashed"
                         style={{
-                            cursor: 'pointer',
-                            borderStyle: 'dashed',
-                            backgroundColor: 'var(--bg-light)',
-                            display: addingNewTag ? 'none' : 'initial',
+                            display: addingNewTag ? 'none' : 'inline-flex',
                         }}
-                        icon={<IconPlus />}
                     >
                         Add tag
-                    </Tag>
+                    </LemonTag>
                     {addingNewTag && (
                         <SelectGradientOverflow
                             size="small"

frontend/src/lib/components/SelectGradientOverflow.tsx

@@ -2,7 +2,8 @@ import './SelectGradientOverflow.scss'
 
 // eslint-disable-next-line no-restricted-imports
 import { LoadingOutlined } from '@ant-design/icons'
-import { ConfigProvider, Empty, Select, Tag } from 'antd'
+import { LemonTag } from '@posthog/lemon-ui'
+import { ConfigProvider, Empty, Select } from 'antd'
 import { RefSelectProps, SelectProps } from 'antd/lib/select'
 import { useValues } from 'kea'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
@@ -69,10 +70,10 @@ export function SelectGradientOverflow({
         }
         return (
             <Tooltip title={toString(value)}>
-                <Tag>
+                <LemonTag>
                     <span className="label">{label}</span>
                     <CloseButton onClick={onClose} />
-                </Tag>
+                </LemonTag>
             </Tooltip>
         )
     }

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

@@ -1,4 +1,4 @@
-import { Tag } from 'antd'
+import { LemonTag } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { BindLogic, useActions, useValues } from 'kea'
 import { InfiniteList } from 'lib/components/TaxonomicFilter/InfiniteList'
@@ -34,10 +34,11 @@ function CategoryPill({
     const canInteract = totalListCount > 0
 
     return (
-        <Tag
+        <LemonTag
+            type={isActive ? 'primary' : canInteract ? 'option' : 'muted'}
             data-attr={`taxonomic-tab-${groupType}`}
-            className={clsx({ 'taxonomic-pill-active': isActive, 'taxonomic-count-zero': !canInteract })}
             onClick={canInteract ? onClick : undefined}
+            weight="normal"
         >
             {group?.render ? (
                 group?.name
@@ -48,7 +49,7 @@ function CategoryPill({
                     {totalResultCount ?? '...'}
                 </>
             )}
-        </Tag>
+        </LemonTag>
     )
 }
 
@@ -87,7 +88,7 @@ export function InfiniteSelectResults({
     return (
         <>
             <div className="taxonomic-group-title">Categories</div>
-            <div className="taxonomic-pills">
+            <div className="taxonomic-pills flex gap-0.5 flex-wrap">
                 {taxonomicGroupTypes.map((groupType) => {
                     return (
                         <CategoryPill

frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss

@@ -36,39 +36,5 @@
         padding-left: 10px;
         margin-top: 8px;
         margin-bottom: 8px;
-
-        .ant-tag {
-            margin-right: 2px;
-            margin-bottom: 2px;
-            color: var(--link);
-            cursor: pointer;
-            background: var(--side);
-            border-color: var(--side);
-            transition: none;
-
-            .posthog-3000 & {
-                font-weight: 500;
-                color: var(--default);
-
-                &:not(.taxonomic-pill-active) {
-                    opacity: 0.7;
-                }
-
-                &:hover {
-                    opacity: 1;
-                }
-            }
-
-            &.taxonomic-count-zero {
-                color: var(--muted);
-                cursor: not-allowed;
-            }
-
-            &.taxonomic-pill-active {
-                color: #fff;
-                background: var(--link);
-                border-color: var(--link);
-            }
-        }
     }
 }

frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss

@@ -1,5 +1,6 @@
 .LemonTag {
     display: inline-flex;
+    gap: 0.125rem;
     align-items: center;
     padding: 0.125rem 0.25rem;
     font-size: 0.75rem;
@@ -10,6 +11,10 @@
     background: var(--border);
     border-radius: var(--radius);
 
+    &.LemonTag--normal {
+        font-weight: normal;
+    }
+
     .posthog-3000 &:not(.breakdown) {
         padding: 0.075rem 0.25rem;
         font-size: 0.688rem;
@@ -19,7 +24,7 @@
         border-radius: calc(var(--radius) * 0.75);
     }
 
-    &.primary {
+    &.LemonTag--primary {
         color: #fff;
         background-color: var(--primary-3000);
 
@@ -30,7 +35,12 @@
         }
     }
 
-    &.highlight {
+    &.LemonTag--option {
+        color: var(--primary);
+        background-color: var(--accent-3000);
+    }
+
+    &.LemonTag--highlight {
         color: var(--bg-charcoal);
         background-color: var(--mark);
 
@@ -41,7 +51,7 @@
         }
     }
 
-    &.warning {
+    &.LemonTag--warning {
         color: var(--bg-charcoal);
         background-color: var(--warning);
 
@@ -52,7 +62,7 @@
         }
     }
 
-    &.danger {
+    &.LemonTag--danger {
         color: #fff;
         background-color: var(--danger);
 
@@ -63,7 +73,7 @@
         }
     }
 
-    &.success {
+    &.LemonTag--success {
         color: #fff;
         background-color: var(--success);
 
@@ -74,7 +84,7 @@
         }
     }
 
-    &.completion {
+    &.LemonTag--completion {
         color: var(--bg-charcoal);
         background-color: var(--purple-light);
 
@@ -85,7 +95,7 @@
         }
     }
 
-    &.caution {
+    &.LemonTag--caution {
         color: var(--bg-charcoal);
         background-color: var(--danger-lighter);
 
@@ -96,7 +106,12 @@
         }
     }
 
-    &.none {
+    &.LemonTag--muted {
+        color: var(--muted);
+        background-color: var(--accent-3000);
+    }
+
+    &.LemonTag--none {
         background: none;
     }
 

frontend/src/lib/lemon-ui/LemonTag/LemonTag.stories.tsx

@@ -17,11 +17,13 @@ export default meta
 
 const ALL_COLORS: LemonTagType[] = [
     'primary',
+    'option',
     'highlight',
     'warning',
     'danger',
     'success',
     'default',
+    'muted',
     'completion',
     'caution',
     'none',

frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx

@@ -7,11 +7,13 @@ import { LemonButtonDropdown } from 'lib/lemon-ui/LemonButton/LemonButton'
 
 export type LemonTagType =
     | 'primary'
+    | 'option'
     | 'highlight'
     | 'warning'
     | 'danger'
     | 'success'
     | 'default'
+    | 'muted'
     | 'completion'
     | 'caution'
     | 'none'
@@ -21,6 +23,7 @@ export interface LemonTagProps extends React.HTMLAttributes<HTMLDivElement> {
     type?: LemonTagType
     children: React.ReactNode
     size?: 'small' | 'medium'
+    weight?: 'normal'
     icon?: JSX.Element
     closable?: boolean
     onClose?: () => void
@@ -32,6 +35,7 @@ export function LemonTag({
     children,
     className,
     size = 'medium',
+    weight,
     icon,
     closable,
     onClose,
@@ -40,7 +44,14 @@ export function LemonTag({
 }: LemonTagProps): JSX.Element {
     return (
         <div
-            className={clsx('LemonTag', `LemonTag--size-${size}`, !!props.onClick && 'cursor-pointer', type, className)}
+            className={clsx(
+                'LemonTag',
+                `LemonTag--size-${size}`,
+                !!props.onClick && 'cursor-pointer',
+                `LemonTag--${type}`,
+                weight && `LemonTag--${weight}`,
+                className
+            )}
             {...props}
         >
             {icon && <span className="LemonTag__icon">{icon}</span>}