mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Adding TextFieldBase component (#16043)
* Adding TextInputBase component * Removing keyup and keydown props, tests and docs * removing showClear from stories * removing unneeded css * simplifying uncontrolled vs controlled to work * Fortifying maxLength test * Lint fix for test * Doc, style and prop updates * Updating constant names with 'base' * Adding a background color * Adding a background color to input
This commit is contained in:
George Marshall
GitHub
parent
6918bff291
commit
055a7c52c0
@ -6,3 +6,4 @@
|
|||||||
@import 'button-primary/button-primary';
|
@import 'button-primary/button-primary';
|
||||||
@import 'icon/icon';
|
@import 'icon/icon';
|
||||||
@import 'text/text';
|
@import 'text/text';
|
||||||
|
@import 'text-field-base/text-field-base';
|
||||||
|
|||||||
298
ui/components/component-library/text-field-base/README.mdx
Normal file
298
ui/components/component-library/text-field-base/README.mdx
Normal file
@ -0,0 +1,298 @@
|
|||||||
|
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 { TextFieldBase } from '../../ui/component-library/text-field-base';
|
||||||
|
import { SIZES } from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
<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 '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
<TextFieldBase type="text" /> // (Default)
|
||||||
|
<TextFieldBase type="number" />
|
||||||
|
<TextFieldBase type="password" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### Truncate
|
||||||
|
|
||||||
|
Use the `truncate` prop to truncate the text of the the `TextFieldBase`
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--truncate" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { TextFieldBase } from '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
<TextFieldBase truncate />;
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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 } from '../../../helpers/constants/design-system';
|
||||||
|
import { Icon, ICON_NAMES } from '../../ui/component-library/icons';
|
||||||
|
|
||||||
|
import { TextFieldBase } from '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
<TextFieldBase
|
||||||
|
placeholder="Search"
|
||||||
|
leftAccessory={
|
||||||
|
<Icon
|
||||||
|
color={COLORS.ICON_ALTERNATIVE}
|
||||||
|
name={ICON_NAMES.SEARCH_FILLED}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextFieldBase
|
||||||
|
placeholder="MetaMask"
|
||||||
|
rightAccessory={
|
||||||
|
// TODO: replace with ButtonIcon
|
||||||
|
<button>
|
||||||
|
<Icon name={ICON_NAMES.CLOSE_OUTLINE} size={SIZES.SM} />
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextFieldBase
|
||||||
|
truncate
|
||||||
|
leftAccessory={<AvatarToken tokenName="ast" size={SIZES.SM} />}
|
||||||
|
rightAccessory={
|
||||||
|
// TODO: replace with ButtonIcon
|
||||||
|
<button>
|
||||||
|
<Icon name={ICON_NAMES.CLOSE_OUTLINE} size={SIZES.SM} />
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextFieldBase
|
||||||
|
placeholder="Enter amount"
|
||||||
|
type="number"
|
||||||
|
leftAccessory={
|
||||||
|
<AvatarToken
|
||||||
|
tokenName="ast"
|
||||||
|
tokenImageUrl="./AST.png"
|
||||||
|
size={SIZES.SM}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
rightAccessory={
|
||||||
|
// TODO: replace with ButtonLink
|
||||||
|
<button>Max</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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 { TextFieldBase } from '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
// TODO: replace with Button component
|
||||||
|
<Box
|
||||||
|
as="button"
|
||||||
|
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
|
||||||
|
color={COLORS.TEXT_DEFAULT}
|
||||||
|
borderColor={COLORS.BORDER_DEFAULT}
|
||||||
|
borderRadius={SIZES.XL}
|
||||||
|
marginLeft={1}
|
||||||
|
paddingLeft={2}
|
||||||
|
paddingRight={2}
|
||||||
|
onClick={handleOnClick}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</Box>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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 '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
<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 '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
<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 '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
<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 '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
<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 '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
<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 '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
<TextFieldBase maxLength={10} />;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Read Only
|
||||||
|
|
||||||
|
Use the `readOnly` prop to set the `TextFieldBase` to read only
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--read-only" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { TextFieldBase } from '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
<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 '../../ui/component-library/text-field-base';
|
||||||
|
|
||||||
|
// Currently no visual difference
|
||||||
|
<TextFieldBase required />;
|
||||||
|
```
|
||||||
5
ui/components/component-library/text-field-base/index.js
Normal file
5
ui/components/component-library/text-field-base/index.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export { TextFieldBase } from './text-field-base';
|
||||||
|
export {
|
||||||
|
TEXT_FIELD_BASE_SIZES,
|
||||||
|
TEXT_FIELD_BASE_TYPES,
|
||||||
|
} from './text-field-base.constants';
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import { SIZES } from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
export const TEXT_FIELD_BASE_SIZES = {
|
||||||
|
SM: SIZES.SM,
|
||||||
|
MD: SIZES.MD,
|
||||||
|
LG: SIZES.LG,
|
||||||
|
};
|
||||||
|
export const TEXT_FIELD_BASE_TYPES = {
|
||||||
|
TEXT: 'text',
|
||||||
|
NUMBER: 'number',
|
||||||
|
PASSWORD: 'password',
|
||||||
|
};
|
||||||
@ -0,0 +1,250 @@
|
|||||||
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
|
||||||
|
import {
|
||||||
|
DISPLAY,
|
||||||
|
SIZES,
|
||||||
|
ALIGN_ITEMS,
|
||||||
|
TEXT,
|
||||||
|
COLORS,
|
||||||
|
} from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
import Box from '../../ui/box';
|
||||||
|
|
||||||
|
import { Text } from '../text';
|
||||||
|
|
||||||
|
import {
|
||||||
|
TEXT_FIELD_BASE_SIZES,
|
||||||
|
TEXT_FIELD_BASE_TYPES,
|
||||||
|
} from './text-field-base.constants';
|
||||||
|
|
||||||
|
export const TextFieldBase = ({
|
||||||
|
autoComplete,
|
||||||
|
autoFocus,
|
||||||
|
className,
|
||||||
|
defaultValue,
|
||||||
|
disabled,
|
||||||
|
error,
|
||||||
|
id,
|
||||||
|
inputProps,
|
||||||
|
inputRef,
|
||||||
|
leftAccessory,
|
||||||
|
rightAccessory,
|
||||||
|
maxLength,
|
||||||
|
name,
|
||||||
|
onBlur,
|
||||||
|
onChange,
|
||||||
|
onClick,
|
||||||
|
onFocus,
|
||||||
|
placeholder,
|
||||||
|
readOnly,
|
||||||
|
required,
|
||||||
|
size = SIZES.MD,
|
||||||
|
type = 'text',
|
||||||
|
truncate,
|
||||||
|
value,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const internalInputRef = useRef(null);
|
||||||
|
const [focused, setFocused] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// The blur won't fire when the disabled state is set on a focused input.
|
||||||
|
// We need to set the focused state manually.
|
||||||
|
if (disabled) {
|
||||||
|
setFocused(false);
|
||||||
|
}
|
||||||
|
}, [disabled]);
|
||||||
|
|
||||||
|
const handleClick = (event) => {
|
||||||
|
const { current } = internalInputRef;
|
||||||
|
|
||||||
|
if (current) {
|
||||||
|
current.focus();
|
||||||
|
setFocused(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (onClick) {
|
||||||
|
onClick(event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFocus = (event) => {
|
||||||
|
setFocused(true);
|
||||||
|
onFocus && onFocus(event);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBlur = (event) => {
|
||||||
|
setFocused(false);
|
||||||
|
onBlur && onBlur(event);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputRef = (ref) => {
|
||||||
|
internalInputRef.current = ref;
|
||||||
|
if (inputRef && inputRef.current !== undefined) {
|
||||||
|
inputRef.current = ref;
|
||||||
|
} else if (typeof inputRef === 'function') {
|
||||||
|
inputRef(ref);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
className={classnames(
|
||||||
|
'mm-text-field-base',
|
||||||
|
`mm-text-field-base--size-${size}`,
|
||||||
|
{
|
||||||
|
'mm-text-field-base--focused': focused && !disabled,
|
||||||
|
'mm-text-field-base--error': error,
|
||||||
|
'mm-text-field-base--disabled': disabled,
|
||||||
|
'mm-text-field-base--truncate': truncate,
|
||||||
|
},
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
display={DISPLAY.INLINE_FLEX}
|
||||||
|
backgroundColor={COLORS.BACKGROUND_DEFAULT}
|
||||||
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
|
borderWidth={1}
|
||||||
|
borderRadius={SIZES.SM}
|
||||||
|
paddingLeft={4}
|
||||||
|
paddingRight={4}
|
||||||
|
onClick={handleClick}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{leftAccessory}
|
||||||
|
<Text
|
||||||
|
aria-invalid={error}
|
||||||
|
as="input"
|
||||||
|
autoComplete={autoComplete ? 'on' : 'off'}
|
||||||
|
autoFocus={autoFocus}
|
||||||
|
backgroundColor={COLORS.TRANSPARENT}
|
||||||
|
defaultValue={defaultValue}
|
||||||
|
disabled={disabled}
|
||||||
|
focused={focused.toString()}
|
||||||
|
id={id}
|
||||||
|
margin={0}
|
||||||
|
maxLength={maxLength}
|
||||||
|
name={name}
|
||||||
|
onBlur={handleBlur}
|
||||||
|
onChange={onChange}
|
||||||
|
onFocus={handleFocus}
|
||||||
|
padding={0}
|
||||||
|
paddingLeft={leftAccessory ? 2 : null}
|
||||||
|
paddingRight={leftAccessory ? 2 : null}
|
||||||
|
placeholder={placeholder}
|
||||||
|
readOnly={readOnly}
|
||||||
|
ref={handleInputRef}
|
||||||
|
required={required}
|
||||||
|
value={value}
|
||||||
|
variant={TEXT.BODY_MD}
|
||||||
|
type={type}
|
||||||
|
{...inputProps} // before className so input className isn't overridden
|
||||||
|
className={classnames(
|
||||||
|
'mm-text-field-base__input',
|
||||||
|
inputProps?.className,
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{rightAccessory}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
TextFieldBase.propTypes = {
|
||||||
|
/**
|
||||||
|
* Autocomplete allows the browser to predict the value based on earlier typed values
|
||||||
|
*/
|
||||||
|
autoComplete: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* If `true`, the input will be focused during the first mount.
|
||||||
|
*/
|
||||||
|
autoFocus: PropTypes.bool,
|
||||||
|
/**
|
||||||
|
* An additional className to apply to the text-field-base
|
||||||
|
*/
|
||||||
|
className: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* The default input value, useful when not controlling the component.
|
||||||
|
*/
|
||||||
|
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||||
|
/**
|
||||||
|
* If `true`, the input will be disabled.
|
||||||
|
*/
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
/**
|
||||||
|
* If `true`, the input will indicate an error
|
||||||
|
*/
|
||||||
|
error: PropTypes.bool,
|
||||||
|
/**
|
||||||
|
* The id of the `input` element.
|
||||||
|
*/
|
||||||
|
id: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* Attributes applied to the `input` element.
|
||||||
|
*/
|
||||||
|
inputProps: PropTypes.object,
|
||||||
|
/**
|
||||||
|
* Component to appear on the left side of the input
|
||||||
|
*/
|
||||||
|
leftAccessory: PropTypes.node,
|
||||||
|
/**
|
||||||
|
* Component to appear on the right side of the input
|
||||||
|
*/
|
||||||
|
rightAccessory: PropTypes.node,
|
||||||
|
/**
|
||||||
|
* Use inputRef to pass a ref to the html input element.
|
||||||
|
*/
|
||||||
|
inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
||||||
|
/**
|
||||||
|
* Max number of characters to allow
|
||||||
|
*/
|
||||||
|
maxLength: PropTypes.number,
|
||||||
|
/**
|
||||||
|
* Name attribute of the `input` element.
|
||||||
|
*/
|
||||||
|
name: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* Callback fired on blur
|
||||||
|
*/
|
||||||
|
onBlur: PropTypes.func,
|
||||||
|
/**
|
||||||
|
* Callback fired when the value is changed.
|
||||||
|
*/
|
||||||
|
onChange: PropTypes.func,
|
||||||
|
/**
|
||||||
|
* Callback fired on focus
|
||||||
|
*/
|
||||||
|
onFocus: PropTypes.func,
|
||||||
|
/**
|
||||||
|
* The short hint displayed in the input before the user enters a value.
|
||||||
|
*/
|
||||||
|
placeholder: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* It prevents the user from changing the value of the field (not from interacting with the field).
|
||||||
|
*/
|
||||||
|
readOnly: PropTypes.bool,
|
||||||
|
/**
|
||||||
|
* If `true`, the input will be required. Currently no visual difference is shown.
|
||||||
|
*/
|
||||||
|
required: PropTypes.bool,
|
||||||
|
/**
|
||||||
|
* The size of the text field. Changes the height of the component
|
||||||
|
* Accepts SM(32px), MD(40px), LG(48px)
|
||||||
|
*/
|
||||||
|
size: PropTypes.oneOf(Object.values(TEXT_FIELD_BASE_SIZES)),
|
||||||
|
/**
|
||||||
|
* Type of the input element. Can be TEXT_FIELD_BASE_TYPES.TEXT, TEXT_FIELD_BASE_TYPES.PASSWORD, TEXT_FIELD_BASE_TYPES.NUMBER
|
||||||
|
* Defaults to TEXT_FIELD_BASE_TYPES.TEXT ('text')
|
||||||
|
*/
|
||||||
|
type: PropTypes.oneOf(Object.values(TEXT_FIELD_BASE_TYPES)),
|
||||||
|
/**
|
||||||
|
* The input value, required for a controlled component.
|
||||||
|
*/
|
||||||
|
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||||
|
/**
|
||||||
|
* TextFieldBase accepts all the props from Box
|
||||||
|
*/
|
||||||
|
...Box.propTypes,
|
||||||
|
};
|
||||||
|
|
||||||
|
TextFieldBase.displayName = 'TextFieldBase';
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
.mm-text-field-base {
|
||||||
|
--text-field-base-height: var(--size, 40px);
|
||||||
|
|
||||||
|
&--size-sm {
|
||||||
|
--size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--size-md {
|
||||||
|
--size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--size-lg {
|
||||||
|
--size: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
height: var(--text-field-base-height);
|
||||||
|
border-color: var(--color-border-default);
|
||||||
|
|
||||||
|
&--focused {
|
||||||
|
border-color: var(--color-primary-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--error {
|
||||||
|
border-color: var(--color-error-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
border-color: var(--color-border-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
// truncates text with ellipsis
|
||||||
|
&--truncate .mm-text-field-base__input {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__input {
|
||||||
|
border: none;
|
||||||
|
height: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
box-sizing: content-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,361 @@
|
|||||||
|
import React, { useState, useRef } from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
SIZES,
|
||||||
|
DISPLAY,
|
||||||
|
COLORS,
|
||||||
|
FLEX_DIRECTION,
|
||||||
|
} from '../../../helpers/constants/design-system';
|
||||||
|
import Box from '../../ui/box/box';
|
||||||
|
|
||||||
|
import { Icon, ICON_NAMES } from '../icon';
|
||||||
|
import { AvatarToken } from '../avatar-token';
|
||||||
|
|
||||||
|
import {
|
||||||
|
TEXT_FIELD_BASE_SIZES,
|
||||||
|
TEXT_FIELD_BASE_TYPES,
|
||||||
|
} from './text-field-base.constants';
|
||||||
|
import { TextFieldBase } from './text-field-base';
|
||||||
|
import README from './README.mdx';
|
||||||
|
|
||||||
|
const marginSizeControlOptions = [
|
||||||
|
undefined,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
2,
|
||||||
|
3,
|
||||||
|
4,
|
||||||
|
5,
|
||||||
|
6,
|
||||||
|
7,
|
||||||
|
8,
|
||||||
|
9,
|
||||||
|
10,
|
||||||
|
11,
|
||||||
|
12,
|
||||||
|
'auto',
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Components/ComponentLibrary/TextFieldBase',
|
||||||
|
id: __filename,
|
||||||
|
component: TextFieldBase,
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
page: README,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
autoComplete: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
autoFocus: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
className: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
defaultValue: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
inputProps: {
|
||||||
|
control: 'object',
|
||||||
|
},
|
||||||
|
leftAccessory: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
maxLength: {
|
||||||
|
control: 'number',
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
onBlur: {
|
||||||
|
action: 'onBlur',
|
||||||
|
},
|
||||||
|
onChange: {
|
||||||
|
action: 'onChange',
|
||||||
|
},
|
||||||
|
onClick: {
|
||||||
|
action: 'onClick',
|
||||||
|
},
|
||||||
|
onFocus: {
|
||||||
|
action: 'onFocus',
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
readOnly: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
required: {
|
||||||
|
control: 'boolean',
|
||||||
|
},
|
||||||
|
rightAccessory: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
control: 'select',
|
||||||
|
options: Object.values(TEXT_FIELD_BASE_SIZES),
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
control: 'select',
|
||||||
|
options: Object.values(TEXT_FIELD_BASE_TYPES),
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
marginTop: {
|
||||||
|
options: marginSizeControlOptions,
|
||||||
|
control: 'select',
|
||||||
|
table: { category: 'box props' },
|
||||||
|
},
|
||||||
|
marginRight: {
|
||||||
|
options: marginSizeControlOptions,
|
||||||
|
control: 'select',
|
||||||
|
table: { category: 'box props' },
|
||||||
|
},
|
||||||
|
marginBottom: {
|
||||||
|
options: marginSizeControlOptions,
|
||||||
|
control: 'select',
|
||||||
|
table: { category: 'box props' },
|
||||||
|
},
|
||||||
|
marginLeft: {
|
||||||
|
options: marginSizeControlOptions,
|
||||||
|
control: 'select',
|
||||||
|
table: { category: 'box props' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
placeholder: 'Placeholder...',
|
||||||
|
autoFocus: false,
|
||||||
|
defaultValue: '',
|
||||||
|
disabled: false,
|
||||||
|
error: false,
|
||||||
|
id: '',
|
||||||
|
readOnly: false,
|
||||||
|
required: false,
|
||||||
|
size: SIZES.MD,
|
||||||
|
type: 'text',
|
||||||
|
truncate: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = (args) => <TextFieldBase {...args} />;
|
||||||
|
|
||||||
|
export const DefaultStory = Template.bind({});
|
||||||
|
DefaultStory.storyName = 'Default';
|
||||||
|
|
||||||
|
export const Size = (args) => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
display={DISPLAY.INLINE_FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<TextFieldBase
|
||||||
|
{...args}
|
||||||
|
placeholder="SIZES.SM (height: 32px)"
|
||||||
|
size={SIZES.SM}
|
||||||
|
/>
|
||||||
|
<TextFieldBase
|
||||||
|
{...args}
|
||||||
|
placeholder="SIZES.MD (height: 40px)"
|
||||||
|
size={SIZES.MD}
|
||||||
|
/>
|
||||||
|
<TextFieldBase
|
||||||
|
{...args}
|
||||||
|
placeholder="SIZES.LG (height: 48px)"
|
||||||
|
size={SIZES.LG}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Type = (args) => (
|
||||||
|
<Box
|
||||||
|
display={DISPLAY.INLINE_FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<TextFieldBase {...args} placeholder="Default" />
|
||||||
|
<TextFieldBase
|
||||||
|
{...args}
|
||||||
|
type={TEXT_FIELD_BASE_TYPES.PASSWORD}
|
||||||
|
placeholder="Password"
|
||||||
|
/>
|
||||||
|
<TextFieldBase
|
||||||
|
{...args}
|
||||||
|
type={TEXT_FIELD_BASE_TYPES.NUMBER}
|
||||||
|
placeholder="Number"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Truncate = Template.bind({});
|
||||||
|
Truncate.args = {
|
||||||
|
placeholder: 'Truncate',
|
||||||
|
value: 'Truncated text when truncate and width is set',
|
||||||
|
truncate: true,
|
||||||
|
style: { width: 240 },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const LeftAccessoryRightAccessory = (args) => {
|
||||||
|
const [value, setValue] = useState({
|
||||||
|
search: '',
|
||||||
|
metaMask: '',
|
||||||
|
address: '0x514910771af9ca656af840dff83e8264ecf986ca',
|
||||||
|
amount: 1,
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
display={DISPLAY.INLINE_FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<TextFieldBase
|
||||||
|
{...args}
|
||||||
|
placeholder="Search"
|
||||||
|
value={value.search}
|
||||||
|
onChange={(e) => setValue({ ...value, search: e.target.value })}
|
||||||
|
leftAccessory={
|
||||||
|
<Icon
|
||||||
|
color={COLORS.ICON_ALTERNATIVE}
|
||||||
|
name={ICON_NAMES.SEARCH_FILLED}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<TextFieldBase
|
||||||
|
{...args}
|
||||||
|
value={value.metaMask}
|
||||||
|
onChange={(e) => setValue({ ...value, metaMask: e.target.value })}
|
||||||
|
placeholder="MetaMask"
|
||||||
|
rightAccessory={
|
||||||
|
<button
|
||||||
|
style={{
|
||||||
|
padding: 0,
|
||||||
|
background: 'transparent',
|
||||||
|
margin: 0,
|
||||||
|
display: 'flex',
|
||||||
|
}}
|
||||||
|
onClick={() => setValue({ ...value, metaMask: '' })}
|
||||||
|
>
|
||||||
|
<Icon name={ICON_NAMES.CLOSE_OUTLINE} size={SIZES.SM} />
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<TextFieldBase
|
||||||
|
{...args}
|
||||||
|
placeholder="Enter address"
|
||||||
|
value={value.address}
|
||||||
|
onChange={(e) => setValue({ ...value, address: e.target.value })}
|
||||||
|
truncate
|
||||||
|
leftAccessory={<AvatarToken tokenName="ast" size={SIZES.SM} />}
|
||||||
|
rightAccessory={
|
||||||
|
<button
|
||||||
|
style={{
|
||||||
|
padding: 0,
|
||||||
|
background: 'transparent',
|
||||||
|
margin: 0,
|
||||||
|
display: 'flex',
|
||||||
|
}}
|
||||||
|
onClick={() => setValue({ ...value, address: '' })}
|
||||||
|
>
|
||||||
|
<Icon name={ICON_NAMES.CLOSE_OUTLINE} size={SIZES.SM} />
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<TextFieldBase
|
||||||
|
{...args}
|
||||||
|
placeholder="Enter amount"
|
||||||
|
value={value.amount}
|
||||||
|
onChange={(e) => setValue({ ...value, amount: e.target.value })}
|
||||||
|
type="number"
|
||||||
|
leftAccessory={
|
||||||
|
<AvatarToken
|
||||||
|
tokenName="ast"
|
||||||
|
tokenImageUrl="./AST.png"
|
||||||
|
size={SIZES.SM}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
rightAccessory={
|
||||||
|
<button onClick={() => setValue({ ...value, amount: 100000 })}>
|
||||||
|
Max
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const InputRef = (args) => {
|
||||||
|
const inputRef = useRef(null);
|
||||||
|
const [value, setValue] = useState('');
|
||||||
|
const handleOnClick = () => {
|
||||||
|
inputRef.current.focus();
|
||||||
|
};
|
||||||
|
const handleOnChange = (e) => {
|
||||||
|
setValue(e.target.value);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TextFieldBase
|
||||||
|
{...args}
|
||||||
|
inputRef={inputRef}
|
||||||
|
value={value}
|
||||||
|
onChange={handleOnChange}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
as="button"
|
||||||
|
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
|
||||||
|
color={COLORS.TEXT_DEFAULT}
|
||||||
|
borderColor={COLORS.BORDER_DEFAULT}
|
||||||
|
borderRadius={SIZES.XL}
|
||||||
|
marginLeft={1}
|
||||||
|
paddingLeft={2}
|
||||||
|
paddingRight={2}
|
||||||
|
onClick={handleOnClick}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AutoComplete = Template.bind({});
|
||||||
|
AutoComplete.args = {
|
||||||
|
autoComplete: true,
|
||||||
|
type: 'password',
|
||||||
|
placeholder: 'Enter password',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AutoFocus = Template.bind({});
|
||||||
|
AutoFocus.args = { autoFocus: true };
|
||||||
|
|
||||||
|
export const DefaultValue = Template.bind({});
|
||||||
|
DefaultValue.args = { defaultValue: 'Default value' };
|
||||||
|
|
||||||
|
export const Disabled = Template.bind({});
|
||||||
|
Disabled.args = { disabled: true };
|
||||||
|
|
||||||
|
export const ErrorStory = Template.bind({});
|
||||||
|
ErrorStory.args = { error: true };
|
||||||
|
ErrorStory.storyName = 'Error';
|
||||||
|
|
||||||
|
export const MaxLength = Template.bind({});
|
||||||
|
MaxLength.args = { maxLength: 10, placeholder: 'Max length 10' };
|
||||||
|
|
||||||
|
export const ReadOnly = Template.bind({});
|
||||||
|
ReadOnly.args = { readOnly: true, value: 'Read only' };
|
||||||
|
|
||||||
|
export const Required = Template.bind({});
|
||||||
|
Required.args = { required: true, placeholder: 'Required' };
|
||||||
@ -0,0 +1,213 @@
|
|||||||
|
/* eslint-disable jest/require-top-level-describe */
|
||||||
|
import React from 'react';
|
||||||
|
import { fireEvent, render } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
|
||||||
|
import { SIZES } from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
import { TextFieldBase } from './text-field-base';
|
||||||
|
|
||||||
|
describe('TextFieldBase', () => {
|
||||||
|
it('should render correctly', () => {
|
||||||
|
const { getByRole } = render(<TextFieldBase />);
|
||||||
|
expect(getByRole('textbox')).toBeDefined();
|
||||||
|
});
|
||||||
|
it('should render and be able to input text', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<TextFieldBase inputProps={{ 'data-testid': 'text-field-base' }} />,
|
||||||
|
);
|
||||||
|
const textFieldBase = getByTestId('text-field-base');
|
||||||
|
|
||||||
|
expect(textFieldBase.value).toBe(''); // initial value is empty string
|
||||||
|
fireEvent.change(textFieldBase, { target: { value: 'text value' } });
|
||||||
|
expect(textFieldBase.value).toBe('text value');
|
||||||
|
fireEvent.change(textFieldBase, { target: { value: '' } }); // reset value
|
||||||
|
expect(textFieldBase.value).toBe(''); // value is empty string after reset
|
||||||
|
});
|
||||||
|
it('should render and fire onFocus and onBlur events', () => {
|
||||||
|
const onFocus = jest.fn();
|
||||||
|
const onBlur = jest.fn();
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<TextFieldBase
|
||||||
|
inputProps={{ 'data-testid': 'text-field-base' }}
|
||||||
|
onFocus={onFocus}
|
||||||
|
onBlur={onBlur}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
const textFieldBase = getByTestId('text-field-base');
|
||||||
|
|
||||||
|
fireEvent.focus(textFieldBase);
|
||||||
|
expect(onFocus).toHaveBeenCalledTimes(1);
|
||||||
|
fireEvent.blur(textFieldBase);
|
||||||
|
expect(onBlur).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
it('should render and fire onChange event', () => {
|
||||||
|
const onChange = jest.fn();
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<TextFieldBase
|
||||||
|
inputProps={{ 'data-testid': 'text-field-base' }}
|
||||||
|
onChange={onChange}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
const textFieldBase = getByTestId('text-field-base');
|
||||||
|
|
||||||
|
fireEvent.change(textFieldBase, { target: { value: 'text value' } });
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
it('should render and fire onClick event', () => {
|
||||||
|
const onClick = jest.fn();
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<TextFieldBase
|
||||||
|
inputProps={{ 'data-testid': 'text-field-base' }}
|
||||||
|
onClick={onClick}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
const textFieldBase = getByTestId('text-field-base');
|
||||||
|
|
||||||
|
fireEvent.click(textFieldBase);
|
||||||
|
expect(onClick).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
it('should render with different size classes', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<>
|
||||||
|
<TextFieldBase size={SIZES.SM} data-testid="sm" />
|
||||||
|
<TextFieldBase size={SIZES.MD} data-testid="md" />
|
||||||
|
<TextFieldBase size={SIZES.LG} data-testid="lg" />
|
||||||
|
</>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('sm')).toHaveClass('mm-text-field-base--size-sm');
|
||||||
|
expect(getByTestId('md')).toHaveClass('mm-text-field-base--size-md');
|
||||||
|
expect(getByTestId('lg')).toHaveClass('mm-text-field-base--size-lg');
|
||||||
|
});
|
||||||
|
it('should render with different types', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<>
|
||||||
|
<TextFieldBase inputProps={{ 'data-testid': 'text-field-base-text' }} />
|
||||||
|
<TextFieldBase
|
||||||
|
type="number"
|
||||||
|
inputProps={{ 'data-testid': 'text-field-base-number' }}
|
||||||
|
/>
|
||||||
|
<TextFieldBase
|
||||||
|
type="password"
|
||||||
|
inputProps={{ 'data-testid': 'text-field-base-password' }}
|
||||||
|
/>
|
||||||
|
</>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('text-field-base-text')).toHaveAttribute('type', 'text');
|
||||||
|
expect(getByTestId('text-field-base-number')).toHaveAttribute(
|
||||||
|
'type',
|
||||||
|
'number',
|
||||||
|
);
|
||||||
|
expect(getByTestId('text-field-base-password')).toHaveAttribute(
|
||||||
|
'type',
|
||||||
|
'password',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('should render with truncate class', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<TextFieldBase truncate data-testid="truncate" />,
|
||||||
|
);
|
||||||
|
expect(getByTestId('truncate')).toHaveClass('mm-text-field-base--truncate');
|
||||||
|
});
|
||||||
|
it('should render with right and left accessories', () => {
|
||||||
|
const { getByRole, getByText } = render(
|
||||||
|
<TextFieldBase
|
||||||
|
leftAccessory={<div>left accessory</div>}
|
||||||
|
rightAccessory={<div>right accessory</div>}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(getByRole('textbox')).toBeDefined();
|
||||||
|
expect(getByText('left accessory')).toBeDefined();
|
||||||
|
expect(getByText('right accessory')).toBeDefined();
|
||||||
|
});
|
||||||
|
it('should render with working ref using inputRef prop', () => {
|
||||||
|
// Because the 'ref' attribute wont flow down to the DOM
|
||||||
|
// I'm not exactly sure how to test this?
|
||||||
|
const mockRef = jest.fn();
|
||||||
|
const { getByRole } = render(<TextFieldBase inputRef={mockRef} />);
|
||||||
|
expect(getByRole('textbox')).toBeDefined();
|
||||||
|
expect(mockRef).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
it('should render with autoComplete', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<TextFieldBase
|
||||||
|
autoComplete
|
||||||
|
inputProps={{ 'data-testid': 'text-field-base-auto-complete' }}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('text-field-base-auto-complete')).toHaveAttribute(
|
||||||
|
'autocomplete',
|
||||||
|
'on',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('should render with autoFocus', () => {
|
||||||
|
const { getByRole } = render(<TextFieldBase autoFocus />);
|
||||||
|
expect(getByRole('textbox')).toHaveFocus();
|
||||||
|
});
|
||||||
|
it('should render with a defaultValue', () => {
|
||||||
|
const { getByRole } = render(
|
||||||
|
<TextFieldBase
|
||||||
|
defaultValue="default value"
|
||||||
|
inputProps={{ 'data-testid': 'text-field-base-default-value' }}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(getByRole('textbox').value).toBe('default value');
|
||||||
|
});
|
||||||
|
it('should render in disabled state and not focus or be clickable', () => {
|
||||||
|
const mockOnClick = jest.fn();
|
||||||
|
const mockOnFocus = jest.fn();
|
||||||
|
const { getByRole } = render(
|
||||||
|
<TextFieldBase disabled onFocus={mockOnFocus} onClick={mockOnClick} />,
|
||||||
|
);
|
||||||
|
|
||||||
|
getByRole('textbox').focus();
|
||||||
|
expect(getByRole('textbox')).toBeDisabled();
|
||||||
|
expect(mockOnClick).toHaveBeenCalledTimes(0);
|
||||||
|
expect(mockOnFocus).toHaveBeenCalledTimes(0);
|
||||||
|
});
|
||||||
|
it('should render with error className when error is true', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<TextFieldBase
|
||||||
|
error
|
||||||
|
value="error value"
|
||||||
|
data-testid="text-field-base-error"
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('text-field-base-error')).toHaveClass(
|
||||||
|
'mm-text-field-base--error',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('should render with maxLength and not allow more than the set characters', async () => {
|
||||||
|
const { getByRole } = render(<TextFieldBase maxLength={5} />);
|
||||||
|
const textFieldBase = getByRole('textbox');
|
||||||
|
await userEvent.type(textFieldBase, '1234567890');
|
||||||
|
expect(getByRole('textbox')).toBeDefined();
|
||||||
|
expect(textFieldBase.maxLength).toBe(5);
|
||||||
|
expect(textFieldBase.value).toBe('12345');
|
||||||
|
expect(textFieldBase.value).toHaveLength(5);
|
||||||
|
});
|
||||||
|
it('should render with readOnly attr when readOnly is true', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<TextFieldBase
|
||||||
|
readOnly
|
||||||
|
inputProps={{ 'data-testid': 'text-field-base-readonly' }}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('text-field-base-readonly')).toHaveAttribute(
|
||||||
|
'readonly',
|
||||||
|
'',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('should render with required attr when required is true', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<TextFieldBase
|
||||||
|
required
|
||||||
|
inputProps={{ 'data-testid': 'text-field-base-required' }}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('text-field-base-required')).toHaveAttribute(
|
||||||
|
'required',
|
||||||
|
'',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user