1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/component-library/help-text/README.mdx
George Marshall 3d37ad3b6e
Adding HelpText component (#16293)
* Adding initial HelpText component
2022-11-03 10:09:09 -07:00

85 lines
2.4 KiB
Plaintext

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { HelpText } from './help-text';
# HelpText
The `HelpText` is intended to be used as the help or error text under a form element
<Canvas>
<Story id="ui-components-component-library-help-text-help-text-stories-js--default-story" />
</Canvas>
## Props
The `HelpText` accepts all props below as well as all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) and [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
<ArgsTable of={HelpText} />
### Children
The `children` of the `HelpText` can be plain text or react nodes.
<Canvas>
<Story id="ui-components-component-library-help-text-help-text-stories-js--children" />
</Canvas>
```jsx
import { SIZES, COLORS } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/component-library/icon';
import { HelpText } from '../../ui/component-library/help-text';
<HelpText>Plain text</HelpText>
<HelpText>
Text and icon
<Icon
marginLeft={1}
color={COLORS.INHERIT}
name={ICON_NAMES.WARNING_FILLED}
size={SIZES.AUTO}
/>
</HelpText>
```
### Error
Use the `error` prop to show the `HelpText` in error state.
<Canvas>
<Story id="ui-components-component-library-help-text-help-text-stories-js--error-story" />
</Canvas>
```jsx
import { HelpText } from '../../ui/component-library/help-text';
<HelpText error>This HelpText in error state</HelpText>;
```
### Color
It may be useful to change the color of the `HelpText`. Use the `color` prop and the `COLORS` object to change the color of the `HelpText`. Defaults to `COLORS.TEXT_DEFAULT`.
<Canvas>
<Story id="ui-components-component-library-help-text-help-text-stories-js--color" />
</Canvas>
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { HelpText } from '../../ui/component-library/help-text';
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<HelpText color={COLORS.TEXT_DEFAULT}>
The HelpText default color is COLORS.TEXT_DEFAULT
</HelpText>
<HelpText color={COLORS.INFO_DEFAULT}>
This HelpText color is COLORS.INFO_DEFAULT
</HelpText>
<HelpText color={COLORS.WARNING_DEFAULT}>
This HelpText color is COLORS.WARNING_DEFAULT
</HelpText>
<HelpText color={COLORS.SUCCESS_DEFAULT}>
This HelpText color is COLORS.SUCCESS_DEFAULT
</HelpText>
</Box>;
```