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

Declared <TextField/> as deprecated (#20640)

Browse Source 
* Declared <TextField/> as deprecated

* Declared <TextField/> as deprecated
This commit is contained in:
Subhajit Ghosh 2023-08-30 08:08:20 +05:30 committed by GitHub
parent 827c2fb741
commit 131321af00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/components/ui/text-field/text-field.component.js
View File

@ -3,6 +3,15 @@ import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MaterialTextField from '@material-ui/core/TextField';
/**
* @deprecated The `<TextField />` component has been deprecated in favor of the new `<TextField>` component from the component-library.
* Please update your code to use the new `<TextField>` component instead, which can be found at ui/components/component-library/text-field/text-field.js.
* You can find documentation for the new `TextField` component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-textfield--docs}
* If you would like to help with the replacement of the old `TextField` component, please submit a pull request against this GitHub issue:
* {@link https://github.com/MetaMask/metamask-extension/issues/20483}
*/
const inputLabelBase = {
transform: 'none',
transition: 'none',

61
ui/components/ui/text-field/text-field.stories.js
View File

@ -1,7 +1,26 @@
import React from 'react';
import PropTypes from 'prop-types';
import { BannerAlert } from '../../component-library';
import { Severity } from '../../../helpers/constants/design-system';
import README from './README.mdx';
import TextField from '.';
const Deprecated = ({ children }) => (
<>
<BannerAlert
severity={Severity.Warning}
title="Deprecated"
description="<TextField/> has been deprecated in favor of <TextField/>"
marginBottom={4}
/>
{children}
</>
);
Deprecated.propTypes = {
children: PropTypes.node,
};
export default {
title: 'Components/UI/TextField',
@ -27,46 +46,74 @@ export default {
},
};
export const DefaultStory = (args) => <TextField {...args} />;
export const DefaultStory = (args) => (
<Deprecated>
<TextField {...args} />
</Deprecated>
);
DefaultStory.storyName = 'Default';
DefaultStory.args = {
label: 'Text',
type: 'text',
};
export const Password = (args) => <TextField {...args} />;
export const Password = (args) => (
<Deprecated>
<TextField {...args} />
</Deprecated>
);
Password.args = {
label: 'Password',
type: 'password',
};
export const TextError = (args) => <TextField {...args} />;
export const TextError = (args) => (
<Deprecated>
<TextField {...args} />
</Deprecated>
);
TextError.args = {
type: 'text',
label: 'Name',
error: 'Invalid Value',
};
export const MascaraText = (args) => <TextField {...args} />;
export const MascaraText = (args) => (
<Deprecated>
<TextField {...args} />
</Deprecated>
);
MascaraText.args = {
label: 'Text',
type: 'text',
largeLabel: true,
};
export const MaterialText = (args) => <TextField {...args} />;
export const MaterialText = (args) => (
<Deprecated>
<TextField {...args} />
</Deprecated>
);
MaterialText.args = {
label: 'Text',
type: 'text',
theme: 'material',
};
export const MaterialPassword = (args) => <TextField {...args} />;
export const MaterialPassword = (args) => (
<Deprecated>
<TextField {...args} />
</Deprecated>
);
MaterialPassword.args = {
label: 'Password',
type: 'password',
theme: 'material',
};
export const MaterialError = (args) => <TextField {...args} />;
export const MaterialError = (args) => (
<Deprecated>
<TextField {...args} />
</Deprecated>
);
MaterialError.args = {
type: 'text',
label: 'Name',