1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/help-text
Garrett Bear 1007930078
Feat/16187/text housekeeping (#16589)
* text housekeeping

* update testing

* Text constant

* TEXT const to story

* format text sizes

* add associated constants to text component

* add all exports to global index.js

* update snapshot

* update text component variants

* Update ui/components/component-library/text/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* update rearrangements

* update text in tests

Co-authored-by: George Marshall <george.marshall@consensys.net>
2022-12-01 09:26:19 -08:00
..
__snapshots__ Feat/16187/text housekeeping (#16589) 2022-12-01 09:26:19 -08:00
help-text.js HelpText house keeping updates (#16681) 2022-11-29 13:00:51 -08:00
help-text.stories.js HelpText house keeping updates (#16681) 2022-11-29 13:00:51 -08:00
help-text.test.js Feat/16187/text housekeeping (#16589) 2022-12-01 09:26:19 -08:00
index.js Adding HelpText component (#16293) 2022-11-03 10:09:09 -07:00
README.mdx HelpText house keeping updates (#16681) 2022-11-29 13:00:51 -08:00

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import { Text } from '..';

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 [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props

<ArgsTable of={HelpText} />

`HelpText` accepts all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) component props

<ArgsTable of={Text} />

### 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 { HelpText, Icon, ICON_NAMES } from '../../component-library';

<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 '../../component-library';

<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 '../../component-library';

<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>;
```