mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
update to enum DS Text component (#18584)
* update to enum DS Text component * Update ui/components/component-library/text/README.mdx Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/component-library/text/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/text/README.mdx Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/component-library/text/README.mdx Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/component-library/text/README.mdx --------- Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> Co-authored-by: Danica Shen <zhaodanica@gmail.com> Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
This commit is contained in:
Garrett Bear
GitHub
parent
39dff02a04
commit
81393e1b5d
@ -112,11 +112,11 @@ import { TextColor, BackgroundColor } from '../../../helpers/constants/design-sy
|
||||
|
||||
### 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:
|
||||
Use the `fontWeight` prop and the `FontWeight` enum 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`
|
||||
- `FontWeight.Normal` = `normal` || `400`
|
||||
- `FontWeight.Medium` = `medium` || `500`
|
||||
- `FontWeight.Bold` = `bold` || `700`
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-text--font-weight" />
|
||||
@ -124,25 +124,25 @@ Use the `fontWeight` prop and the `FONT_WEIGHT` object from `./ui/helpers/consta
|
||||
|
||||
```jsx
|
||||
import { Text } from '../../component-library';
|
||||
import { FONT_WEIGHT } from '../../../helpers/constants/design-system';
|
||||
import { FontWeight } from '../../../helpers/constants/design-system';
|
||||
|
||||
<Text fontWeight={FONT_WEIGHT.NORMAL}>
|
||||
<Text fontWeight={FontWeight.Normal}>
|
||||
normal
|
||||
</Text>
|
||||
<Text fontWeight={FONT_WEIGHT.MEDIUM}>
|
||||
<Text fontWeight={FontWeight.Medium}>
|
||||
medium
|
||||
</Text>
|
||||
<Text fontWeight={FONT_WEIGHT.BOLD}>
|
||||
<Text fontWeight={FontWeight.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:
|
||||
Use the `fontStyle` prop and the `FontStyle` enum 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`
|
||||
- `FontStyle.Normal`
|
||||
- `FontStyle.Italic`
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-text--font-style" />
|
||||
@ -150,19 +150,19 @@ Use the `fontStyle` prop and the `FONT_STYLE` object from `./ui/helpers/constant
|
||||
|
||||
```jsx
|
||||
import { Text } from '../../component-library';
|
||||
import { FONT_STYLE } from '../../../helpers/constants/design-system';
|
||||
import { FontStyle } from '../../../helpers/constants/design-system';
|
||||
|
||||
<Text fontStyle={FONT_STYLE.NORMAL}>
|
||||
<Text fontStyle={FontStyle.Normal}>
|
||||
normal
|
||||
</Text>
|
||||
<Text fontStyle={FONT_STYLE.ITALIC}>
|
||||
<Text fontStyle={FontStyle.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
|
||||
Use the `textTransform` prop and the `TextTransform` enum from `./ui/helpers/constants/design-system.ts` to change the text alignment of the `Text` component
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-text--text-transform" />
|
||||
@ -170,22 +170,22 @@ Use the `textTransform` prop and the `TEXT_TRANSFORM` object from `./ui/helpers/
|
||||
|
||||
```jsx
|
||||
import { Text } from '../../component-library';
|
||||
import { TEXT_TRANSFORM } from '../../../helpers/constants/design-system';
|
||||
import { TextTransform } from '../../../helpers/constants/design-system';
|
||||
|
||||
<Text textAlign={TEXT_TRANSFORM.UPPERCASE}>
|
||||
<Text textAlign={TextTransform.Uppercase}>
|
||||
uppercase
|
||||
</Text>
|
||||
<Text textAlign={TEXT_TRANSFORM.LOWERCASE}>
|
||||
<Text textAlign={TextTransform.Lowercase}>
|
||||
lowercase
|
||||
</Text>
|
||||
<Text textAlign={TEXT_TRANSFORM.CAPITALIZE}>
|
||||
<Text textAlign={TextTransform.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
|
||||
Use the `textAlign` prop and the `TextAlign` enum from `./ui/helpers/constants/design-system.ts` to change the text alignment of the `Text` component
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-text--text-align" />
|
||||
@ -193,28 +193,28 @@ Use the `textAlign` prop and the `TEXT_ALIGN` object from `./ui/helpers/constant
|
||||
|
||||
```jsx
|
||||
import { Text } from '../../component-library';
|
||||
import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
|
||||
import { TextAlign } from '../../../helpers/constants/design-system';
|
||||
|
||||
<Text textAlign={TEXT_ALIGN.LEFT}>
|
||||
<Text textAlign={TextAlign.Left}>
|
||||
left
|
||||
</Text>
|
||||
<Text textAlign={TEXT_ALIGN.CENTER}>
|
||||
<Text textAlign={TextAlign.Center}>
|
||||
center
|
||||
</Text>
|
||||
<Text textAlign={TEXT_ALIGN.RIGHT}>
|
||||
<Text textAlign={TextAlign.Right}>
|
||||
right
|
||||
</Text>
|
||||
<Text textAlign={TEXT_ALIGN.JUSTIFY}>
|
||||
<Text textAlign={TextAlign.Justify}>
|
||||
justify
|
||||
</Text>
|
||||
<Text textAlign={TEXT_ALIGN.END}>
|
||||
<Text textAlign={TextAlign.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
|
||||
Use the `overflowWrap` prop and the `OverflowWrap` enum from `./ui/helpers/constants/design-system.ts` to change the overflow wrap of the `Text` component
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-text--overflow-wrap" />
|
||||
@ -222,7 +222,7 @@ Use the `overflowWrap` prop and the `OVERFLOW_WRAP` object from `./ui/helpers/co
|
||||
|
||||
```jsx
|
||||
import { Text } from '../../component-library';
|
||||
import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
|
||||
import { OverflowWrap } from '../../../helpers/constants/design-system';
|
||||
|
||||
<div
|
||||
style={{
|
||||
@ -231,11 +231,11 @@ import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
|
||||
display: 'block',
|
||||
}}
|
||||
>
|
||||
<Text overflowWrap={OVERFLOW_WRAP.NORMAL}>
|
||||
{OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
||||
<Text overflowWrap={OverflowWrap.Normal}>
|
||||
{OverflowWrap.Normal}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
||||
</Text>
|
||||
<Text overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>
|
||||
{OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
||||
<Text overflowWrap={OverflowWrap.BreakWord}>
|
||||
{OverflowWrap.BreakWord}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
||||
</Text>
|
||||
</div>;
|
||||
```
|
||||
@ -538,14 +538,14 @@ import { TextVariant } from '../../../helpers/constants/design-system';
|
||||
|
||||
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
|
||||
Values using the `TextAlign` object from `./ui/helpers/constants/design-system.js` remain the same
|
||||
|
||||
```jsx
|
||||
// Before
|
||||
<Typograpghy align={TEXT_ALIGN.CENTER}>Demo</Typograpghy>;
|
||||
<Typography align={TEXT_ALIGN.CENTER}>Demo</Typography>;
|
||||
|
||||
// After
|
||||
<Text textAlign={TEXT_ALIGN.CENTER}>Demo</Text>;
|
||||
<Text textAlign={TextAlign.Center}>Demo</Text>;
|
||||
```
|
||||
|
||||
### Box Props
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import * as React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import {
|
||||
FONT_STYLE,
|
||||
FONT_WEIGHT,
|
||||
OVERFLOW_WRAP,
|
||||
TEXT_ALIGN,
|
||||
FontStyle,
|
||||
FontWeight,
|
||||
OverflowWrap,
|
||||
TextAlign,
|
||||
TextColor,
|
||||
TEXT_TRANSFORM,
|
||||
TextTransform,
|
||||
TextVariant,
|
||||
Color,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
@ -99,9 +99,9 @@ describe('Text', () => {
|
||||
it('should render the Text with proper font weight class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<Text fontWeight={FONT_WEIGHT.BOLD}>bold</Text>
|
||||
<Text fontWeight={FONT_WEIGHT.MEDIUM}>medium</Text>
|
||||
<Text fontWeight={FONT_WEIGHT.NORMAL}>normal</Text>
|
||||
<Text fontWeight={FontWeight.Bold}>bold</Text>
|
||||
<Text fontWeight={FontWeight.Medium}>medium</Text>
|
||||
<Text fontWeight={FontWeight.Normal}>normal</Text>
|
||||
</>,
|
||||
);
|
||||
expect(getByText('bold')).toHaveClass('mm-text--font-weight-bold');
|
||||
@ -156,8 +156,8 @@ describe('Text', () => {
|
||||
it('should render the Text with proper font style class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<Text fontStyle={FONT_STYLE.ITALIC}>italic</Text>
|
||||
<Text fontStyle={FONT_STYLE.NORMAL}>normal</Text>
|
||||
<Text fontStyle={FontStyle.Italic}>italic</Text>
|
||||
<Text fontStyle={FontStyle.Normal}>normal</Text>
|
||||
</>,
|
||||
);
|
||||
expect(getByText('italic')).toHaveClass('mm-text--font-style-italic');
|
||||
@ -167,11 +167,11 @@ describe('Text', () => {
|
||||
it('should render the Text with proper text align class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<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>
|
||||
<Text textAlign={TextAlign.Left}>left</Text>
|
||||
<Text textAlign={TextAlign.Center}>center</Text>
|
||||
<Text textAlign={TextAlign.Right}>right</Text>
|
||||
<Text textAlign={TextAlign.Justify}>justify</Text>
|
||||
<Text textAlign={TextAlign.End}>end</Text>
|
||||
</>,
|
||||
);
|
||||
|
||||
@ -185,8 +185,8 @@ describe('Text', () => {
|
||||
it('should render the Text with proper overflow wrap class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<Text overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>break-word</Text>
|
||||
<Text overflowWrap={OVERFLOW_WRAP.NORMAL}>normal</Text>
|
||||
<Text overflowWrap={OverflowWrap.BreakWord}>break-word</Text>
|
||||
<Text overflowWrap={OverflowWrap.Normal}>normal</Text>
|
||||
</>,
|
||||
);
|
||||
expect(getByText('break-word')).toHaveClass(
|
||||
@ -207,9 +207,9 @@ describe('Text', () => {
|
||||
it('should render the Text with proper text transform class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<Text textTransform={TEXT_TRANSFORM.UPPERCASE}>uppercase</Text>
|
||||
<Text textTransform={TEXT_TRANSFORM.LOWERCASE}>lowercase</Text>
|
||||
<Text textTransform={TEXT_TRANSFORM.CAPITALIZE}>capitalize</Text>
|
||||
<Text textTransform={TextTransform.Uppercase}>uppercase</Text>
|
||||
<Text textTransform={TextTransform.Lowercase}>lowercase</Text>
|
||||
<Text textTransform={TextTransform.Capitalize}>capitalize</Text>
|
||||
</>,
|
||||
);
|
||||
expect(getByText('uppercase')).toHaveClass(
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { forwardRef, Ref } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import Box from '../../ui/box';
|
||||
import {
|
||||
FONT_WEIGHT,
|
||||
FontWeight,
|
||||
TextVariant,
|
||||
TextColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
@ -49,7 +49,7 @@ export const Text = forwardRef(function Text(
|
||||
let strongTagFontWeight;
|
||||
|
||||
if (Tag === 'strong') {
|
||||
strongTagFontWeight = FONT_WEIGHT.BOLD;
|
||||
strongTagFontWeight = FontWeight.Bold;
|
||||
}
|
||||
|
||||
const computedClassName = classnames(
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
import type { BoxProps } from '../../ui/box/box.d';
|
||||
import {
|
||||
FONT_WEIGHT,
|
||||
FONT_STYLE,
|
||||
FontWeight,
|
||||
FontStyle,
|
||||
TextVariant,
|
||||
TEXT_ALIGN,
|
||||
TEXT_TRANSFORM,
|
||||
OVERFLOW_WRAP,
|
||||
TextAlign,
|
||||
TextTransform,
|
||||
OverflowWrap,
|
||||
TextColor,
|
||||
Color,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
@ -70,35 +70,35 @@ export interface TextProps extends BoxProps {
|
||||
*/
|
||||
color?: TextColor | Color;
|
||||
/**
|
||||
* The font-weight of the Text component. Should use the FONT_WEIGHT object from
|
||||
* The font-weight of the Text component. Should use the FontWeight enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
fontWeight?: keyof typeof FONT_WEIGHT;
|
||||
fontWeight?: FontWeight;
|
||||
/**
|
||||
* The font-style of the Text component. Should use the FONT_STYLE object from
|
||||
* The font-style of the Text component. Should use the FontStyle enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
fontStyle?: keyof typeof FONT_STYLE;
|
||||
fontStyle?: FontStyle;
|
||||
/**
|
||||
* The textTransform of the Text component. Should use the TEXT_TRANSFORM object from
|
||||
* The textTransform of the Text component. Should use the TextTransform enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
textTransform?: keyof typeof TEXT_TRANSFORM;
|
||||
textTransform?: TextTransform;
|
||||
/**
|
||||
* The text-align of the Text component. Should use the TEXT_ALIGN object from
|
||||
* The text-align of the Text component. Should use the TextAlign enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
textAlign?: keyof typeof TEXT_ALIGN;
|
||||
textAlign?: TextAlign;
|
||||
/**
|
||||
* Change the dir (direction) global attribute of text to support the direction a language is written
|
||||
* Possible values: `LEFT_TO_RIGHT` (default), `RIGHT_TO_LEFT`, `AUTO` (user agent decides)
|
||||
*/
|
||||
textDirection?: TextDirection;
|
||||
/**
|
||||
* The overflow-wrap of the Text component. Should use the OVERFLOW_WRAP object from
|
||||
* The overflow-wrap of the Text component. Should use the OverflowWrap enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
overflowWrap?: keyof typeof OVERFLOW_WRAP;
|
||||
overflowWrap?: OverflowWrap;
|
||||
/**
|
||||
* Used for long strings that can be cut off...
|
||||
*/
|
||||
|
||||
@ -297,6 +297,15 @@ export const BLOCK_SIZES = {
|
||||
FULL: 'full',
|
||||
};
|
||||
|
||||
export enum TextAlign {
|
||||
Left = 'left',
|
||||
Center = 'center',
|
||||
Right = 'right',
|
||||
Justify = 'justify',
|
||||
End = 'end',
|
||||
Start = 'start',
|
||||
}
|
||||
|
||||
export const TEXT_ALIGN = {
|
||||
LEFT: 'left',
|
||||
CENTER: 'center',
|
||||
@ -306,24 +315,50 @@ export const TEXT_ALIGN = {
|
||||
START: 'start',
|
||||
};
|
||||
|
||||
export enum TextTransform {
|
||||
// eslint-disable-next-line @typescript-eslint/no-shadow
|
||||
Uppercase = 'uppercase',
|
||||
// eslint-disable-next-line @typescript-eslint/no-shadow
|
||||
Lowercase = 'lowercase',
|
||||
// eslint-disable-next-line @typescript-eslint/no-shadow
|
||||
Capitalize = 'capitalize',
|
||||
}
|
||||
|
||||
export const TEXT_TRANSFORM = {
|
||||
UPPERCASE: 'uppercase',
|
||||
LOWERCASE: 'lowercase',
|
||||
CAPITALIZE: 'capitalize',
|
||||
};
|
||||
|
||||
export enum FontWeight {
|
||||
Bold = 'bold',
|
||||
Medium = 'medium',
|
||||
Normal = 'normal',
|
||||
}
|
||||
|
||||
export const FONT_WEIGHT = {
|
||||
BOLD: 'bold',
|
||||
MEDIUM: 'medium',
|
||||
NORMAL: 'normal',
|
||||
};
|
||||
|
||||
export enum OverflowWrap {
|
||||
BreakWord = 'break-word',
|
||||
Anywhere = 'anywhere',
|
||||
Normal = 'normal',
|
||||
}
|
||||
|
||||
export const OVERFLOW_WRAP = {
|
||||
BREAK_WORD: 'break-word',
|
||||
ANYWHERE: 'anywhere',
|
||||
NORMAL: 'normal',
|
||||
};
|
||||
|
||||
export enum FontStyle {
|
||||
Italic = 'italic',
|
||||
Normal = 'normal',
|
||||
}
|
||||
|
||||
export const FONT_STYLE = {
|
||||
ITALIC: 'italic',
|
||||
NORMAL: 'normal',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user