m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

update to enum DS Text component (#18584)

Browse Source 
* 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 2023-04-17 10:17:28 -07:00 committed by GitHub
parent 39dff02a04
commit 81393e1b5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 107 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
ui/components/component-library/text/README.mdx
View File

@ -112,11 +112,11 @@ import { TextColor, BackgroundColor } from '../../../helpers/constants/design-sy
### Font Weight ### 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` - `FontWeight.Normal` = `normal` || `400`
- `FONT_WEIGHT.MEDIUM` = `medium` || `500` - `FontWeight.Medium` = `medium` || `500`
- `FONT_WEIGHT.BOLD` = `bold` || `700` - `FontWeight.Bold` = `bold` || `700`
<Canvas> <Canvas>
<Story id="components-componentlibrary-text--font-weight" /> <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 ```jsx
import { Text } from '../../component-library'; 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 normal
</Text> </Text>
<Text fontWeight={FONT_WEIGHT.MEDIUM}> <Text fontWeight={FontWeight.Medium}>
medium medium
</Text> </Text>
<Text fontWeight={FONT_WEIGHT.BOLD}> <Text fontWeight={FontWeight.Bold}>
bold bold
</Text> </Text>
``` ```
### Font Style ### 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` - `FontStyle.Normal`
- `FONT_STYLE.ITALIC` - `FontStyle.Italic`
<Canvas> <Canvas>
<Story id="components-componentlibrary-text--font-style" /> <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 ```jsx
import { Text } from '../../component-library'; 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 normal
</Text> </Text>
<Text fontStyle={FONT_STYLE.ITALIC}> <Text fontStyle={FontStyle.Italic}>
bold bold
</Text> </Text>
``` ```
### Text Transform ### 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> <Canvas>
<Story id="components-componentlibrary-text--text-transform" /> <Story id="components-componentlibrary-text--text-transform" />
@ -170,22 +170,22 @@ Use the `textTransform` prop and the `TEXT_TRANSFORM` object from `./ui/helpers/
```jsx ```jsx
import { Text } from '../../component-library'; 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 uppercase
</Text> </Text>
<Text textAlign={TEXT_TRANSFORM.LOWERCASE}> <Text textAlign={TextTransform.Lowercase}>
lowercase lowercase
</Text> </Text>
<Text textAlign={TEXT_TRANSFORM.CAPITALIZE}> <Text textAlign={TextTransform.Capitalize}>
capitalize capitalize
</Text> </Text>
``` ```
### Text Align ### 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> <Canvas>
<Story id="components-componentlibrary-text--text-align" /> <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 ```jsx
import { Text } from '../../component-library'; 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 left
</Text> </Text>
<Text textAlign={TEXT_ALIGN.CENTER}> <Text textAlign={TextAlign.Center}>
center center
</Text> </Text>
<Text textAlign={TEXT_ALIGN.RIGHT}> <Text textAlign={TextAlign.Right}>
right right
</Text> </Text>
<Text textAlign={TEXT_ALIGN.JUSTIFY}> <Text textAlign={TextAlign.Justify}>
justify justify
</Text> </Text>
<Text textAlign={TEXT_ALIGN.END}> <Text textAlign={TextAlign.End}>
end end
</Text> </Text>
``` ```
### Overflow Wrap ### 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> <Canvas>
<Story id="components-componentlibrary-text--overflow-wrap" /> <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 ```jsx
import { Text } from '../../component-library'; import { Text } from '../../component-library';
import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system'; import { OverflowWrap } from '../../../helpers/constants/design-system';
<div <div
style={{ style={{
@ -231,11 +231,11 @@ import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
display: 'block', display: 'block',
}} }}
> >
<Text overflowWrap={OVERFLOW_WRAP.NORMAL}> <Text overflowWrap={OverflowWrap.Normal}>
{OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d {OverflowWrap.Normal}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
</Text> </Text>
<Text overflowWrap={OVERFLOW_WRAP.BREAK_WORD}> <Text overflowWrap={OverflowWrap.BreakWord}>
{OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d {OverflowWrap.BreakWord}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
</Text> </Text>
</div>; </div>;
``` ```
@ -538,14 +538,14 @@ import { TextVariant } from '../../../helpers/constants/design-system';
The prop name `align` has been deprecated in favor of `textAlign` 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 ```jsx
// Before // Before
<Typograpghy align={TEXT_ALIGN.CENTER}>Demo</Typograpghy>; <Typography align={TEXT_ALIGN.CENTER}>Demo</Typography>;
// After // After
<Text textAlign={TEXT_ALIGN.CENTER}>Demo</Text>; <Text textAlign={TextAlign.Center}>Demo</Text>;
``` ```
### Box Props ### Box Props

40
ui/components/component-library/text/text.test.tsx
View File

@ -1,12 +1,12 @@
import * as React from 'react'; import * as React from 'react';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import { import {
FONT_STYLE, FontStyle,
FONT_WEIGHT, FontWeight,
OVERFLOW_WRAP, OverflowWrap,
TEXT_ALIGN, TextAlign,
TextColor, TextColor,
TEXT_TRANSFORM, TextTransform,
TextVariant, TextVariant,
Color, Color,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -99,9 +99,9 @@ describe('Text', () => {
it('should render the Text with proper font weight class name', () => { it('should render the Text with proper font weight class name', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Text fontWeight={FONT_WEIGHT.BOLD}>bold</Text> <Text fontWeight={FontWeight.Bold}>bold</Text>
<Text fontWeight={FONT_WEIGHT.MEDIUM}>medium</Text> <Text fontWeight={FontWeight.Medium}>medium</Text>
<Text fontWeight={FONT_WEIGHT.NORMAL}>normal</Text> <Text fontWeight={FontWeight.Normal}>normal</Text>
</>, </>,
); );
expect(getByText('bold')).toHaveClass('mm-text--font-weight-bold'); 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', () => { it('should render the Text with proper font style class name', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Text fontStyle={FONT_STYLE.ITALIC}>italic</Text> <Text fontStyle={FontStyle.Italic}>italic</Text>
<Text fontStyle={FONT_STYLE.NORMAL}>normal</Text> <Text fontStyle={FontStyle.Normal}>normal</Text>
</>, </>,
); );
expect(getByText('italic')).toHaveClass('mm-text--font-style-italic'); 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', () => { it('should render the Text with proper text align class name', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Text textAlign={TEXT_ALIGN.LEFT}>left</Text> <Text textAlign={TextAlign.Left}>left</Text>
<Text textAlign={TEXT_ALIGN.CENTER}>center</Text> <Text textAlign={TextAlign.Center}>center</Text>
<Text textAlign={TEXT_ALIGN.RIGHT}>right</Text> <Text textAlign={TextAlign.Right}>right</Text>
<Text textAlign={TEXT_ALIGN.JUSTIFY}>justify</Text> <Text textAlign={TextAlign.Justify}>justify</Text>
<Text textAlign={TEXT_ALIGN.END}>end</Text> <Text textAlign={TextAlign.End}>end</Text>
</>, </>,
); );
@ -185,8 +185,8 @@ describe('Text', () => {
it('should render the Text with proper overflow wrap class name', () => { it('should render the Text with proper overflow wrap class name', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Text overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>break-word</Text> <Text overflowWrap={OverflowWrap.BreakWord}>break-word</Text>
<Text overflowWrap={OVERFLOW_WRAP.NORMAL}>normal</Text> <Text overflowWrap={OverflowWrap.Normal}>normal</Text>
</>, </>,
); );
expect(getByText('break-word')).toHaveClass( expect(getByText('break-word')).toHaveClass(
@ -207,9 +207,9 @@ describe('Text', () => {
it('should render the Text with proper text transform class name', () => { it('should render the Text with proper text transform class name', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Text textTransform={TEXT_TRANSFORM.UPPERCASE}>uppercase</Text> <Text textTransform={TextTransform.Uppercase}>uppercase</Text>
<Text textTransform={TEXT_TRANSFORM.LOWERCASE}>lowercase</Text> <Text textTransform={TextTransform.Lowercase}>lowercase</Text>
<Text textTransform={TEXT_TRANSFORM.CAPITALIZE}>capitalize</Text> <Text textTransform={TextTransform.Capitalize}>capitalize</Text>
</>, </>,
); );
expect(getByText('uppercase')).toHaveClass( expect(getByText('uppercase')).toHaveClass(

4
ui/components/component-library/text/text.tsx
View File

@ -2,7 +2,7 @@ import React, { forwardRef, Ref } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import Box from '../../ui/box'; import Box from '../../ui/box';
import { import {
FONT_WEIGHT, FontWeight,
TextVariant, TextVariant,
TextColor, TextColor,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -49,7 +49,7 @@ export const Text = forwardRef(function Text(
let strongTagFontWeight; let strongTagFontWeight;
if (Tag === 'strong') { if (Tag === 'strong') {
strongTagFontWeight = FONT_WEIGHT.BOLD; strongTagFontWeight = FontWeight.Bold;
} }
const computedClassName = classnames( const computedClassName = classnames(

30
ui/components/component-library/text/text.types.ts
View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import type { BoxProps } from '../../ui/box/box.d'; import type { BoxProps } from '../../ui/box/box.d';
import { import {
FONT_WEIGHT, FontWeight,
FONT_STYLE, FontStyle,
TextVariant, TextVariant,
TEXT_ALIGN, TextAlign,
TEXT_TRANSFORM, TextTransform,
OVERFLOW_WRAP, OverflowWrap,
TextColor, TextColor,
Color, Color,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -70,35 +70,35 @@ export interface TextProps extends BoxProps {
*/ */
color?: TextColor | Color; 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 * ./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 * ./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 * ./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 * ./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 * 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) * Possible values: `LEFT_TO_RIGHT` (default), `RIGHT_TO_LEFT`, `AUTO` (user agent decides)
*/ */
textDirection?: TextDirection; 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 * ./ui/helpers/constants/design-system.js
*/ */
overflowWrap?: keyof typeof OVERFLOW_WRAP; overflowWrap?: OverflowWrap;
/** /**
* Used for long strings that can be cut off... * Used for long strings that can be cut off...
*/ */

35
ui/helpers/constants/design-system.ts
View File

@ -297,6 +297,15 @@ export const BLOCK_SIZES = {
FULL: 'full', FULL: 'full',
}; };
export enum TextAlign {
Left = 'left',
Center = 'center',
Right = 'right',
Justify = 'justify',
End = 'end',
Start = 'start',
}
export const TEXT_ALIGN = { export const TEXT_ALIGN = {
LEFT: 'left', LEFT: 'left',
CENTER: 'center', CENTER: 'center',
@ -306,24 +315,50 @@ export const TEXT_ALIGN = {
START: 'start', 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 = { export const TEXT_TRANSFORM = {
UPPERCASE: 'uppercase', UPPERCASE: 'uppercase',
LOWERCASE: 'lowercase', LOWERCASE: 'lowercase',
CAPITALIZE: 'capitalize', CAPITALIZE: 'capitalize',
}; };
export enum FontWeight {
Bold = 'bold',
Medium = 'medium',
Normal = 'normal',
}
export const FONT_WEIGHT = { export const FONT_WEIGHT = {
BOLD: 'bold', BOLD: 'bold',
MEDIUM: 'medium', MEDIUM: 'medium',
NORMAL: 'normal', NORMAL: 'normal',
}; };
export enum OverflowWrap {
BreakWord = 'break-word',
Anywhere = 'anywhere',
Normal = 'normal',
}
export const OVERFLOW_WRAP = { export const OVERFLOW_WRAP = {
BREAK_WORD: 'break-word', BREAK_WORD: 'break-word',
ANYWHERE: 'anywhere', ANYWHERE: 'anywhere',
NORMAL: 'normal', NORMAL: 'normal',
}; };
export enum FontStyle {
Italic = 'italic',
Normal = 'normal',
}
export const FONT_STYLE = { export const FONT_STYLE = {
ITALIC: 'italic', ITALIC: 'italic',
NORMAL: 'normal', NORMAL: 'normal',