Skip to content

Commit 153cf50

Browse files
vuluongj20getsantry[bot]
vuluongj20
and
getsantry[bot]
authored
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>
1 parent 044e180 commit 153cf50

File tree

17 files changed

+139
-53
lines changed

17 files changed

+139
-53
lines changed

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import {useTheme} from '@emotion/react';
2+
import styled from '@emotion/styled';
3+
import {FocusScope} from '@react-aria/focus';
4+
import {AnimatePresence} from 'framer-motion';
5+
6+
import DropdownButton from 'sentry/components/dropdownButton';
7+
import {Overlay, PositionWrapper} from 'sentry/components/overlay';
8+
import space from 'sentry/styles/space';
9+
import useOverlay from 'sentry/utils/useOverlay';
10+
11+
export default {
12+
title: 'Components/Buttons/Dropdowns/Overlay',
13+
args: {
14+
offset: 8,
15+
position: 'bottom',
16+
animated: true,
17+
},
18+
argTypes: {
19+
position: {
20+
options: [
21+
'top',
22+
'bottom',
23+
'left',
24+
'right',
25+
'top-start',
26+
'top-end',
27+
'bottom-start',
28+
'bottom-end',
29+
'left-start',
30+
'left-end',
31+
'right-start',
32+
'right-end',
33+
],
34+
control: {type: 'radio'},
35+
},
36+
},
37+
};
38+
39+
export const _Overlay = ({animated, ...args}) => {
40+
const {isOpen, triggerProps, overlayProps, arrowProps} = useOverlay(args);
41+
const theme = useTheme();
42+
43+
return (
44+
<div>
45+
<DropdownButton {...triggerProps}>Show Overlay</DropdownButton>
46+
<AnimatePresence>
47+
{isOpen && (
48+
<FocusScope contain restoreFocus autoFocus>
49+
<PositionWrapper zIndex={theme.zIndex.dropdown} {...overlayProps}>
50+
<StyledOverlay arrowProps={arrowProps} animated={animated}>
51+
<TextSample>Overlay Content</TextSample>
52+
</StyledOverlay>
53+
</PositionWrapper>
54+
</FocusScope>
55+
)}
56+
</AnimatePresence>
57+
</div>
58+
);
59+
};
60+
61+
const StyledOverlay = styled(Overlay)`
62+
padding: ${space(1)} ${space(1.5)};
63+
`;
64+
65+
const TextSample = styled('p')`
66+
margin: 0;
67+
color: ${p => p.theme.subText};
68+
`;

‎static/app/components/autoComplete.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@
1010
*/
1111
import {Component} from 'react';
1212

13-
import DropdownMenu, {GetActorArgs, GetMenuArgs} from 'sentry/components/dropdownMenu';
13+
import DeprecatedDropdownMenu, {
14+
GetActorArgs,
15+
GetMenuArgs,
16+
} from 'sentry/components/deprecatedDropdownMenu';
1417

1518
const defaultProps = {
1619
itemToString: () => '',
@@ -57,7 +60,7 @@ type GetItemArgs<T> = {
5760
onClick?: (item: T) => (e: React.MouseEvent) => void;
5861
};
5962

60-
type ChildrenProps<T> = Parameters<DropdownMenu['props']['children']>[0] & {
63+
type ChildrenProps<T> = Parameters<DeprecatedDropdownMenu['props']['children']>[0] & {
6164
/**
6265
* Returns props for the input element that handles searching the items
6366
*/
@@ -252,7 +255,7 @@ class AutoComplete<T extends Item> extends Component<Props<T>, State<T>> {
252255
* is blurred (i.e. clicking or via keyboard). However we have to handle the
253256
* case when we want to click on the dropdown and causes focus.
254257
*
255-
* Clicks outside should close the dropdown immediately via <DropdownMenu />,
258+
* Clicks outside should close the dropdown immediately via <DeprecatedDropdownMenu />,
256259
* however blur via keyboard will have a 200ms delay
257260
*/
258261
makehandleInputBlur<E extends HTMLInputElement>(onBlur: GetInputArgs<E>['onBlur']) {
@@ -462,7 +465,7 @@ class AutoComplete<T extends Item> extends Component<Props<T>, State<T>> {
462465
const isOpen = this.isOpen;
463466

464467
return (
465-
<DropdownMenu
468+
<DeprecatedDropdownMenu
466469
isOpen={isOpen}
467470
onClickOutside={this.handleClickOutside}
468471
onOpen={onMenuOpen}
@@ -497,7 +500,7 @@ class AutoComplete<T extends Item> extends Component<Props<T>, State<T>> {
497500
},
498501
})
499502
}
500-
</DropdownMenu>
503+
</DeprecatedDropdownMenu>
501504
);
502505
}
503506
}

‎static/app/components/dropdownMenu.tsx‎ renamed to ‎static/app/components/deprecatedDropdownMenu.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,21 @@ type State = {
111111
isOpen: boolean;
112112
};
113113

114+
/**
115+
* Deprecated dropdown menu. Use these alternatives instead:
116+
*
117+
* - For a select menu: use `CompactSelect`
118+
* https://storybook.sentry.dev/?path=/story/components-forms-fields--compact-select-field
119+
*
120+
* - For an action menu (where there's no selection state, clicking on a menu
121+
* item will trigger an action): use `DropdownMenuControl`.
122+
*
123+
* - For for other menus/overlays: use a combination of `Overlay` and the
124+
* `useOverlay` hook.
125+
* https://storybook.sentry.dev/?path=/story/components-buttons-dropdowns-overlay--overlay
126+
*
127+
* @deprecated
128+
*/
114129
class DropdownMenu extends Component<Props, State> {
115130
static defaultProps: DefaultProps = {
116131
keepMenuOpen: false,

‎static/app/components/dropdownLink.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {css, useTheme} from '@emotion/react';
22
import classNames from 'classnames';
33

4-
import DropdownMenu from 'sentry/components/dropdownMenu';
4+
import DeprecatedDropdownMenu from 'sentry/components/deprecatedDropdownMenu';
55
import {IconChevron} from 'sentry/icons';
66
import {Theme} from 'sentry/utils/theme';
77

@@ -37,10 +37,10 @@ const getRootCss = (theme: Theme) => css`
3737
// `dropdown-actor` is a flexbox
3838

3939
type Props = Omit<
40-
Omit<DropdownMenu['props'], 'children'>,
41-
keyof typeof DropdownMenu.defaultProps
40+
Omit<DeprecatedDropdownMenu['props'], 'children'>,
41+
keyof typeof DeprecatedDropdownMenu.defaultProps
4242
> &
43-
Partial<typeof DropdownMenu.defaultProps> & {
43+
Partial<typeof DeprecatedDropdownMenu.defaultProps> & {
4444
children: React.ReactNode;
4545
/**
4646
* Always render children of dropdown menu, this is included to support menu
@@ -82,7 +82,7 @@ function DropdownLink({
8282
const theme = useTheme();
8383

8484
return (
85-
<DropdownMenu alwaysRenderMenu={alwaysRenderMenu} {...otherProps}>
85+
<DeprecatedDropdownMenu alwaysRenderMenu={alwaysRenderMenu} {...otherProps}>
8686
{({isOpen, getRootProps, getActorProps, getMenuProps}) => {
8787
const shouldRenderMenu = alwaysRenderMenu || isOpen;
8888
const cx = classNames('dropdown-actor', className, {
@@ -131,7 +131,7 @@ function DropdownLink({
131131
</span>
132132
);
133133
}}
134-
</DropdownMenu>
134+
</DeprecatedDropdownMenu>
135135
);
136136
}
137137

‎static/app/components/forms/datePickerField.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from '@emotion/styled';
22
import moment from 'moment';
33

4-
import DropdownMenu from 'sentry/components/dropdownMenu';
4+
import DeprecatedDropdownMenu from 'sentry/components/deprecatedDropdownMenu';
55
import {IconCalendar} from 'sentry/icons';
66
import {inputStyles} from 'sentry/styles/input';
77
import space from 'sentry/styles/space';
@@ -35,7 +35,7 @@ export default function DatePickerField(props: DatePickerFieldProps) {
3535
const dateString = moment(inputValue).format('LL');
3636

3737
return (
38-
<DropdownMenu keepMenuOpen>
38+
<DeprecatedDropdownMenu keepMenuOpen>
3939
{({isOpen, getRootProps, getActorProps, getMenuProps, actions}) => (
4040
<div {...getRootProps()}>
4141
<InputWrapper id={id} {...getActorProps()} isOpen={isOpen}>
@@ -57,7 +57,7 @@ export default function DatePickerField(props: DatePickerFieldProps) {
5757
)}
5858
</div>
5959
)}
60-
</DropdownMenu>
60+
</DeprecatedDropdownMenu>
6161
);
6262
}}
6363
/>

‎static/app/components/organizations/environmentSelector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import styled from '@emotion/styled';
66
import isEqual from 'lodash/isEqual';
77
import sortBy from 'lodash/sortBy';
88

9+
import {MenuActions} from 'sentry/components/deprecatedDropdownMenu';
910
import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete';
1011
import {MenuFooterChildProps} from 'sentry/components/dropdownAutoComplete/menu';
1112
import {Item} from 'sentry/components/dropdownAutoComplete/types';
12-
import {MenuActions} from 'sentry/components/dropdownMenu';
1313
import Highlight from 'sentry/components/highlight';
1414
import HeaderItem from 'sentry/components/organizations/headerItem';
1515
import MultipleSelectorSubmitRow from 'sentry/components/organizations/multipleSelectorSubmitRow';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import styled from '@emotion/styled';
66
import sortBy from 'lodash/sortBy';
77

88
import GuideAnchor from 'sentry/components/assistant/guideAnchor';
9+
import {MenuActions} from 'sentry/components/deprecatedDropdownMenu';
910
import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete';
10-
import {MenuActions} from 'sentry/components/dropdownMenu';
1111
import Link from 'sentry/components/links/link';
1212
import HeaderItem from 'sentry/components/organizations/headerItem';
1313
import PageFilterPinButton from 'sentry/components/organizations/pageFilters/pageFilterPinButton';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import {withRouter, WithRouterProps} from 'react-router';
44
import {ClassNames} from '@emotion/react';
55
import styled from '@emotion/styled';
66

7+
import {GetActorPropsFn} from 'sentry/components/deprecatedDropdownMenu';
78
import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete';
89
import autoCompleteFilter from 'sentry/components/dropdownAutoComplete/autoCompleteFilter';
910
import {Item} from 'sentry/components/dropdownAutoComplete/types';
10-
import {GetActorPropsFn} from 'sentry/components/dropdownMenu';
1111
import HookOrDefault from 'sentry/components/hookOrDefault';
1212
import HeaderItem from 'sentry/components/organizations/headerItem';
1313
import MultipleSelectorSubmitRow from 'sentry/components/organizations/multipleSelectorSubmitRow';

‎static/app/components/performance/teamKeyTransaction.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
55

66
import MenuHeader from 'sentry/components/actions/menuHeader';
77
import CheckboxFancy from 'sentry/components/checkboxFancy/checkboxFancy';
8-
import {GetActorPropsFn} from 'sentry/components/dropdownMenu';
8+
import {GetActorPropsFn} from 'sentry/components/deprecatedDropdownMenu';
99
import MenuItem from 'sentry/components/menuItem';
1010
import {TeamSelection} from 'sentry/components/performance/teamKeyTransactionsManager';
1111
import {t} from 'sentry/locale';

‎static/app/components/sidebar/help.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from '@emotion/styled';
22

33
import {openHelpSearchModal} from 'sentry/actionCreators/modal';
4-
import DropdownMenu from 'sentry/components/dropdownMenu';
4+
import DeprecatedDropdownMenu from 'sentry/components/deprecatedDropdownMenu';
55
import Hook from 'sentry/components/hook';
66
import SidebarItem from 'sentry/components/sidebar/sidebarItem';
77
import {IconQuestion} from 'sentry/icons';
@@ -18,7 +18,7 @@ type Props = Pick<CommonSidebarProps, 'collapsed' | 'hidePanel' | 'orientation'>
1818
};
1919

2020
const SidebarHelp = ({orientation, collapsed, hidePanel, organization}: Props) => (
21-
<DropdownMenu>
21+
<DeprecatedDropdownMenu>
2222
{({isOpen, getActorProps, getMenuProps}) => (
2323
<HelpRoot>
2424
<HelpActor {...getActorProps({onClick: hidePanel})}>
@@ -49,7 +49,7 @@ const SidebarHelp = ({orientation, collapsed, hidePanel, organization}: Props) =
4949
)}
5050
</HelpRoot>
5151
)}
52-
</DropdownMenu>
52+
</DeprecatedDropdownMenu>
5353
);
5454

5555
export default SidebarHelp;

0 commit comments

Comments
 (0)