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

20488: Declare <Chip/> as deprecated (#20579)

Browse Source 
* Add @deprecated JSDoc to <Chip/>

* Add deprecated banner to <Chip/> stories

* Fix linting error

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Import 'Severity' via existing import statement

* Add propTypes for <Deprecated/> wrapper

---------

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
This commit is contained in:
Jase Balderrama 2023-08-28 12:12:28 -07:00 committed by GitHub
parent 4c88961a39
commit c54212916b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 73 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,15 @@ import {
TypographyVariant, TypographyVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
/**
* @deprecated The `<Chip />` component has been deprecated in favor of the new `<Tag>` component from the component-library.
* Please update your code to use the new `<Tag>` component instead, which can be found at ui/components/component-library/tag/tag.tsx.
* You can find documentation for the new `Tag` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-tag--docs}
* If you would like to help with the replacement of the old `Chip` component, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/20487}
*/
export default function Chip({ export default function Chip({
dataTestId, dataTestId,
className, className,

96
ui/components/ui/chip/chip.stories.js
View File

@ -1,4 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { import {
TypographyVariant, TypographyVariant,
@ -7,8 +8,10 @@ import {
BorderColor, BorderColor,
BackgroundColor, BackgroundColor,
TextColor, TextColor,
Severity,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { BannerAlert } from '../../component-library';
import ApproveIcon from '../icon/approve-icon.component'; import ApproveIcon from '../icon/approve-icon.component';
import InfoIcon from '../icon/info-icon.component'; import InfoIcon from '../icon/info-icon.component';
import Identicon from '../identicon/identicon.component'; import Identicon from '../identicon/identicon.component';
@ -90,7 +93,27 @@ export default {
}, },
}; };
export const DefaultStory = (args) => <Chip {...args} />; const Deprecated = ({ children }) => (
<>
<BannerAlert
severity={Severity.Warning}
title="Deprecated"
description="<Chip/> has been deprecated in favor of <Tag/>"
marginBottom={4}
/>
{children}
</>
);
Deprecated.propTypes = {
children: PropTypes.node,
};
export const DefaultStory = (args) => (
<Deprecated>
<Chip {...args} />
</Deprecated>
);
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
@ -105,47 +128,56 @@ DefaultStory.args = {
}; };
export const WithLeftIcon = () => ( export const WithLeftIcon = () => (
<Chip <Deprecated>
label="Done!" <Chip
borderColor={BorderColor.successDefault} label="Done!"
leftIcon={<ApproveIcon size={24} color="var(--color-success-default)" />} borderColor={BorderColor.successDefault}
/> leftIcon={<ApproveIcon size={24} color="var(--color-success-default)" />}
/>
</Deprecated>
); );
export const WithRightIcon = () => ( export const WithRightIcon = () => (
<Chip <Deprecated>
label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" <Chip
borderColor={BorderColor.borderDefault} label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
rightIcon={ borderColor={BorderColor.borderDefault}
<Identicon rightIcon={
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" <Identicon
diameter={25} address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/> diameter={25}
} />
/> }
/>
</Deprecated>
); );
export const WithBothIcons = () => ( export const WithBothIcons = () => (
<Chip <Deprecated>
label="Account 1" <Chip
borderColor={BorderColor.borderDefault} label="Account 1"
rightIcon={<InfoIcon size={24} severity={SEVERITIES.INFO} />} borderColor={BorderColor.borderDefault}
leftIcon={ rightIcon={<InfoIcon size={24} severity={SEVERITIES.INFO} />}
<Identicon leftIcon={
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" <Identicon
diameter={25} address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/> diameter={25}
} />
/> }
/>
</Deprecated>
); );
export const WithInput = (args) => { export const WithInput = (args) => {
const [inputValue, setInputValue] = useState('Chip with input'); const [inputValue, setInputValue] = useState('Chip with input');
return ( return (
<ChipWithInput <Deprecated>
{...args} <ChipWithInput
inputValue={inputValue} {...args}
setInputValue={setInputValue} inputValue={inputValue}
/> setInputValue={setInputValue}
/>
</Deprecated>
); );
}; };