1
0
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:
David Walsh 2023-03-06 13:30:43 -06:00 committed by GitHub
parent 0cc135fab3
commit 13d03abe9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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} />
} }
/> />
); );