fix(lemon-ui): Properly indicate clickable and disabled LemonTag (#23853

)
PostHog · Jul 25, 2024 · 5aa3642 · 5aa3642
1 parent d35bdba
commit 5aa3642
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 16 deletions.
diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx
@@ -38,8 +38,8 @@ function CategoryPill({
             type={isActive ? 'primary' : canInteract ? 'option' : 'muted'}
             data-attr={`taxonomic-tab-${groupType}`}
             onClick={canInteract ? onClick : undefined}
-            weight="normal"
-            aria-disabled
+            disabledReason={!canInteract ? 'No results' : null}
+            className="font-normal"
         >
             {group?.render ? (
                 group?.name

diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx
@@ -20,20 +20,37 @@ export type LemonTagType =
     | 'none'
     | 'breakdown'
 
-export interface LemonTagProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface LemonTagProps {
     type?: LemonTagType
     children: React.ReactNode
     size?: 'small' | 'medium'
     weight?: 'normal'
     icon?: JSX.Element
     closable?: boolean
     onClose?: () => void
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
     popover?: LemonButtonDropdown
+    className?: string
+    disabledReason?: string | null
+    title?: string
+    'data-attr'?: string
 }
 
 export const LemonTag: React.FunctionComponent<LemonTagProps & React.RefAttributes<HTMLDivElement>> = forwardRef(
     function LemonTag(
-        { type = 'default', children, className, size = 'medium', weight, icon, closable, onClose, popover, ...props },
+        {
+            type = 'default',
+            children,
+            className,
+            size = 'medium',
+            weight,
+            icon,
+            closable,
+            onClose,
+            popover,
+            disabledReason,
+            ...props
+        },
         ref
     ): JSX.Element {
         return (
@@ -42,11 +59,14 @@ export const LemonTag: React.FunctionComponent<LemonTagProps & React.RefAttribut
                 className={clsx(
                     'LemonTag',
                     `LemonTag--size-${size}`,
-                    !!props.onClick && 'cursor-pointer',
+                    disabledReason ? 'cursor-not-allowed' : props.onClick ? 'cursor-pointer' : undefined,
                     `LemonTag--${type}`,
                     weight && `LemonTag--${weight}`,
                     className
                 )}
+                role={props.onClick ? 'button' : undefined}
+                title={disabledReason || undefined}
+                aria-disabled={disabledReason ? true : undefined}
                 {...props}
             >
                 {icon && <span className="LemonTag__icon">{icon}</span>}

diff --git a/frontend/src/queries/nodes/DataTable/renderColumn.tsx b/frontend/src/queries/nodes/DataTable/renderColumn.tsx
@@ -37,7 +37,7 @@ export function renderColumn(
     if (value === loadingColumn) {
         return <Spinner />
     } else if (value === errorColumn) {
-        return <LemonTag color="red">Error</LemonTag>
+        return <LemonTag className="text-danger">Error</LemonTag>
     } else if (queryContextColumnName && queryContextColumn?.render) {
         const Component = queryContextColumn?.render
         return (

diff --git a/frontend/src/scenes/instance/SystemStatus/RenderMetricValue.tsx b/frontend/src/scenes/instance/SystemStatus/RenderMetricValue.tsx
@@ -21,9 +21,8 @@ export function RenderMetricValue(
     if (value && isSecret) {
         return (
             <LemonTag
-                style={{ color: 'var(--muted)', backgroundColor: '#fee5b3' }}
-                className="uppercase"
-                icon={isSecret ? <IconLock style={{ color: 'var(--warning)' }} /> : undefined}
+                className="uppercase text-muted bg-mark"
+                icon={isSecret ? <IconLock className="text-warning" /> : undefined}
             >
                 Secret
             </LemonTag>
@@ -46,11 +45,7 @@ export function RenderMetricValue(
     }
 
     if (value === null || value === undefined || value === '') {
-        return (
-            <LemonTag className="uppercase" style={{ color: 'var(--muted)' }}>
-                {emptyNullLabel ?? 'Unknown'}
-            </LemonTag>
-        )
+        return <LemonTag className="uppercase text-muted">{emptyNullLabel ?? 'Unknown'}</LemonTag>
     }
 
     if (value_type === 'int' || typeof value === 'number') {

diff --git a/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobOptions.tsx b/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobOptions.tsx
@@ -52,7 +52,7 @@ export function PluginJobOptions({
         <>
             <h3 className="l3 mt-8">
                 Jobs
-                <LemonTag type="warning" className="uppercase" style={{ verticalAlign: '0.125em', marginLeft: 6 }}>
+                <LemonTag type="warning" className="uppercase align-[0.125em] ml-1.5">
                     BETA
                 </LemonTag>
             </h3>

diff --git a/frontend/src/scenes/surveys/Surveys.tsx b/frontend/src/scenes/surveys/Surveys.tsx
@@ -492,7 +492,7 @@ export function StatusTag({ survey }: { survey: Survey }): JSX.Element {
     } as Record<ProgressStatus, LemonTagType>
     const status = getSurveyStatus(survey)
     return (
-        <LemonTag type={statusColors[status]} style={{ fontWeight: 600 }} data-attr="status">
+        <LemonTag type={statusColors[status]} className="font-semibold" data-attr="status">
             {status.toUpperCase()}
         </LemonTag>
     )