ref(dropdownMenu): Mark as deprecated (#37319)

* ref(replay): Use CompactSelect for ChooseLayout dropdown

* ref(dropdownControl): Remove V1

* ref(storybook): Remove DropdownControl story

* ref(dropdownMenu): Mark as deprecated

* ref(dropdownMenu): Add deprecated as prefix not suffix

* ref(dropdownMenuList): Rename as DropdownMenuV2

* ref(dropdownMenu): Add storybook link to deprecation message

* style(lint): Auto commit lint changes

* style(lint): Auto commit lint changes

* style(lint): Auto commit lint changes

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

docs-ui/stories/components/overlay.stories.js

@@ -0,0 +1,68 @@
+import {useTheme} from '@emotion/react';
+import styled from '@emotion/styled';
+import {FocusScope} from '@react-aria/focus';
+import {AnimatePresence} from 'framer-motion';
+
+import DropdownButton from 'sentry/components/dropdownButton';
+import {Overlay, PositionWrapper} from 'sentry/components/overlay';
+import space from 'sentry/styles/space';
+import useOverlay from 'sentry/utils/useOverlay';
+
+export default {
+  title: 'Components/Buttons/Dropdowns/Overlay',
+  args: {
+    offset: 8,
+    position: 'bottom',
+    animated: true,
+  },
+  argTypes: {
+    position: {
+      options: [
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'top-start',
+        'top-end',
+        'bottom-start',
+        'bottom-end',
+        'left-start',
+        'left-end',
+        'right-start',
+        'right-end',
+      ],
+      control: {type: 'radio'},
+    },
+  },
+};
+
+export const _Overlay = ({animated, ...args}) => {
+  const {isOpen, triggerProps, overlayProps, arrowProps} = useOverlay(args);
+  const theme = useTheme();
+
+  return (
+    <div>
+      <DropdownButton {...triggerProps}>Show Overlay</DropdownButton>
+      <AnimatePresence>
+        {isOpen && (
+          <FocusScope contain restoreFocus autoFocus>
+            <PositionWrapper zIndex={theme.zIndex.dropdown} {...overlayProps}>
+              <StyledOverlay arrowProps={arrowProps} animated={animated}>
+                <TextSample>Overlay Content</TextSample>
+              </StyledOverlay>
+            </PositionWrapper>
+          </FocusScope>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+const StyledOverlay = styled(Overlay)`
+  padding: ${space(1)} ${space(1.5)};
+`;
+
+const TextSample = styled('p')`
+  margin: 0;
+  color: ${p => p.theme.subText};
+`;

static/app/components/autoComplete.tsx

@@ -10,7 +10,10 @@
  */
 import {Component} from 'react';
 
-import DropdownMenu, {GetActorArgs, GetMenuArgs} from 'sentry/components/dropdownMenu';
+import DeprecatedDropdownMenu, {
+  GetActorArgs,
+  GetMenuArgs,
+} from 'sentry/components/deprecatedDropdownMenu';
 
 const defaultProps = {
   itemToString: () => '',
@@ -57,7 +60,7 @@ type GetItemArgs<T> = {
   onClick?: (item: T) => (e: React.MouseEvent) => void;
 };
 
-type ChildrenProps<T> = Parameters<DropdownMenu['props']['children']>[0] & {
+type ChildrenProps<T> = Parameters<DeprecatedDropdownMenu['props']['children']>[0] & {
   /**
    * Returns props for the input element that handles searching the items
    */
@@ -252,7 +255,7 @@ class AutoComplete<T extends Item> extends Component<Props<T>, State<T>> {
    * is blurred (i.e. clicking or via keyboard). However we have to handle the
    * case when we want to click on the dropdown and causes focus.
    *
-   * Clicks outside should close the dropdown immediately via <DropdownMenu />,
+   * Clicks outside should close the dropdown immediately via <DeprecatedDropdownMenu />,
    * however blur via keyboard will have a 200ms delay
    */
   makehandleInputBlur<E extends HTMLInputElement>(onBlur: GetInputArgs<E>['onBlur']) {
@@ -462,7 +465,7 @@ class AutoComplete<T extends Item> extends Component<Props<T>, State<T>> {
     const isOpen = this.isOpen;
 
     return (
-      <DropdownMenu
+      <DeprecatedDropdownMenu
         isOpen={isOpen}
         onClickOutside={this.handleClickOutside}
         onOpen={onMenuOpen}
@@ -497,7 +500,7 @@ class AutoComplete<T extends Item> extends Component<Props<T>, State<T>> {
             },
           })
         }
-      </DropdownMenu>
+      </DeprecatedDropdownMenu>
     );
   }
 }

static/app/components/dropdownMenu.tsx → static/app/components/deprecatedDropdownMenu.tsx

@@ -111,6 +111,21 @@ type State = {
   isOpen: boolean;
 };
 
+/**
+ * Deprecated dropdown menu. Use these alternatives instead:
+ *
+ * - For a select menu: use `CompactSelect`
+ * https://storybook.sentry.dev/?path=/story/components-forms-fields--compact-select-field
+ *
+ * - For an action menu (where there's no selection state, clicking on a menu
+ * item will trigger an action): use `DropdownMenuControl`.
+ *
+ * - For for other menus/overlays: use a combination of `Overlay` and the
+ * `useOverlay` hook.
+ * https://storybook.sentry.dev/?path=/story/components-buttons-dropdowns-overlay--overlay
+ *
+ * @deprecated
+ */
 class DropdownMenu extends Component<Props, State> {
   static defaultProps: DefaultProps = {
     keepMenuOpen: false,

static/app/components/dropdownLink.tsx

@@ -1,7 +1,7 @@
 import {css, useTheme} from '@emotion/react';
 import classNames from 'classnames';
 
-import DropdownMenu from 'sentry/components/dropdownMenu';
+import DeprecatedDropdownMenu from 'sentry/components/deprecatedDropdownMenu';
 import {IconChevron} from 'sentry/icons';
 import {Theme} from 'sentry/utils/theme';
 
@@ -37,10 +37,10 @@ const getRootCss = (theme: Theme) => css`
 // `dropdown-actor` is a flexbox
 
 type Props = Omit<
-  Omit<DropdownMenu['props'], 'children'>,
-  keyof typeof DropdownMenu.defaultProps
+  Omit<DeprecatedDropdownMenu['props'], 'children'>,
+  keyof typeof DeprecatedDropdownMenu.defaultProps
 > &
-  Partial<typeof DropdownMenu.defaultProps> & {
+  Partial<typeof DeprecatedDropdownMenu.defaultProps> & {
     children: React.ReactNode;
     /**
      * Always render children of dropdown menu, this is included to support menu
@@ -82,7 +82,7 @@ function DropdownLink({
   const theme = useTheme();
 
   return (
-    <DropdownMenu alwaysRenderMenu={alwaysRenderMenu} {...otherProps}>
+    <DeprecatedDropdownMenu alwaysRenderMenu={alwaysRenderMenu} {...otherProps}>
       {({isOpen, getRootProps, getActorProps, getMenuProps}) => {
         const shouldRenderMenu = alwaysRenderMenu || isOpen;
         const cx = classNames('dropdown-actor', className, {
@@ -131,7 +131,7 @@ function DropdownLink({
           </span>
         );
       }}
-    </DropdownMenu>
+    </DeprecatedDropdownMenu>
   );
 }
 

static/app/components/forms/datePickerField.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import moment from 'moment';
 
-import DropdownMenu from 'sentry/components/dropdownMenu';
+import DeprecatedDropdownMenu from 'sentry/components/deprecatedDropdownMenu';
 import {IconCalendar} from 'sentry/icons';
 import {inputStyles} from 'sentry/styles/input';
 import space from 'sentry/styles/space';
@@ -35,7 +35,7 @@ export default function DatePickerField(props: DatePickerFieldProps) {
         const dateString = moment(inputValue).format('LL');
 
         return (
-          <DropdownMenu keepMenuOpen>
+          <DeprecatedDropdownMenu keepMenuOpen>
             {({isOpen, getRootProps, getActorProps, getMenuProps, actions}) => (
               <div {...getRootProps()}>
                 <InputWrapper id={id} {...getActorProps()} isOpen={isOpen}>
@@ -57,7 +57,7 @@ export default function DatePickerField(props: DatePickerFieldProps) {
                 )}
               </div>
             )}
-          </DropdownMenu>
+          </DeprecatedDropdownMenu>
         );
       }}
     />

static/app/components/organizations/environmentSelector.tsx

@@ -6,10 +6,10 @@ import styled from '@emotion/styled';
 import isEqual from 'lodash/isEqual';
 import sortBy from 'lodash/sortBy';
 
+import {MenuActions} from 'sentry/components/deprecatedDropdownMenu';
 import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete';
 import {MenuFooterChildProps} from 'sentry/components/dropdownAutoComplete/menu';
 import {Item} from 'sentry/components/dropdownAutoComplete/types';
-import {MenuActions} from 'sentry/components/dropdownMenu';
 import Highlight from 'sentry/components/highlight';
 import HeaderItem from 'sentry/components/organizations/headerItem';
 import MultipleSelectorSubmitRow from 'sentry/components/organizations/multipleSelectorSubmitRow';

static/app/components/organizations/projectSelector/index.tsx

@@ -6,8 +6,8 @@ import styled from '@emotion/styled';
 import sortBy from 'lodash/sortBy';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
+import {MenuActions} from 'sentry/components/deprecatedDropdownMenu';
 import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete';
-import {MenuActions} from 'sentry/components/dropdownMenu';
 import Link from 'sentry/components/links/link';
 import HeaderItem from 'sentry/components/organizations/headerItem';
 import PageFilterPinButton from 'sentry/components/organizations/pageFilters/pageFilterPinButton';

static/app/components/organizations/timeRangeSelector/index.tsx

@@ -4,10 +4,10 @@ import {withRouter, WithRouterProps} from 'react-router';
 import {ClassNames} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {GetActorPropsFn} from 'sentry/components/deprecatedDropdownMenu';
 import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete';
 import autoCompleteFilter from 'sentry/components/dropdownAutoComplete/autoCompleteFilter';
 import {Item} from 'sentry/components/dropdownAutoComplete/types';
-import {GetActorPropsFn} from 'sentry/components/dropdownMenu';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import HeaderItem from 'sentry/components/organizations/headerItem';
 import MultipleSelectorSubmitRow from 'sentry/components/organizations/multipleSelectorSubmitRow';

static/app/components/performance/teamKeyTransaction.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 
 import MenuHeader from 'sentry/components/actions/menuHeader';
 import CheckboxFancy from 'sentry/components/checkboxFancy/checkboxFancy';
-import {GetActorPropsFn} from 'sentry/components/dropdownMenu';
+import {GetActorPropsFn} from 'sentry/components/deprecatedDropdownMenu';
 import MenuItem from 'sentry/components/menuItem';
 import {TeamSelection} from 'sentry/components/performance/teamKeyTransactionsManager';
 import {t} from 'sentry/locale';

static/app/components/sidebar/help.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import {openHelpSearchModal} from 'sentry/actionCreators/modal';
-import DropdownMenu from 'sentry/components/dropdownMenu';
+import DeprecatedDropdownMenu from 'sentry/components/deprecatedDropdownMenu';
 import Hook from 'sentry/components/hook';
 import SidebarItem from 'sentry/components/sidebar/sidebarItem';
 import {IconQuestion} from 'sentry/icons';
@@ -18,7 +18,7 @@ type Props = Pick<CommonSidebarProps, 'collapsed' | 'hidePanel' | 'orientation'>
 };
 
 const SidebarHelp = ({orientation, collapsed, hidePanel, organization}: Props) => (
-  <DropdownMenu>
+  <DeprecatedDropdownMenu>
     {({isOpen, getActorProps, getMenuProps}) => (
       <HelpRoot>
         <HelpActor {...getActorProps({onClick: hidePanel})}>
@@ -49,7 +49,7 @@ const SidebarHelp = ({orientation, collapsed, hidePanel, organization}: Props) =
         )}
       </HelpRoot>
     )}
-  </DropdownMenu>
+  </DeprecatedDropdownMenu>
 );
 
 export default SidebarHelp;