feat(dropdownMenu): Add `minMenuWidth` prop (#41040)

**Before:**
<img width="334" alt="Screen Shot 2022-11-04 at 2 36 03 PM"
src="https://user-images.githubusercontent.com/44172267/200078567-62d76845-18bc-43d3-946a-86485ffbab38.png">

**After:**
<img width="334" alt="Screen Shot 2022-11-04 at 2 35 39 PM"
src="https://user-images.githubusercontent.com/44172267/200078510-1649e7fe-f8bf-4ae6-b16d-aa4d5665a2b5.png">

static/app/components/dropdownMenu.tsx

@@ -40,20 +40,19 @@ type Props = {
    * Title to display on top of the menu
    */
   menuTitle?: string;
-  onClose?: () => void;
-  size?: MenuItemProps['size'];
   /**
-   * Current width of the trigger element. This is used as the menu's minimum
-   * width.
+   * Minimum menu width
    */
-  triggerWidth?: number;
+  minWidth?: number;
+  onClose?: () => void;
+  size?: MenuItemProps['size'];
 } & AriaMenuOptions<MenuItemProps> &
   Partial<OverlayProps> &
   Partial<AriaPositionProps>;
 
 function DropdownMenu({
   closeOnSelect = true,
-  triggerWidth,
+  minWidth,
   size,
   isSubmenu,
   menuTitle,
@@ -201,7 +200,7 @@ function DropdownMenu({
             {...mergeProps(modifiedMenuProps, keyboardProps)}
             style={{
               maxHeight: overlayPositionProps.style?.maxHeight,
-              minWidth: triggerWidth,
+              minWidth,
             }}
           >
             {menuTitle && <MenuTitle>{menuTitle}</MenuTitle>}

static/app/components/dropdownMenuControl.tsx

@@ -79,6 +79,10 @@ interface Props
    * Title for the current menu.
    */
   menuTitle?: string;
+  /**
+   * Minimum menu width, in pixels
+   */
+  minMenuWidth?: number;
   /**
    * Tag name for the outer wrap, defaults to `div`
    */
@@ -123,6 +127,7 @@ function DropdownMenuControl({
   triggerProps = {},
   isDisabled: disabledProp,
   isOpen: isOpenProp,
+  minMenuWidth,
   isSubmenu = false,
   closeRootMenu,
   closeCurrentSubmenu,
@@ -239,8 +244,8 @@ function DropdownMenuControl({
         {...props}
         {...menuProps}
         size={size}
-        triggerWidth={triggerWidth}
         isSubmenu={isSubmenu}
+        minWidth={Math.max(minMenuWidth ?? 0, triggerWidth ?? 0)}
         closeRootMenu={closeRootMenu ?? state.close}
         closeCurrentSubmenu={closeCurrentSubmenu}
         disabledKeys={disabledKeys ?? defaultDisabledKeys}

static/app/views/issueList/savedIssueSearches.tsx

@@ -94,6 +94,7 @@ const SavedSearchItem = ({
           position="bottom-end"
           items={actions}
           size="sm"
+          minMenuWidth={200}
           trigger={props => (
             <Button
               {...props}