chore: replace antd divider (#19945)

frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx

@@ -84,9 +84,7 @@ export function ActionPopoverInfo({ entity }: { entity: ActionType }): JSX.Eleme
                             }
                         />
                         {entity.steps && index < entity.steps.length - 1 && (
-                            <DefinitionPopover.HorizontalLine style={{ marginTop: 4, marginBottom: 12 }}>
-                                OR
-                            </DefinitionPopover.HorizontalLine>
+                            <DefinitionPopover.HorizontalLine className="mt-1 mb-3" label="OR" />
                         )}
                     </DefinitionPopover.Section>
                 ))}

frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx

@@ -1,3 +1,4 @@
+import { LemonDivider } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { DefinitionPopover } from 'lib/components/DefinitionPopover/DefinitionPopover'
 import {
@@ -32,7 +33,9 @@ export function CohortPopoverInfo({ cohort }: { cohort: CohortType }): JSX.Eleme
     }
     return cohort.filters?.properties ? (
         <>
-            {(cohort.filters.properties?.values?.length || 0 > 0) && <DefinitionPopover.HorizontalLine />}
+            {(cohort.filters.properties?.values?.length || 0 > 0) && (
+                <LemonDivider className="DefinitionPopover my-2" />
+            )}
             {cohort.filters.properties.values.slice(0, MAX_CRITERIA_GROUPS).map(
                 (cohortGroup, cohortGroupIndex) =>
                     isCohortCriteriaGroup(cohortGroup) && (
@@ -75,29 +78,32 @@ export function CohortPopoverInfo({ cohort }: { cohort: CohortType }): JSX.Eleme
                             />
                             {cohortGroupIndex <
                                 Math.min(cohort.filters.properties.values.length, MAX_CRITERIA_GROUPS) - 1 && (
-                                <DefinitionPopover.HorizontalLine style={{ marginTop: 4, marginBottom: 12 }}>
-                                    {cohort.filters.properties.type}
-                                </DefinitionPopover.HorizontalLine>
+                                <DefinitionPopover.HorizontalLine
+                                    className="mt-1 mb-3"
+                                    label={cohort.filters.properties.type}
+                                />
                             )}
                             {cohort.filters.properties.values.length > MAX_CRITERIA_GROUPS &&
                                 cohortGroupIndex === MAX_CRITERIA_GROUPS - 1 && (
-                                    <DefinitionPopover.HorizontalLine style={{ marginTop: 4, marginBottom: 12 }}>
-                                        {cohort.filters.properties.values.length - MAX_CRITERIA_GROUPS} more criteria{' '}
-                                        {pluralize(
+                                    <DefinitionPopover.HorizontalLine
+                                        className="mt-1 mb-3"
+                                        label={`${
+                                            cohort.filters.properties.values.length - MAX_CRITERIA_GROUPS
+                                        } more criteria ${pluralize(
                                             cohort.filters.properties.values.length - MAX_CRITERIA_GROUPS,
                                             'group',
                                             'groups',
                                             false
-                                        )}
-                                    </DefinitionPopover.HorizontalLine>
+                                        )}`}
+                                    />
                                 )}
                         </DefinitionPopover.Section>
                     )
             )}
         </>
     ) : (
         <>
-            {(cohort.groups?.length || 0 > 0) && <DefinitionPopover.HorizontalLine />}
+            {(cohort.groups?.length || 0 > 0) && <LemonDivider className="DefinitionPopover my-2" />}
             {cohort.groups &&
                 cohort.groups.map((group, index) => (
                     <DefinitionPopover.Section key={index}>
@@ -136,9 +142,7 @@ export function CohortPopoverInfo({ cohort }: { cohort: CohortType }): JSX.Eleme
                             />
                         )}
                         {cohort.groups && index < cohort.groups.length - 1 && (
-                            <DefinitionPopover.HorizontalLine style={{ marginTop: 4, marginBottom: 12 }}>
-                                OR
-                            </DefinitionPopover.HorizontalLine>
+                            <DefinitionPopover.HorizontalLine className="mt-1 mb-3" label="OR" />
                         )}
                     </DefinitionPopover.Section>
                 ))}

frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss

@@ -1,5 +1,6 @@
 .definition-popover {
-    width: 20rem;
+    min-width: 17rem;
+    max-width: 20rem;
     padding: 0.5rem 0.75rem 0.75rem;
 
     .definition-popover-header {
@@ -100,13 +101,16 @@
         }
     }
 
-    .definition-popover-divider {
-        align-items: flex-start;
-        width: 100%;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        font-size: 0.6875rem;
-        text-transform: uppercase;
+    .DefinitionPopover {
+        background-color: var(--side);
+
+        .DefinitionPopover__label {
+            align-items: flex-start;
+            margin-top: 1rem;
+            margin-bottom: 1rem;
+            font-size: 0.6875rem;
+            text-transform: uppercase;
+        }
     }
 
     .definition-popover-grid {

frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx

@@ -1,7 +1,6 @@
 import './DefinitionPopover.scss'
 
-import { ProfilePicture } from '@posthog/lemon-ui'
-import { Divider, DividerProps } from 'antd'
+import { LemonDivider, ProfilePicture } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { definitionPopoverLogic, DefinitionPopoverState } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
@@ -196,11 +195,12 @@ function Owner({ user }: { user?: UserBasicType | null }): JSX.Element {
     )
 }
 
-function HorizontalLine({ children, ...props }: DividerProps): JSX.Element {
+function HorizontalLine({ className, label }: { className?: string; label?: string }): JSX.Element {
     return (
-        <Divider className="definition-popover-divider" {...props}>
-            {children}
-        </Divider>
+        <LemonDivider
+            className={clsx('DefinitionPopover items-start my-4', className)}
+            label={label && <span className="DefinitionPopover__label">{label}</span>}
+        />
     )
 }
 

frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx

@@ -1,5 +1,5 @@
 import { hide } from '@floating-ui/react'
-import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
+import { LemonButton, LemonCheckbox, LemonDivider } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { ActionPopoverInfo } from 'lib/components/DefinitionPopover/ActionPopoverInfo'
 import { CohortPopoverInfo } from 'lib/components/DefinitionPopover/CohortPopoverInfo'
@@ -129,7 +129,7 @@ function DefinitionView({ group }: { group: TaxonomicFilterGroup }): JSX.Element
                 updatedAt={(definition && 'updated_at' in definition && definition.updated_at) || undefined}
                 updatedBy={(definition && 'updated_by' in definition && definition.updated_by) || undefined}
             />
-            <DefinitionPopover.HorizontalLine />
+            <LemonDivider className="DefinitionPopover my-4" />
         </>
     )
 
@@ -169,7 +169,7 @@ function DefinitionView({ group }: { group: TaxonomicFilterGroup }): JSX.Element
             <>
                 {sharedComponents}
                 <ActionPopoverInfo entity={_definition} />
-                {(_definition?.steps?.length || 0) > 0 && <DefinitionPopover.HorizontalLine />}
+                {(_definition?.steps?.length || 0) > 0 && <LemonDivider className="DefinitionPopover my-4" />}
                 <DefinitionPopover.Grid cols={2}>
                     <DefinitionPopover.Card
                         title="First seen"
@@ -284,7 +284,7 @@ function DefinitionEdit(): JSX.Element {
 
     return (
         <>
-            <DefinitionPopover.HorizontalLine />
+            <LemonDivider className="DefinitionPopover my-4" />
             <form className="definition-popover-edit-form">
                 {definition && 'description' in localDefinition && (
                     <>
@@ -331,7 +331,7 @@ function DefinitionEdit(): JSX.Element {
                         compact
                     />
                 )}
-                <DefinitionPopover.HorizontalLine style={{ marginTop: 0 }} />
+                <LemonDivider className="DefinitionPopover mt-0" />
                 <div className="flex items-center justify-between gap-2 click-outside-block">
                     {!hideView && isViewable && type !== TaxonomicFilterGroupType.Events ? (
                         <LemonButton

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

@@ -37,4 +37,21 @@
             );
         }
     }
+
+    &--with-label {
+        display: flex;
+        height: unset;
+        background: none;
+
+        &::before,
+        &::after {
+            position: relative;
+            top: 50%;
+            display: block;
+            width: 50%;
+            content: '';
+            border-top: 1px solid var(--border);
+            transform: translateY(50%);
+        }
+    }
 }

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

@@ -11,6 +11,8 @@ export interface LemonDividerProps {
     dashed?: boolean
     /** Adding a className will remove the default margin class names, allowing the greatest flexibility */
     className?: string
+    /** A label to display within the divider */
+    label?: string | React.ReactElement
 }
 
 /** A line separator for separating rows of content
@@ -22,6 +24,7 @@ export function LemonDivider({
     vertical = false,
     dashed = false,
     thick = false,
+    label,
     className,
 }: LemonDividerProps): JSX.Element {
     return (
@@ -31,11 +34,14 @@ export function LemonDivider({
                 vertical && 'LemonDivider--vertical',
                 thick && 'LemonDivider--thick',
                 dashed && 'LemonDivider--dashed',
+                !!label && 'LemonDivider--with-label',
                 // If no className is provided we set some sensible default margins
                 !className && (vertical ? 'm-2' : 'my-2'),
                 className
             )}
             role="separator"
-        />
+        >
+            {label && <div className="px-3 text-xs whitespace-nowrap font-semibold">{label}</div>}
+        </div>
     )
 }

frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss

@@ -43,6 +43,10 @@
         &::before {
             width: 1.5%;
         }
+
+        &::after {
+            width: 95%;
+        }
     }
 
     .CohortCriteriaRow__inline-divider {

frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx

@@ -1,6 +1,6 @@
 import './CohortCriteriaRowBuilder.scss'
 
-import { Divider } from 'antd'
+import { LemonDivider } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions } from 'kea'
 import { Field as KeaField } from 'kea-forms'
@@ -166,9 +166,5 @@ export interface LogicalRowDividerProps {
 }
 
 export function LogicalRowDivider({ logicalOperator }: LogicalRowDividerProps): JSX.Element {
-    return (
-        <Divider className="logical-row-divider" orientation="left">
-            <span className="text-xs text-primary-alt font-semibold">{logicalOperator}</span>
-        </Divider>
-    )
+    return <LemonDivider className="logical-row-divider my-4" label={logicalOperator} />
 }