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

Update to text-field-base docs (#16170)

Browse Source
This commit is contained in:
George Marshall 2022-10-13 06:32:52 -07:00 committed by GitHub
parent 41e3ab189c
commit 7eb93ff74b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 104 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
ui/components/component-library/text-field-base/README.mdx
View File

@ -90,10 +90,10 @@ Use the `leftAccessory` and `rightAccessory` props to add components such as ico
</Canvas>
```jsx
import { COLORS, SIZES } from '../../../helpers/constants/design-system';
import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/component-library/icons';
import { TextFieldBase } from '../../ui/component-library/text-field-base';
import { TextFieldBase } from '../../ui/component-library/text-field';
<TextFieldBase
placeholder="Search"
@ -106,39 +106,42 @@ import { TextFieldBase } from '../../ui/component-library/text-field-base';
/>
<TextFieldBase
placeholder="MetaMask"
placeholder="Public address (0x), or ENS"
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>
<Box
as="button"
display={DISPLAY.FLEX}
style={{ padding: 0 }}
backgroundColor={COLORS.TRANSPARENT}
>
<Icon
color={COLORS.PRIMARY_DEFAULT}
name={ICON_NAMES.SCAN_BARCODE_FILLED}
/>
</Box>
}
/>
<TextFieldBase
placeholder="Enter amount"
type="number"
leftAccessory={
<AvatarToken
tokenName="ast"
tokenImageUrl="./AST.png"
size={SIZES.SM}
/>
}
truncate
leftAccessory={<SelectTokenComponent />}
rightAccessory={<TokenValueInUSDComponent />}
/>
<TextFieldBase
placeholder="Public address (0x), or ENS"
truncate
leftAccessory={<AvatarAccount />}
rightAccessory={
// TODO: replace with ButtonLink
<button>Max</button>
isAddressValid && (
<Icon
name={ICON_NAMES.CHECK_OUTLINE}
color={COLORS.SUCCESS_DEFAULT}
/>
)
}
/>
```

120
ui/components/component-library/text-field-base/text-field-base.stories.js
View File

@ -5,11 +5,15 @@ import {
DISPLAY,
COLORS,
FLEX_DIRECTION,
ALIGN_ITEMS,
TEXT,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { Icon, ICON_NAMES } from '../icon';
import { AvatarToken } from '../avatar-token';
import { AvatarAccount } from '../avatar-account';
import { Text } from '../text';
import {
TEXT_FIELD_BASE_SIZES,
@ -212,10 +216,16 @@ Truncate.args = {
export const LeftAccessoryRightAccessory = (args) => {
const [value, setValue] = useState({
search: '',
metaMask: '',
address: '0x514910771af9ca656af840dff83e8264ecf986ca',
address: '',
amount: 1,
accountAddress: '0x514910771af9ca656af840dff83e8264ecf986ca',
});
const handleOnChange = (e) => {
setValue({ ...value, [e.target.name]: e.target.value });
};
const handleTokenPrice = (tokenAmount, priceUSD) => {
return tokenAmount * priceUSD;
};
return (
<Box
display={DISPLAY.INLINE_FLEX}
@ -226,7 +236,9 @@ export const LeftAccessoryRightAccessory = (args) => {
{...args}
placeholder="Search"
value={value.search}
onChange={(e) => setValue({ ...value, search: e.target.value })}
name="search"
onChange={handleOnChange}
showClear
leftAccessory={
<Icon
color={COLORS.ICON_ALTERNATIVE}
@ -236,61 +248,79 @@ export const LeftAccessoryRightAccessory = (args) => {
/>
<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"
placeholder="Public address (0x), or ENS"
value={value.address}
onChange={(e) => setValue({ ...value, address: e.target.value })}
truncate
leftAccessory={<AvatarToken tokenName="ast" size={SIZES.SM} />}
name="address"
onChange={handleOnChange}
rightAccessory={
<button
style={{
padding: 0,
background: 'transparent',
margin: 0,
display: 'flex',
}}
onClick={() => setValue({ ...value, address: '' })}
<Box
as="button"
display={DISPLAY.FLEX}
style={{ padding: 0 }}
backgroundColor={COLORS.TRANSPARENT}
>
<Icon name={ICON_NAMES.CLOSE_OUTLINE} size={SIZES.SM} />
</button>
<Icon
color={COLORS.PRIMARY_DEFAULT}
name={ICON_NAMES.SCAN_BARCODE_FILLED}
/>
</Box>
}
/>
<TextFieldBase
{...args}
placeholder="Enter amount"
value={value.amount}
onChange={(e) => setValue({ ...value, amount: e.target.value })}
name="amount"
onChange={handleOnChange}
type="number"
truncate
leftAccessory={
<AvatarToken
tokenName="ast"
tokenImageUrl="./AST.png"
size={SIZES.SM}
/>
<Box
as="button"
style={{ padding: 0 }}
backgroundColor={COLORS.TRANSPARENT}
gap={1}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
>
<AvatarToken
tokenName="ast"
tokenImageUrl="./AST.png"
size={SIZES.SM}
/>
<Text>AST</Text>
<Icon
name={ICON_NAMES.ARROW_DOWN}
color={COLORS.ICON_DEFAULT}
size={SIZES.SM}
/>
</Box>
}
rightAccessory={
<button onClick={() => setValue({ ...value, amount: 100000 })}>
Max
</button>
<Text variant={TEXT.BODY_SM} color={COLORS.TEXT_ALTERNATIVE}>
= ${handleTokenPrice(value.amount, 0.11)}
</Text>
}
/>
<TextFieldBase
{...args}
placeholder="Public address (0x), or ENS"
value={value.accountAddress}
name="accountAddress"
onChange={handleOnChange}
truncate
leftAccessory={
value.accountAddress && (
<AvatarAccount size={SIZES.SM} address={value.accountAddress} />
)
}
rightAccessory={
value.accountAddress.length === 42 && (
<Icon
name={ICON_NAMES.CHECK_OUTLINE}
color={COLORS.SUCCESS_DEFAULT}
/>
)
}
/>
</Box>