mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
01057f9824
* convert text component to TS * invisible character fix * storybook fix * fix types export * update ButtonBase * add typeof to objects in TextProps * fix linting issues * fix implicit conversion * lint fix * add deprecated Text back * change box ref to any * fix classnames issue * account details to use deprecated text reference * ref update * make RefObject * remove RefObject and go back to Ref * react.ref change to box
582 lines
16 KiB
Plaintext
582 lines
16 KiB
Plaintext
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
|
import ActionableMessage from '../../ui/actionable-message';
|
|
import { Text } from './text';
|
|
|
|
# Text
|
|
|
|
> This Text (fka Typography) component has breaking changes in variant options and the line heights associated to each variant.
|
|
|
|
Good typography improves readability, legibility and hierarchy of information.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--default-story" />
|
|
</Canvas>
|
|
|
|
## Props
|
|
|
|
The `Text` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
|
|
|
<ArgsTable of={Text} />
|
|
|
|
### Variant
|
|
|
|
Use the `variant` prop and the `TextVariant` enum from `./ui/helpers/constants/design-system.js` to change the font size of the component.
|
|
|
|
`TextVariant` options:
|
|
|
|
- TextVariant.displayMd (default renders as `h1` tag)
|
|
- TextVariant.headingLg (default renders as `h2` tag)
|
|
- TextVariant.headingMd (default renders as `h3` tag)
|
|
- TextVariant.headingSm (default renders as `h4` tag)
|
|
- TextVariant.bodyLgMedium (default renders as `p` tag)
|
|
- TextVariant.bodyMd (default renders as `p` tag)
|
|
- TextVariant.bodyMdBold (default renders as `p` tag)
|
|
- TextVariant.bodySm (default renders as `p` tag)
|
|
- TextVariant.bodySmBold (default renders as `p` tag)
|
|
- TextVariant.bodyXs (default renders as `p` tag)
|
|
- TextVariant.inherit (default renders as `span` tag)
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--variant" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Text } from '../../component-library';
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.displayMd}>display-md</Text>
|
|
<Text variant={TextVariant.headingLg}>heading-lg</Text>
|
|
<Text variant={TextVariant.headingMd}>heading-md</Text>
|
|
<Text variant={TextVariant.headingSm}>heading-sm</Text>
|
|
<Text variant={TextVariant.bodyLgMedium}>body-lg-medium</Text>
|
|
<Text variant={TextVariant.bodyMd}>body-md</Text>
|
|
<Text variant={TextVariant.bodyMdBold}>body-md-bold</Text>
|
|
<Text variant={TextVariant.bodySm}>body-sm</Text>
|
|
<Text variant={TextVariant.bodySmBold}>body-sm-bold</Text>
|
|
<Text variant={TextVariant.bodyXs}>body-xs</Text>
|
|
<Text variant={TextVariant.inherit}>inherit</Text>
|
|
```
|
|
|
|
### Color
|
|
|
|
Use the `color` prop and the `TextColor` enum from `./ui/helpers/constants/design-system.js` to change the color of the `Text` component.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--color-story" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Text } from '../../component-library';
|
|
import { TextColor, BackgroundColor } from '../../../helpers/constants/design-system';
|
|
|
|
<Text color={TextColor.textDefault}>
|
|
text-default
|
|
</Text>
|
|
<Text color={TextColor.textAlternative}>
|
|
text-alternative
|
|
</Text>
|
|
<Text color={TextColor.textMuted}>
|
|
text-muted
|
|
</Text>
|
|
<Text color={TextColor.primaryDefault}>
|
|
primary-default
|
|
</Text>
|
|
<Text color={TextColor.primaryInverse} backgroundColor={BackgroundColor.primaryDefault}>
|
|
primary-inverse
|
|
</Text>
|
|
<Text color={TextColor.errorDefault}>
|
|
error-default
|
|
</Text>
|
|
<Text color={TextColor.errorInverse} backgroundColor={BackgroundColor.errorDefault}>
|
|
error-inverse
|
|
</Text>
|
|
<Text color={TextColor.successDefault}>
|
|
success-default
|
|
</Text>
|
|
<Text color={TextColor.successInverse} backgroundColor={BackgroundColor.successDefault}>
|
|
success-inverse
|
|
</Text>
|
|
<Text color={TextColor.warningDefault}>
|
|
warning-default
|
|
</Text>
|
|
<Text color={TextColor.warningInverse} backgroundColor={BackgroundColor.warningDefault}>
|
|
warning-inverse
|
|
</Text>
|
|
<Text color={TextColor.infoDefault}>
|
|
info-default
|
|
</Text>
|
|
<Text color={TextColor.infoInverse} backgroundColor={BackgroundColor.infoDefault}>
|
|
info-inverse
|
|
</Text>
|
|
```
|
|
|
|
### Font Weight
|
|
|
|
Use the `fontWeight` prop and the `FONT_WEIGHT` object from `./ui/helpers/constants/design-system.js` to change the font weight of the `Text` component. There are 3 font weights:
|
|
|
|
- `FONT_WEIGHT.NORMAL` = `normal` || `400`
|
|
- `FONT_WEIGHT.MEDIUM` = `medium` || `500`
|
|
- `FONT_WEIGHT.BOLD` = `bold` || `700`
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--font-weight" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Text } from '../../component-library';
|
|
import { FONT_WEIGHT } from '../../../helpers/constants/design-system';
|
|
|
|
<Text fontWeight={FONT_WEIGHT.NORMAL}>
|
|
normal
|
|
</Text>
|
|
<Text fontWeight={FONT_WEIGHT.MEDIUM}>
|
|
medium
|
|
</Text>
|
|
<Text fontWeight={FONT_WEIGHT.BOLD}>
|
|
bold
|
|
</Text>
|
|
```
|
|
|
|
### Font Style
|
|
|
|
Use the `fontStyle` prop and the `FONT_STYLE` object from `./ui/helpers/constants/design-system.js` to change the font style of the `Text` component. There are 2 font styles:
|
|
|
|
- `FONT_STYLE.NORMAL`
|
|
- `FONT_STYLE.ITALIC`
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--font-style" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Text } from '../../component-library';
|
|
import { FONT_STYLE } from '../../../helpers/constants/design-system';
|
|
|
|
<Text fontStyle={FONT_STYLE.NORMAL}>
|
|
normal
|
|
</Text>
|
|
<Text fontStyle={FONT_STYLE.ITALIC}>
|
|
bold
|
|
</Text>
|
|
```
|
|
|
|
### Text Transform
|
|
|
|
Use the `textTransform` prop and the `TEXT_TRANSFORM` object from `./ui/helpers/constants/design-system.js` to change the text alignment of the `Text` component
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--text-transform" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Text } from '../../component-library';
|
|
import { TEXT_TRANSFORM } from '../../../helpers/constants/design-system';
|
|
|
|
<Text textAlign={TEXT_TRANSFORM.UPPERCASE}>
|
|
uppercase
|
|
</Text>
|
|
<Text textAlign={TEXT_TRANSFORM.LOWERCASE}>
|
|
lowercase
|
|
</Text>
|
|
<Text textAlign={TEXT_TRANSFORM.CAPITALIZE}>
|
|
capitalize
|
|
</Text>
|
|
```
|
|
|
|
### Text Align
|
|
|
|
Use the `textAlign` prop and the `TEXT_ALIGN` object from `./ui/helpers/constants/design-system.js` to change the text alignment of the `Text` component
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--text-align" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Text } from '../../component-library';
|
|
import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
|
|
|
|
<Text textAlign={TEXT_ALIGN.LEFT}>
|
|
left
|
|
</Text>
|
|
<Text textAlign={TEXT_ALIGN.CENTER}>
|
|
center
|
|
</Text>
|
|
<Text textAlign={TEXT_ALIGN.RIGHT}>
|
|
right
|
|
</Text>
|
|
<Text textAlign={TEXT_ALIGN.JUSTIFY}>
|
|
justify
|
|
</Text>
|
|
<Text textAlign={TEXT_ALIGN.END}>
|
|
end
|
|
</Text>
|
|
```
|
|
|
|
### Overflow Wrap
|
|
|
|
Use the `overflowWrap` prop and the `OVERFLOW_WRAP` object from `./ui/helpers/constants/design-system.js` to change the overflow wrap of the `Text` component
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--overflow-wrap" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Text } from '../../component-library';
|
|
import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
|
|
|
|
<div
|
|
style={{
|
|
width: 250,
|
|
border: '1px solid var(--color-error-default)',
|
|
display: 'block',
|
|
}}
|
|
>
|
|
<Text overflowWrap={OVERFLOW_WRAP.NORMAL}>
|
|
{OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
|
</Text>
|
|
<Text overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>
|
|
{OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
|
</Text>
|
|
</div>;
|
|
```
|
|
|
|
### Ellipsis
|
|
|
|
Use the boolean `ellipsis` prop to change the if the `Text` component to have an ellipsis.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--ellipsis" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Text } from '../../component-library';
|
|
|
|
<div
|
|
style={{
|
|
width: 250,
|
|
border: '1px solid var(--color-error-default)',
|
|
display: 'block',
|
|
}}
|
|
>
|
|
<Text ellipsis>Ellipsis: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d</Text>
|
|
<Text>No Ellipsis: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d</Text>
|
|
</div>;
|
|
```
|
|
|
|
### As
|
|
|
|
Use the `as` prop to change the root html element of the `Text` component
|
|
|
|
You can also utilize the `ValidTag` enum from `./text.types` to ensure that you are using a valid html element
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--as" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Text } from '../../component-library';
|
|
|
|
<Text as="dd">dd</Text>
|
|
<Text as="div">div</Text>
|
|
<Text as="dt">dt</Text>
|
|
<Text as="em">em</Text>
|
|
<Text as="h1">h1</Text>
|
|
<Text as="h2">h2</Text>
|
|
<Text as="h3">h3</Text>
|
|
<Text as="h4">h4</Text>
|
|
<Text as="h5">h5</Text>
|
|
<Text as="h6">h6</Text>
|
|
<Text as="li">li</Text>
|
|
<Text as="p">p</Text>
|
|
<Text as="span">span</Text>
|
|
<Text as="strong">strong</Text>
|
|
<Text as="input" placeholder="input"></Text>
|
|
```
|
|
|
|
Renders the html:
|
|
|
|
```html
|
|
<dd>dd</dd>
|
|
<div>div</div>
|
|
<dt>dt</dt>
|
|
<em>em</em>
|
|
<h1>h1</h1>
|
|
<h2>h2</h2>
|
|
<h3>h3</h3>
|
|
<h4>h4</h4>
|
|
<h5>h5</h5>
|
|
<h6>h6</h6>
|
|
<li>li</li>
|
|
<p>p</p>
|
|
<span>span</span>
|
|
<strong>strong</strong>
|
|
<input placeholder="input" />
|
|
```
|
|
|
|
### Text Direction
|
|
|
|
Use the `textDirection` prop and the `TextDirection` enum from `./text.types` to change the text direction of `Text`
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-text--text-direction-story" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Text, TextDirection } from '../../component-library';
|
|
|
|
<Text textDirection={TextDirection.LeftToRight}>
|
|
This is left to right (ltr) for English and most languages
|
|
</Text>
|
|
<Text textDirection={TextDirection.RightToLeft}>
|
|
This is right to left (rtl) for use with other laguanges such as Arabic. This Enlgish example is incorrect usage.
|
|
</Text>
|
|
<Text textDirection={TextDirection.Auto}>
|
|
Let the user agent decide with the auto option
|
|
</Text>
|
|
```
|
|
|
|
### Box Props
|
|
|
|
Use any valid box props [Box](/?path=/story/components-ui-box--default-story) component props to the Text component.
|
|
|
|
### Class Name
|
|
|
|
Adds an additional class to the `Text` component
|
|
|
|
### Children
|
|
|
|
The text content of the `Text` component
|
|
|
|
---
|
|
|
|
# Converting from `Typography` to `Text`
|
|
|
|
The `Typography` component has been deprecated in favor of the `Text` component. Below are code examples converting from `Typography` to `Text`.
|
|
|
|
### Variant
|
|
|
|
Table below is the 1:1 mapping of `TypographyVariant` to `TextVariant` and the html element that needs to be rendered.
|
|
|
|
The new `Text` component does not have matching default elements for `TypographyVariant.H5`, `TypographyVariant.H6`, `TypographyVariant.H7` or `TypographyVariant.H8` or `TypographyVariant.H9` variant.
|
|
|
|
If you need to use these variants, please use the `as` prop to render the correct html element.
|
|
|
|
| TypographyVariant | Typography Tag | TextVariant | Text Default Tag |
|
|
| ---------------------------------------------------------- | -------------- | --------------------- | ---------------- |
|
|
| [TypographyVariant.H1](#typographyvarianth1) | h1 | TextVariant.displayMd | h1 |
|
|
| [TypographyVariant.H2](#typographyvarianth2) | h2 | TextVariant.headingLg | h2 |
|
|
| [TypographyVariant.H3](#typographyvarianth3) | h3 | TextVariant.headingMd | h3 |
|
|
| [TypographyVariant.H4](#typographyvarianth4) | h4 | TextVariant.headingSm | h4 |
|
|
| [TypographyVariant.H5](#typographyvarianth5) | h5 | TextVariant.bodyMd | p |
|
|
| [TypographyVariant.H6](#typographyvarianth6) | h6 | TextVariant.bodySm | p |
|
|
| [TypographyVariant.Paragraph](#typographyvariantparagraph) | p | TextVariant.bodyMd | p |
|
|
| [TypographyVariant.H7](#typographyvarianth7) | h6 | TextVariant.bodySm | p |
|
|
| [TypographyVariant.H8](#typographyvarianth8) | h6 | TextVariant.bodyXs | p |
|
|
| [TypographyVariant.H9](#typographyvarianth9) | h6 | TextVariant.bodyXs | p |
|
|
|
|
#### TypographyVariant.H1
|
|
|
|
```jsx
|
|
// Before
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typography variant={TypographyVariant.H1}>Demo</Typography>;
|
|
|
|
// After
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.displayMd}>Demo</Text>;
|
|
```
|
|
|
|
#### TypographyVariant.H2
|
|
|
|
```jsx
|
|
// Before
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typograpghy variant={TypographyVariant.H2}>Demo</Typograpghy>;
|
|
|
|
// After
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.headingLg}>Demo</Text>;
|
|
```
|
|
|
|
#### TypographyVariant.H3
|
|
|
|
```jsx
|
|
// Before
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typograpghy variant={TypographyVariant.H3}>Demo</Typograpghy>;
|
|
|
|
// After
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.headingMd}>Demo</Text>;
|
|
```
|
|
|
|
#### TypographyVariant.H4
|
|
|
|
```jsx
|
|
// Before
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typograpghy variant={TypographyVariant.H4}>Demo</Typograpghy>;
|
|
|
|
// After
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.headingSm}>Demo</Text>;
|
|
```
|
|
|
|
#### TypographyVariant.H5
|
|
|
|
Requires `as="h6"` prop for 1:1 conversion
|
|
|
|
```jsx
|
|
// Before
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typograpghy variant={TypographyVariant.H5}>Demo</Typograpghy>;
|
|
|
|
// After
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.bodyMd} as="h6">
|
|
Demo
|
|
</Text>;
|
|
```
|
|
|
|
#### TypographyVariant.H6
|
|
|
|
Requires `as="h6"` prop for 1:1 conversion
|
|
|
|
```jsx
|
|
// Before
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typograpghy variant={TypographyVariant.H6}>Demo</Typograpghy>;
|
|
|
|
// After
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.bodySm} as="h6">
|
|
Demo
|
|
</Text>;
|
|
```
|
|
|
|
#### TypographyVariant.Paragraph
|
|
|
|
```jsx
|
|
// Before
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typograpghy variant={TypographyVariant.Paragraph}>Demo</Typograpghy>;
|
|
|
|
// After
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.bodyMd}>Demo</Text>;
|
|
```
|
|
|
|
#### TypographyVariant.H7
|
|
|
|
Requires `as="h6"` prop for 1:1 conversion
|
|
|
|
```jsx
|
|
// Before
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typograpghy variant={TypographyVariant.H7}>Demo</Typograpghy>;
|
|
|
|
// After
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.bodySm} as="h6">
|
|
Demo
|
|
</Text>;
|
|
```
|
|
|
|
#### TypographyVariant.H8
|
|
|
|
Requires `as="h6"` prop for 1:1 conversion
|
|
|
|
```jsx
|
|
// Before
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typograpghy variant={TypographyVariant.H8}>Demo</Typograpghy>;
|
|
|
|
// After
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.bodyXs} as="h6">
|
|
Demo
|
|
</Text>;
|
|
```
|
|
|
|
#### TypographyVariant.H9
|
|
|
|
Requires `as="h6"` prop for 1:1 conversion
|
|
|
|
```jsx
|
|
// Before
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typograpghy variant={TypographyVariant.H9}>Demo</Typograpghy>;
|
|
|
|
// After
|
|
import { TextVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Text variant={TextVariant.bodyXs} as="h6">
|
|
Demo
|
|
</Text>;
|
|
```
|
|
|
|
### Align
|
|
|
|
The prop name `align` has been deprecated in favor of `textAlign`
|
|
|
|
Values and using the `TEXT_ALIGN` object from `./ui/helpers/constants/design-system.js` remain the same
|
|
|
|
```jsx
|
|
// Before
|
|
<Typograpghy align={TEXT_ALIGN.CENTER}>Demo</Typograpghy>;
|
|
|
|
// After
|
|
<Text textAlign={TEXT_ALIGN.CENTER}>Demo</Text>;
|
|
```
|
|
|
|
### Box Props
|
|
|
|
Box props are now integrated with the `Text` component. Valid box props: [Box](/?path=/story/components-ui-box--default-story)
|
|
|
|
You no longer need to pass these props as an object through `boxProps`
|
|
|
|
```jsx
|
|
// Before
|
|
<Typography
|
|
boxProps={{
|
|
backgroundColor: Color.infoMuted,
|
|
borderColor: Color.infoDefault,
|
|
padding: 4,
|
|
borderRadius: 4,
|
|
}}
|
|
color={Color.textDefault}
|
|
>
|
|
Demo
|
|
</Typography>;
|
|
|
|
// After
|
|
<Text
|
|
backgroundColor={Color.infoMuted}
|
|
borderColor={Color.infoDefault}
|
|
padding={4}
|
|
borderRadius={4}
|
|
color={Color.textDefault}
|
|
>
|
|
Demo
|
|
</Text>;
|
|
```
|