m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 09:23:21 +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,
} 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({
dataTestId,
className,

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

@ -1,4 +1,5 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
TypographyVariant,
@ -7,8 +8,10 @@ import {
BorderColor,
BackgroundColor,
TextColor,
Severity,
} from '../../../helpers/constants/design-system';
import { BannerAlert } from '../../component-library';
import ApproveIcon from '../icon/approve-icon.component';
import InfoIcon from '../icon/info-icon.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';
@ -105,47 +128,56 @@ DefaultStory.args = {
};
export const WithLeftIcon = () => (
<Chip
label="Done!"
borderColor={BorderColor.successDefault}
leftIcon={<ApproveIcon size={24} color="var(--color-success-default)" />}
/>
<Deprecated>
<Chip
label="Done!"
borderColor={BorderColor.successDefault}
leftIcon={<ApproveIcon size={24} color="var(--color-success-default)" />}
/>
</Deprecated>
);
export const WithRightIcon = () => (
<Chip
label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
borderColor={BorderColor.borderDefault}
rightIcon={
<Identicon
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
diameter={25}
/>
}
/>
<Deprecated>
<Chip
label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
borderColor={BorderColor.borderDefault}
rightIcon={
<Identicon
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
diameter={25}
/>
}
/>
</Deprecated>
);
export const WithBothIcons = () => (
<Chip
label="Account 1"
borderColor={BorderColor.borderDefault}
rightIcon={<InfoIcon size={24} severity={SEVERITIES.INFO} />}
leftIcon={
<Identicon
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
diameter={25}
/>
}
/>
<Deprecated>
<Chip
label="Account 1"
borderColor={BorderColor.borderDefault}
rightIcon={<InfoIcon size={24} severity={SEVERITIES.INFO} />}
leftIcon={
<Identicon
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
diameter={25}
/>
}
/>
</Deprecated>
);
export const WithInput = (args) => {
const [inputValue, setInputValue] = useState('Chip with input');
return (
<ChipWithInput
{...args}
inputValue={inputValue}
setInputValue={setInputValue}
/>
<Deprecated>
<ChipWithInput
{...args}
inputValue={inputValue}
setInputValue={setInputValue}
/>
</Deprecated>
);
};