diff --git a/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--dark.png b/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--dark.png index f9a0bdb5ecacd..7d425b6f708ba 100644 Binary files a/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--dark.png and b/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--dark.png differ diff --git a/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--light.png b/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--light.png index 537cb1a2fe482..462b1db57416c 100644 Binary files a/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--light.png and b/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--light.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--actions--dark.png b/frontend/__snapshots__/filters-taxonomic-filter--actions--dark.png index 815f61eadca65..eabd45e3527ce 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--actions--dark.png and b/frontend/__snapshots__/filters-taxonomic-filter--actions--dark.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--actions--light.png b/frontend/__snapshots__/filters-taxonomic-filter--actions--light.png index 25c9b76d34b6d..07d30d806320a 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--actions--light.png and b/frontend/__snapshots__/filters-taxonomic-filter--actions--light.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--events-free--dark.png b/frontend/__snapshots__/filters-taxonomic-filter--events-free--dark.png index e86c41e9b194e..88adc56aa426f 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--events-free--dark.png and b/frontend/__snapshots__/filters-taxonomic-filter--events-free--dark.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--events-free--light.png b/frontend/__snapshots__/filters-taxonomic-filter--events-free--light.png index 6cb0d5141746c..d1c2165e100c6 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--events-free--light.png and b/frontend/__snapshots__/filters-taxonomic-filter--events-free--light.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--events-premium--dark.png b/frontend/__snapshots__/filters-taxonomic-filter--events-premium--dark.png index 77965469c15b3..4f4e3680d57ae 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--events-premium--dark.png and b/frontend/__snapshots__/filters-taxonomic-filter--events-premium--dark.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--events-premium--light.png b/frontend/__snapshots__/filters-taxonomic-filter--events-premium--light.png index 05b1472433420..ddf7a2bfeea36 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--events-premium--light.png and b/frontend/__snapshots__/filters-taxonomic-filter--events-premium--light.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--properties--dark.png b/frontend/__snapshots__/filters-taxonomic-filter--properties--dark.png index 7f5cdf933a732..a2118f93763f0 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--properties--dark.png and b/frontend/__snapshots__/filters-taxonomic-filter--properties--dark.png differ diff --git a/frontend/__snapshots__/filters-taxonomic-filter--properties--light.png b/frontend/__snapshots__/filters-taxonomic-filter--properties--light.png index 5e0238ac4ebc4..5f1e05c71984e 100644 Binary files a/frontend/__snapshots__/filters-taxonomic-filter--properties--light.png and b/frontend/__snapshots__/filters-taxonomic-filter--properties--light.png differ diff --git a/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx b/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx index b0e9045a7e102..87af06c95353e 100644 --- a/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx +++ b/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 && ( - - OR - + )} ))} diff --git a/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx b/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx index 2cfcf0ad93948..a7645f10e330c 100644 --- a/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx +++ b/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) && } + {(cohort.filters.properties?.values?.length || 0 > 0) && ( + + )} {cohort.filters.properties.values.slice(0, MAX_CRITERIA_GROUPS).map( (cohortGroup, cohortGroupIndex) => isCohortCriteriaGroup(cohortGroup) && ( @@ -75,21 +78,24 @@ export function CohortPopoverInfo({ cohort }: { cohort: CohortType }): JSX.Eleme /> {cohortGroupIndex < Math.min(cohort.filters.properties.values.length, MAX_CRITERIA_GROUPS) - 1 && ( - - {cohort.filters.properties.type} - + )} {cohort.filters.properties.values.length > MAX_CRITERIA_GROUPS && cohortGroupIndex === MAX_CRITERIA_GROUPS - 1 && ( - - {cohort.filters.properties.values.length - MAX_CRITERIA_GROUPS} more criteria{' '} - {pluralize( + + )}`} + /> )} ) @@ -97,7 +103,7 @@ export function CohortPopoverInfo({ cohort }: { cohort: CohortType }): JSX.Eleme ) : ( <> - {(cohort.groups?.length || 0 > 0) && } + {(cohort.groups?.length || 0 > 0) && } {cohort.groups && cohort.groups.map((group, index) => ( @@ -136,9 +142,7 @@ export function CohortPopoverInfo({ cohort }: { cohort: CohortType }): JSX.Eleme /> )} {cohort.groups && index < cohort.groups.length - 1 && ( - - OR - + )} ))} diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss index f458e5ef69dc7..abc3ea434c470 100644 --- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss +++ b/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 { diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx index 3a31f5e704ee1..69f41cee66983 100644 --- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx +++ b/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 ( - - {children} - + {label}} + /> ) } diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx index 7193044205f95..b1e644c01f16a 100644 --- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx +++ b/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} /> - + ) @@ -169,7 +169,7 @@ function DefinitionView({ group }: { group: TaxonomicFilterGroup }): JSX.Element <> {sharedComponents} - {(_definition?.steps?.length || 0) > 0 && } + {(_definition?.steps?.length || 0) > 0 && } - +
{definition && 'description' in localDefinition && ( <> @@ -331,7 +331,7 @@ function DefinitionEdit(): JSX.Element { compact /> )} - +
{!hideView && isViewable && type !== TaxonomicFilterGroupType.Events ? ( + > + {label &&
{label}
} +
) } diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss index 7e79cfa8e4c58..4f0a8632bf6ad 100644 --- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss +++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss @@ -43,6 +43,10 @@ &::before { width: 1.5%; } + + &::after { + width: 95%; + } } .CohortCriteriaRow__inline-divider { diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx index 484e67d8b6046..f17a33b149cd6 100644 --- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx +++ b/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 ( - - {logicalOperator} - - ) + return }