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

text-field (#12889)

Browse Source
This commit is contained in:
Etienne Dusseault 2021-12-08 01:57:23 +08:00 committed by GitHub
parent 5273aa334e
commit 51fa7734fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 134 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ui/components/ui/text-field/README.mdx Normal file
View File

@ -0,0 +1,51 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import TextField from '.';
# Text Field
Text fields allow users to enter text into a UI.
<Canvas>
<Story id="ui-components-ui-text-field-text-field-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={TextField} />
### Password Text Field
<Canvas>
<Story id="ui-components-ui-text-field-text-field-stories-js--password" />
</Canvas>
### With Error
<Canvas>
<Story id="ui-components-ui-text-field-text-field-stories-js--error" />
</Canvas>
### Mascara Text
<Canvas>
<Story id="ui-components-ui-text-field-text-field-stories-js--mascara-text" />
</Canvas>
### With Material Theme
<Canvas>
<Story id="ui-components-ui-text-field-text-field-stories-js--material-text" />
</Canvas>
### Password With Material Theme
<Canvas>
<Story id="ui-components-ui-text-field-text-field-stories-js--material-password" />
</Canvas>
### With Material Theme Error
<Canvas>
<Story id="ui-components-ui-text-field-text-field-stories-js--material-error" />
</Canvas>

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

@ -243,14 +243,35 @@ TextField.defaultProps = {
};
TextField.propTypes = {
/**
* Show error message
*/
error: PropTypes.string,
/**
* Add custom CSS class
*/
classes: PropTypes.object,
dir: PropTypes.string,
/**
* Give theme to the text field
*/
theme: PropTypes.oneOf(['bordered', 'material', 'material-white-padded']),
startAdornment: PropTypes.element,
/**
* Show large label
*/
largeLabel: PropTypes.bool,
/**
* Define min number input
*/
min: PropTypes.number,
/**
* Define max number input
*/
max: PropTypes.number,
/**
* Show auto complete text
*/
autoComplete: PropTypes.string,
onPaste: PropTypes.func,
};

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

@ -1,33 +1,75 @@
import React from 'react';
import README from './README.mdx';
import TextField from '.';
export default {
title: 'Components/UI/TextField',
id: __filename,
component: TextField,
parameters: {
docs: {
page: README,
},
},
argTypes: {
error: { control: 'text' },
classes: { control: 'object' },
dir: { control: 'text' },
theme: {
control: 'select',
options: ['bordered', 'material', 'material-white-padded'],
},
startAdornment: { control: 'element' },
largeLabel: { control: 'boolean' },
min: { control: 'number' },
max: { control: 'number' },
autoComplete: { control: 'text' },
},
};
export const DefaultStory = () => <TextField label="Text" type="text" />;
export const DefaultStory = (args) => <TextField {...args} />;
DefaultStory.storyName = 'Default';
DefaultStory.args = {
label: 'Text',
type: 'text',
};
export const Password = () => <TextField label="Password" type="password" />;
export const Password = (args) => <TextField {...args} />;
Password.args = {
label: 'Password',
type: 'password',
};
export const Error = (args) => <TextField {...args} />;
Error.args = {
type: 'text',
label: 'Name',
error: 'Invalid Value',
};
export const MascaraText = (args) => <TextField {...args} />;
MascaraText.args = {
label: 'Text',
type: 'text',
largeLabel: true,
};
export const Error = () => (
<TextField type="text" label="Name" error="Invalid value" />
);
export const MaterialText = (args) => <TextField {...args} />;
MaterialText.args = {
label: 'Text',
type: 'text',
theme: 'material',
};
export const MascaraText = () => (
<TextField label="Text" type="text" largeLabel />
);
export const MaterialPassword = (args) => <TextField {...args} />;
MaterialPassword.args = {
label: 'Password',
type: 'password',
theme: 'material',
};
export const MaterialText = () => (
<TextField label="Text" type="text" theme="material" />
);
export const MaterialPassword = () => (
<TextField label="Password" type="password" theme="material" />
);
export const MaterialError = () => (
<TextField type="text" label="Name" error="Invalid value" theme="material" />
);
export const MaterialError = (args) => <TextField {...args} />;
MaterialError.args = {
type: 'text',
label: 'Name',
error: 'Invalid Value',
theme: 'material',
};