1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/text-field-base/README.mdx
George Marshall 971f153e65
TextFieldBase house keeping 🧹 (#16667)
* TextFieldBase house keeping updates

* Fixing story

* Updating custom input story

* Updating ButtonIcon props and lint issues

* Updating snapshots
2022-12-06 11:51:48 -08:00

338 lines
8.0 KiB
Plaintext

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { TextFieldBase } from './text-field-base';
### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components
# TextFieldBase
The `TextFieldBase` is the base component for all text fields. It should not be used directly. It functions as both a uncontrolled and controlled input.
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--default-story" />
</Canvas>
## Props
The `TextFieldBase` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
<ArgsTable of={TextFieldBase} />
### Size
Use the `size` prop to set the height of the `TextFieldBase`.
Possible sizes include:
- `sm` 32px
- `md` 40px
- `lg` 48px
Defaults to `md`
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--size" />
</Canvas>
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { TextFieldBase } from '../../component-library';
<TextFieldBase size={SIZES.SM} />
<TextFieldBase size={SIZES.MD} />
<TextFieldBase size={SIZES.LG} />
```
### Type
Use the `type` prop to change the type of input.
Possible types include:
- `text`
- `number`
- `password`
Defaults to `text`.
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--type" />
</Canvas>
```jsx
import { TextFieldBase } from '../../component-library';
<TextFieldBase type="text" /> // (Default)
<TextFieldBase type="number" />
<TextFieldBase type="password" />
```
### Truncate
Use the `truncate` prop to truncate the text of the the `TextFieldBase`. Defaults to `true`.
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--truncate" />
</Canvas>
```jsx
import { TextFieldBase } from '../../component-library';
<TextFieldBase truncate />; // truncate is set to `true` by default
<TextFieldBase truncate={false} />;
```
### Left Accessory Right Accessory
Use the `leftAccessory` and `rightAccessory` props to add components such as icons or buttons to either side of the `TextFieldBase`.
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--left-accessory-right-accessory" />
</Canvas>
```jsx
import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
import { ButtonIcon, Icon, ICON_NAMES, TextFieldBase } from '../../component-library';
<TextFieldBase
placeholder="Search"
leftAccessory={
<Icon
color={COLORS.ICON_ALTERNATIVE}
name={ICON_NAMES.SEARCH_FILLED}
/>
}
/>
<TextFieldBase
placeholder="Public address (0x), or ENS"
rightAccessory={
<ButtonIcon
iconName={ICON_NAMES.SCAN_BARCODE_FILLED}
ariaLabel="Scan QR code"
iconProps={{ color: COLORS.PRIMARY_DEFAULT }}
/>
}
/>
<TextFieldBase
placeholder="Enter amount"
type="number"
truncate
leftAccessory={<SelectTokenComponent />}
rightAccessory={<TokenValueInUSDComponent />}
/>
<TextFieldBase
placeholder="Public address (0x), or ENS"
truncate
leftAccessory={<AvatarAccount />}
rightAccessory={
isAddressValid && (
<Icon
name={ICON_NAMES.CHECK_OUTLINE}
color={COLORS.SUCCESS_DEFAULT}
/>
)
}
/>
```
### Input Ref
Use the `inputRef` prop to access the ref of the `<input />` html element of `TextFieldBase`. This is useful for focusing the input from a button or other component.
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--input-ref" />
</Canvas>
```jsx
import { Button, TextFieldBase } from '../../component-library';
const inputRef = useRef(null);
const [value, setValue] = useState('');
const handleOnClick = () => {
inputRef.current.focus();
};
const handleOnChange = (e) => {
setValue(e.target.value);
};
<TextFieldBase
inputRef={inputRef}
value={value}
onChange={handleOnChange}
/>
<Button marginLeft={1} onClick={handleOnClick}>
Edit
</Button>
```
### Input Component
Use the `InputComponent` prop change the component used for the input element. This is useful for replacing the base input with a custom input while retaining the functionality of the `TextFieldBase`.
Defaults to the [Text](/docs/ui-components-component-library-text-text-stories-js--default-story) component
To function fully the custom component should accept the following props:
- `aria-invalid`
- `as`
- `autoComplete`
- `autoFocus`
- `backgroundColor`
- `defaultValue`
- `disabled`
- `focused`
- `id`
- `margin`
- `maxLength`
- `name`
- `onBlur`
- `onChange`
- `onFocus`
- `padding`
- `paddingLeft`
- `paddingRight`
- `placeholder`
- `readOnly`
- `ref`
- `required`
- `value`
- `variant`
- `type`
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--input-component" />
</Canvas>
```jsx
import { TextFieldBase, Icon, ICON_NAMES } from '../../component-library';
// should map the props to the custom input component
const CustomInputComponent = () => <div>{/* Custom input component */}</div>;
const TextFieldCustomInput = (args) => (
<TextFieldBase
size={SIZES.LG}
InputComponent={CustomInputComponent}
leftAccessory={
<Icon color={COLORS.ICON_ALTERNATIVE} name={ICON_NAMES.WALLET_FILLED} />
}
/>
);
```
### Auto Complete
Use the `autoComplete` prop to set the autocomplete html attribute. It allows the browser to predict the value based on earlier typed values.
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--auto-complete" />
</Canvas>
```jsx
import { TextFieldBase } from '../../component-library';
<TextFieldBase type="password" autoComplete />;
```
### Auto Focus
Use the `autoFocus` prop to focus the `TextFieldBase` during the first mount
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--auto-focus" />
</Canvas>
```jsx
import { TextFieldBase } from '../../component-library';
<TextFieldBase autoFocus />;
```
### Default Value
Use the `defaultValue` prop to set the default value of the `TextFieldBase`
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--default-value" />
</Canvas>
```jsx
import { TextFieldBase } from '../../component-library';
<TextFieldBase defaultValue="default value" />;
```
### Disabled
Use the `disabled` prop to set the disabled state of the `TextFieldBase`
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--disabled" />
</Canvas>
```jsx
import { TextFieldBase } from '../../component-library';
<TextFieldBase disabled />;
```
### Error
Use the `error` prop to set the error state of the `TextFieldBase`
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--error-story" />
</Canvas>
```jsx
import { TextFieldBase } from '../../component-library';
<TextFieldBase error />;
```
### Max Length
Use the `maxLength` prop to set the maximum allowed input characters for the `TextFieldBase`
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--max-length" />
</Canvas>
```jsx
import { TextFieldBase } from '../../component-library';
<TextFieldBase maxLength={10} />;
```
### Read Only
Use the `readOnly` prop to set the `TextFieldBase` to read only. When `readOnly` is true `TextFieldBase` will not have a focus state.
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--read-only" />
</Canvas>
```jsx
import { TextFieldBase } from '../../component-library';
<TextFieldBase readOnly />;
```
### Required
Use the `required` prop to set the `TextFieldBase` to required. Currently there is no visual difference to the `TextFieldBase` when required.
<Canvas>
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--required" />
</Canvas>
```jsx
import { TextFieldBase } from '../../component-library';
// Currently no visual difference
<TextFieldBase required />;
```