chore(frontend): Avoid flaky JS breakpoint in `TaxonomicPropertyFilte…

…r` (#23129)
PostHog · Jun 24, 2024 · 237f437 · 237f437
1 parent 74be403
commit 237f437
Show file tree

Hide file tree

Showing 15 changed files with 53 additions and 83 deletions.
diff --git a/...end/__snapshots__/filters-propertyfilters--comparing-property-filters--dark.png b/...end/__snapshots__/filters-propertyfilters--comparing-property-filters--dark.png
diff --git a/...nd/__snapshots__/filters-propertyfilters--comparing-property-filters--light.png b/...nd/__snapshots__/filters-propertyfilters--comparing-property-filters--light.png
diff --git a/...ts__/scenes-app-insights--funnel-left-to-right-breakdown-edit--dark--webkit.png b/...ts__/scenes-app-insights--funnel-left-to-right-breakdown-edit--dark--webkit.png
diff --git a/...ts__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--dark--webkit.png b/...ts__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--dark--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--light--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--light--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png
diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss b/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss
@@ -12,7 +12,7 @@
     .PropertyFilters__prefix {
         padding: 0 5px;
         font-size: 18px;
-        color: #c4c4c4;
+        color: var(--border-bold-3000);
         user-select: none;
     }
 

diff --git a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
@@ -133,7 +133,13 @@ export function OperatorValueSelect({
                 />
             </div>
             {!isOperatorFlag(currentOperator || PropertyOperator.Exact) && type && propkey && (
-                <div className="flex-1 min-w-[10rem]" data-attr="taxonomic-value-select">
+                <div
+                    className={
+                        // High flex-grow for proper sizing within TaxonomicPropertyFilter
+                        'shrink grow-[1000] min-w-[10rem]'
+                    }
+                    data-attr="taxonomic-value-select"
+                >
                     <PropertyValue
                         type={type}
                         key={propkey}

diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.scss b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.scss
@@ -8,86 +8,59 @@
         max-width: 100%;
         background: var(--bg-light);
 
-        .TaxonomicPropertyFilter__row__items {
+        .TaxonomicPropertyFilter__row-items {
             > :first-child {
                 width: 10rem;
             }
         }
     }
+}
 
-    .TaxonomicPropertyFilter__row {
-        display: flex;
-        gap: 0.5rem;
-        overflow: hidden;
-
-        .TaxonomicPropertyFilter__row__operator {
-            display: flex;
-            flex-shrink: 0;
-            align-items: center;
-            justify-content: flex-end;
-            width: 4.5rem;
-            height: 40px; // Matches typical row height
-
-            .arrow {
-                position: relative;
-                font-size: 18px;
-                font-weight: bold;
-                color: #c4c4c4;
-                user-select: none;
-            }
-        }
-
-        .TaxonomicPropertyFilter__row__items {
-            display: flex;
-            flex: 1;
-            flex-wrap: wrap;
-            gap: 0.5rem;
-            align-items: flex-start;
-            overflow: hidden;
+.TaxonomicPropertyFilter__row {
+    display: flex;
+    gap: 0.5rem;
+    overflow: hidden;
+}
 
-            > * {
-                max-width: 100%;
-                overflow: hidden;
-            }
-        }
+.TaxonomicPropertyFilter__row-operator {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    width: 4.5rem;
+    height: 40px; // Matches typical row height
 
-        &.TaxonomicPropertyFilter__row--showing-operators {
-            // Mobile screen - columns
-            &.width-tiny {
-                .TaxonomicPropertyFilter__row__items {
-                    flex-direction: column;
-                    align-items: stretch;
-                }
-            }
+    .TaxonomicPropertyFilter__row--or-filtering & {
+        width: 2rem;
+    }
+}
 
-            // small size - force wrapping
-            &.width-small {
-                .TaxonomicPropertyFilter__row__items {
-                    > :first-child {
-                        flex: 1;
-                        min-width: 10rem;
-                    }
+.TaxonomicPropertyFilter__row-arrow {
+    position: relative;
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--border-bold-3000);
+    user-select: none;
+}
 
-                    > :last-child {
-                        width: 100%;
-                    }
-                }
-            }
+.TaxonomicPropertyFilter__row-items {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+    overflow: hidden;
 
-            &.width-medium {
-                .TaxonomicPropertyFilter__row__items {
-                    > :first-child {
-                        width: 30%;
-                        min-width: 10rem;
-                    }
-                }
-            }
-        }
+    > * {
+        max-width: 100%;
+        overflow: hidden;
+    }
 
-        &.TaxonomicPropertyFilter__row--or-filtering {
-            .TaxonomicPropertyFilter__row__operator {
-                width: 2rem;
-            }
+    .TaxonomicPropertyFilter__row--showing-operators & {
+        > :first-child {
+            flex-grow: 1;
+            width: 30%;
+            min-width: 10rem;
         }
     }
 }
diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
@@ -19,7 +19,6 @@ import {
     TaxonomicFilterGroupType,
     TaxonomicFilterValue,
 } from 'lib/components/TaxonomicFilter/types'
-import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import { isOperatorMulti, isOperatorRegex } from 'lib/utils'
 import { useMemo } from 'react'
 
@@ -118,31 +117,23 @@ export function TaxonomicPropertyFilter({
         />
     )
 
-    const { ref: wrapperRef, size } = useResizeBreakpoints({
-        0: 'tiny',
-        350: 'small',
-        550: 'medium',
-    })
-
     return (
         <div
             className={clsx('TaxonomicPropertyFilter', {
                 'TaxonomicPropertyFilter--in-dropdown': !showInitialSearchInline && !disablePopover,
             })}
-            ref={wrapperRef}
         >
             {showInitialSearchInline ? (
                 taxonomicFilter
             ) : (
                 <div
                     className={clsx('TaxonomicPropertyFilter__row', {
-                        [`width-${size}`]: true,
                         'TaxonomicPropertyFilter__row--or-filtering': orFiltering,
                         'TaxonomicPropertyFilter__row--showing-operators': showOperatorValueSelect,
                     })}
                 >
                     {hasRowOperator && (
-                        <div className="TaxonomicPropertyFilter__row__operator">
+                        <div className="TaxonomicPropertyFilter__row-operator">
                             {orFiltering ? (
                                 <>
                                     {propertyGroupType && index !== 0 && filter?.key && (
@@ -155,7 +146,7 @@ export function TaxonomicPropertyFilter({
                                 <div className="flex items-center gap-1">
                                     {index === 0 ? (
                                         <>
-                                            <span className="arrow">&#8627;</span>
+                                            <span className="TaxonomicPropertyFilter__row-arrow">&#8627;</span>
                                             <span>where</span>
                                         </>
                                     ) : (
@@ -165,7 +156,7 @@ export function TaxonomicPropertyFilter({
                             )}
                         </div>
                     )}
-                    <div className="TaxonomicPropertyFilter__row__items">
+                    <div className="TaxonomicPropertyFilter__row-items">
                         <LemonDropdown
                             overlay={taxonomicFilter}
                             placement="bottom-start"

diff --git a/frontend/src/scenes/surveys/Surveys.stories.tsx b/frontend/src/scenes/surveys/Surveys.stories.tsx
@@ -304,7 +304,7 @@ export const NewSurveyTargetingSection: StoryFn = () => {
 }
 NewSurveyTargetingSection.parameters = {
     testOptions: {
-        waitForSelector: ['.LemonBanner .LemonIcon', '.TaxonomicPropertyFilter__row.width-small'],
+        waitForSelector: ['.LemonBanner .LemonIcon', '.TaxonomicPropertyFilter__row'],
     },
 }