m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-24 19:10:22 +01:00
Code

Added deprecatation comment to menu.js file and Add deprecation notice to storybook (#20622)

Browse Source
This commit is contained in:
Subhajit Ghosh 2023-08-29 08:01:19 +05:30 committed by GitHub
parent b6ad074b9a
commit 877e184b29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/components/ui/menu/menu.js
View File

@ -4,6 +4,15 @@ import { createPortal } from 'react-dom';
import { usePopper } from 'react-popper';
import classnames from 'classnames';
/**
* @deprecated The `<Menu />` component has been deprecated in favor of the new `<Popover>` component from the component-library.
* Please update your code to use the new `<Popover>` component instead, which can be found at ui/components/component-library/popover/popover.tsx.
* You can find documentation for the new `Popover` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-popover--docs}
* If you would like to help with the replacement of the old `Menu` component, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/20498}
*/
const Menu = ({
anchorElement,
children,

44
ui/components/ui/menu/menu.stories.js
View File

@ -1,23 +1,43 @@
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { IconName } from '../../component-library';
import PropTypes from 'prop-types';
import { IconName, BannerAlert } from '../../component-library';
import { Severity } from '../../../helpers/constants/design-system';
import { Menu, MenuItem } from '.';
export default {
title: 'Components/UI/Menu',
};
const Deprecated = ({ children }) => (
<>
<BannerAlert
severity={Severity.Warning}
title="Deprecated"
description="<Menu/> has been deprecated in favor of <Popover/>"
marginBottom={4}
/>
{children}
</>
);
Deprecated.propTypes = {
children: PropTypes.node,
};
export const DefaultStory = () => {
return (
<Menu onHide={action('Hide')}>
<MenuItem iconName={IconName.Eye} onClick={action('Menu Item 1')}>
Menu Item 1
</MenuItem>
<MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
<MenuItem iconName={IconName.EyeSlash} onClick={action('Menu Item 3')}>
Menu Item 3
</MenuItem>
</Menu>
<Deprecated>
<Menu onHide={action('Hide')}>
<MenuItem iconName={IconName.Eye} onClick={action('Menu Item 1')}>
Menu Item 1
</MenuItem>
<MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
<MenuItem iconName={IconName.EyeSlash} onClick={action('Menu Item 3')}>
Menu Item 3
</MenuItem>
</Menu>
</Deprecated>
);
};
@ -26,7 +46,7 @@ DefaultStory.storyName = 'Default';
export const Anchored = () => {
const [anchorElement, setAnchorElement] = useState(null);
return (
<>
<Deprecated>
<button ref={setAnchorElement}>Menu</button>
<Menu anchorElement={anchorElement} onHide={action('Hide')}>
<MenuItem iconName={IconName.Export} onClick={action('Menu Item 1')}>
@ -43,6 +63,6 @@ export const Anchored = () => {
Disabled Item
</MenuItem>
</Menu>
</>
</Deprecated>
);
};