feat: Change Popover to use min width when matching (#21039)

PostHog · Mar 25, 2024 · b04f787 · b04f787
1 parent 9a615ea
commit b04f787
Show file tree

Hide file tree

Showing 13 changed files with 20 additions and 17 deletions.
diff --git a/frontend/src/lib/components/MemberSelect.tsx b/frontend/src/lib/components/MemberSelect.tsx
@@ -44,7 +44,7 @@ export function MemberSelect({ defaultLabel = 'Any user', value, onChange }: Mem
         <LemonDropdown
             closeOnClickInside={false}
             visible={showPopover}
-            sameWidth={false}
+            matchWidth={false}
             actionable
             onVisibilityChange={(visible) => setShowPopover(visible)}
             overlay={

diff --git a/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx b/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx
@@ -96,7 +96,7 @@ export function TaxonomicPopover<ValueType extends TaxonomicFilterValue = Taxono
                     excludedProperties={excludedProperties}
                 />
             }
-            sameWidth={false}
+            matchWidth={false}
             actionable
             visible={visible}
             onClickOutside={() => {

diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx
@@ -386,7 +386,7 @@ WithDropdownToTheBottom.args = {
             </>
         ),
         placement: 'bottom',
-        sameWidth: true,
+        matchWidth: true,
     },
 }
 
@@ -404,7 +404,7 @@ WithVeryLongPopoverToTheBottom.args = {
             </>
         ),
         placement: 'bottom',
-        sameWidth: true,
+        matchWidth: true,
     },
 }
 

diff --git a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
@@ -244,7 +244,7 @@ export function LemonInputSelect({
 
     return (
         <LemonDropdown
-            sameWidth
+            matchWidth
             closeOnClickInside={false}
             actionable
             visible={showPopover}

diff --git a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
@@ -66,7 +66,7 @@ export interface LemonMenuProps
             LemonDropdownProps,
             | 'placement'
             | 'fallbackPlacements'
-            | 'sameWidth'
+            | 'matchWidth'
             | 'maxContentWidth'
             | 'visible'
             | 'onVisibilityChange'

diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
@@ -130,7 +130,7 @@ export function LemonSelect<T extends string | number | boolean | null>({
         <LemonMenu
             items={items}
             tooltipPlacement={optionTooltipPlacement}
-            sameWidth={dropdownMatchSelectWidth}
+            matchWidth={dropdownMatchSelectWidth}
             placement={dropdownPlacement}
             className={menu?.className}
             maxContentWidth={dropdownMaxContentWidth}

diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.tsx b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
@@ -40,8 +40,8 @@ export interface PopoverProps {
     fallbackPlacements?: Placement[]
     /** Whether the popover is actionable rather than just informative - actionable means a colored border. */
     actionable?: boolean
-    /** Whether the popover's width should be synced with the children's width. */
-    sameWidth?: boolean
+    /** Whether the popover's width should be synced with the children's width or bigger. */
+    matchWidth?: boolean
     maxContentWidth?: boolean
     className?: string
     /** Whether default box padding should be applies. @default true */
@@ -89,7 +89,7 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
         className,
         padded = true,
         middleware,
-        sameWidth = false,
+        matchWidth = false,
         maxContentWidth = false,
         additionalRefs = [],
         closeParentPopoverOnClickInside = false,
@@ -131,7 +131,10 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
                 apply({ availableWidth, availableHeight, rects, elements: { floating } }) {
                     floating.style.maxHeight = `${availableHeight}px`
                     floating.style.maxWidth = `${availableWidth}px`
-                    floating.style.width = sameWidth ? `${rects.reference.width}px` : 'initial'
+                    floating.style.width = 'initial'
+                    if (matchWidth) {
+                        floating.style.minWidth = `${rects.reference.width}px`
+                    }
                 },
             }),
             ...(showArrow ? [arrow({ element: arrowRef, padding: 8 })] : []),

diff --git a/frontend/src/queries/nodes/DataTable/SavedQueries.tsx b/frontend/src/queries/nodes/DataTable/SavedQueries.tsx
@@ -34,7 +34,7 @@ export function SavedQueries({ query, setQuery }: SavedQueriesProps): JSX.Elemen
     return (
         <LemonButtonWithDropdown
             dropdown={{
-                sameWidth: false,
+                matchWidth: false,
                 overlay: Object.entries(eventsQueries).map(([title, eventsQuery]) => (
                     <LemonButton
                         key={title}

diff --git a/frontend/src/scenes/insights/EditorFilters/PathsEventTypes.tsx b/frontend/src/scenes/insights/EditorFilters/PathsEventTypes.tsx
@@ -60,7 +60,7 @@ export function PathsEventsTypes({ insightProps }: EditorFilterProps): JSX.Eleme
             fullWidth
             type="secondary"
             dropdown={{
-                sameWidth: true,
+                matchWidth: true,
                 closeOnClickInside: false,
                 overlay: options.map((option) => (
                     <LemonButton

diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelBinsPicker.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelBinsPicker.tsx
@@ -90,7 +90,7 @@ export function FunnelBinsPicker(): JSX.Element {
         <>
             <LemonDropdown
                 data-attr="funnel-bin-filter"
-                sameWidth
+                matchWidth
                 visible={visible}
                 closeOnClickInside={false}
                 onClickOutside={() => setVisible(false)}

diff --git a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx
@@ -212,7 +212,7 @@ export function NotebookSelectPopover({
                     <NotebookSelectList {...props} onNotebookOpened={onNotebookOpened} />
                 </div>
             }
-            sameWidth={false}
+            matchWidth={false}
             actionable
             visible={!!showPopover}
             onVisibilityChange={(visible) => setShowPopover(visible)}

diff --git a/frontend/src/scenes/session-recordings/filters/AdvancedSessionRecordingsFilters.tsx b/frontend/src/scenes/session-recordings/filters/AdvancedSessionRecordingsFilters.tsx
@@ -159,7 +159,7 @@ function ConsoleFilters({
                 data-attr="console-filters"
                 fullWidth={true}
                 dropdown={{
-                    sameWidth: true,
+                    matchWidth: true,
                     closeOnClickInside: false,
                     overlay: [
                         <>

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -3042,7 +3042,7 @@ interface BreadcrumbBase {
     /** Symbol, e.g. a lettermark or a profile picture. */
     symbol?: React.ReactNode
     /** Whether to show a custom popover */
-    popover?: Pick<PopoverProps, 'overlay' | 'sameWidth'>
+    popover?: Pick<PopoverProps, 'overlay' | 'matchWidth'>
 }
 interface LinkBreadcrumb extends BreadcrumbBase {
     /** Path to link to. */