mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
.. | ||
__snapshots__ | ||
help-text.js | ||
help-text.stories.js | ||
help-text.test.js | ||
index.js | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { Text } from '..'; import { HelpText } from './help-text'; # HelpText The `HelpText` is used as feedback text under a form field including error, success, warning or info messages <Canvas> <Story id="components-componentlibrary-helptext--default-story" /> </Canvas> ## Props The `HelpText` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props <ArgsTable of={HelpText} /> `HelpText` accepts all [Text](/docs/components-componentlibrary-text--default-story#props) component props <ArgsTable of={Text} /> ### Children `HelpText` renders as a `<p>` tag if the child is a `string` or a `<div>` if the child is an `object`. ```jsx import { Size, IconColor } from '../../../helpers/constants/design-system'; import { HelpText, Icon, IconName, IconSize } from '../../component-library'; <HelpText>Plain text</HelpText> // renders as <p>Plain text</p> <HelpText> <span>Text and icon</span> <Icon marginLeft={1} color={IconColor.iconAlternative} name={IconName.Warning} size={IconSize.Inherit} /> </HelpText> // renders as <div><span>Text and icon</span> <div style={{background: icon/warning.svg}} /></div> ``` ### Severity Use the `severity` prop and `SEVERITIES` object to change the severity of the `HelpText` <Canvas> <Story id="components-componentlibrary-helptext--severity-story" /> </Canvas> ```jsx import { SEVERITIES } from '../../../helpers/constants/design-system'; import { HelpText } from '../../component-library'; <HelpText>HelpText without severity prop</HelpText> <HelpText severity={SEVERITIES.DANGER}> HelpText with severity: SEVERITY.DANGER </HelpText> <HelpText severity={SEVERITIES.SUCCESS}> HelpText with severity: SEVERITY.SUCCESS </HelpText> <HelpText severity={SEVERITIES.WARNING}> HelpText with severity: SEVERITY.WARNING </HelpText> <HelpText severity={SEVERITIES.INFO}> HelpText with severity: SEVERITY.INFO </HelpText> ``` ### Color It may be useful to change the color of the `HelpText`. Use the `color` prop and the `Color` object to change the color of the `HelpText`. Defaults to `Color.textDefault`. <Canvas> <Story id="components-componentlibrary-helptext--color-story" /> </Canvas> ```jsx import { Color } from '../../../helpers/constants/design-system'; import { HelpText } from '../../component-library'; <HelpText color={TextColor.textDefault}> This HelpText default color is TextColor.textDefault </HelpText> <HelpText color={TextColor.textAlternative}> This HelpText color is TextColor.textAlternative </HelpText> <HelpText color={TextColor.textMuted}> This HelpText color is TextColor.textMuted </HelpText> ```