mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
UX: Icon: Update README with new variable names (#17920)
* UX: Icon: Update README with new variable names * Update ui/components/component-library/text-field/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> --------- Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
This commit is contained in:
parent
0cc135fab3
commit
13d03abe9b
@ -89,14 +89,14 @@ Use the `startAccessory` and `endAccessory` props to add components such as icon
|
|||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
|
import { Color, IconColor, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
|
||||||
import { ButtonIcon, Icon, ICON_NAMES, TextField } from '../../component-library';
|
import { ButtonIcon, Icon, ICON_NAMES, TextField } from '../../component-library';
|
||||||
|
|
||||||
<TextField
|
<TextField
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
startAccessory={
|
startAccessory={
|
||||||
<Icon
|
<Icon
|
||||||
color={COLORS.ICON_ALTERNATIVE}
|
color={IconColor.iconAlternative}
|
||||||
name={ICON_NAMES.SEARCH}
|
name={ICON_NAMES.SEARCH}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
@ -108,7 +108,7 @@ import { ButtonIcon, Icon, ICON_NAMES, TextField } from '../../component-library
|
|||||||
<ButtonIcon
|
<ButtonIcon
|
||||||
iconName={ICON_NAMES.SCAN_BARCODE}
|
iconName={ICON_NAMES.SCAN_BARCODE}
|
||||||
ariaLabel="Scan QR code"
|
ariaLabel="Scan QR code"
|
||||||
iconProps={{ color: COLORS.PRIMARY_DEFAULT }}
|
iconProps={{ color: IconColor.primaryDefault }}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@ -129,7 +129,7 @@ import { ButtonIcon, Icon, ICON_NAMES, TextField } from '../../component-library
|
|||||||
isAddressValid && (
|
isAddressValid && (
|
||||||
<Icon
|
<Icon
|
||||||
name={ICON_NAMES.CHECK}
|
name={ICON_NAMES.CHECK}
|
||||||
color={COLORS.SUCCESS_DEFAULT}
|
color={IconColor.successDefault}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -215,7 +215,7 @@ const TextFieldCustomInput = (args) => (
|
|||||||
size={SIZES.LG}
|
size={SIZES.LG}
|
||||||
InputComponent={CustomInputComponent}
|
InputComponent={CustomInputComponent}
|
||||||
startAccessory={
|
startAccessory={
|
||||||
<Icon color={COLORS.ICON_ALTERNATIVE} name={ICON_NAMES.WALLET} />
|
<Icon color={IconColor.iconAlternative} name={ICON_NAMES.WALLET} />
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user