From 81393e1b5d2c250038881dbfd88688e470c219a6 Mon Sep 17 00:00:00 2001 From: Garrett Bear Date: Mon, 17 Apr 2023 10:17:28 -0700 Subject: [PATCH] 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 * Update ui/components/component-library/text/README.mdx Co-authored-by: Nidhi Kumari * Update ui/components/component-library/text/README.mdx Co-authored-by: Danica Shen * Update ui/components/component-library/text/README.mdx Co-authored-by: Danica Shen * Update ui/components/component-library/text/README.mdx --------- Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> Co-authored-by: Danica Shen Co-authored-by: Nidhi Kumari --- .../component-library/text/README.mdx | 70 +++++++++---------- .../component-library/text/text.test.tsx | 40 +++++------ ui/components/component-library/text/text.tsx | 4 +- .../component-library/text/text.types.ts | 30 ++++---- ui/helpers/constants/design-system.ts | 35 ++++++++++ 5 files changed, 107 insertions(+), 72 deletions(-) diff --git a/ui/components/component-library/text/README.mdx b/ui/components/component-library/text/README.mdx index 9af0cf1b8..0aa0499a3 100644 --- a/ui/components/component-library/text/README.mdx +++ b/ui/components/component-library/text/README.mdx @@ -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` @@ -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'; - + normal - + medium - + bold ``` ### 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` @@ -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'; - + normal - + bold ``` ### 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 @@ -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'; - + uppercase - + lowercase - + capitalize ``` ### 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 @@ -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'; - + left - + center - + right - + justify - + end ``` ### 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 @@ -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';
- - {OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d + + {OverflowWrap.Normal}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d - - {OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d + + {OverflowWrap.BreakWord}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
; ``` @@ -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 -Demo; +Demo; // After -Demo; +Demo; ``` ### Box Props diff --git a/ui/components/component-library/text/text.test.tsx b/ui/components/component-library/text/text.test.tsx index 8a3f28eb8..b34eb75d7 100644 --- a/ui/components/component-library/text/text.test.tsx +++ b/ui/components/component-library/text/text.test.tsx @@ -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( <> - bold - medium - normal + bold + medium + normal , ); 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( <> - italic - normal + italic + normal , ); 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( <> - left - center - right - justify - end + left + center + right + justify + end , ); @@ -185,8 +185,8 @@ describe('Text', () => { it('should render the Text with proper overflow wrap class name', () => { const { getByText } = render( <> - break-word - normal + break-word + normal , ); 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( <> - uppercase - lowercase - capitalize + uppercase + lowercase + capitalize , ); expect(getByText('uppercase')).toHaveClass( diff --git a/ui/components/component-library/text/text.tsx b/ui/components/component-library/text/text.tsx index 64f18d836..7ada78ffb 100644 --- a/ui/components/component-library/text/text.tsx +++ b/ui/components/component-library/text/text.tsx @@ -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( diff --git a/ui/components/component-library/text/text.types.ts b/ui/components/component-library/text/text.types.ts index f8749db61..68fe42128 100644 --- a/ui/components/component-library/text/text.types.ts +++ b/ui/components/component-library/text/text.types.ts @@ -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... */ diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts index bc17859c0..37a01497b 100644 --- a/ui/helpers/constants/design-system.ts +++ b/ui/helpers/constants/design-system.ts @@ -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',