mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-25 03:20:23 +01:00
Removing unused deprecated Text component (#20119)
This commit is contained in:
George Marshall
GitHub
parent
4c881f70fe
commit
c9ce85bd85
@ -1,71 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Text should render the Text with proper variant class name 1`] = `
|
||||
<div>
|
||||
<h1
|
||||
class="box mm-text mm-text--display-md box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
display-md
|
||||
</h1>
|
||||
<h2
|
||||
class="box mm-text mm-text--heading-lg box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
heading-lg
|
||||
</h2>
|
||||
<h3
|
||||
class="box mm-text mm-text--heading-md box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
heading-md
|
||||
</h3>
|
||||
<h4
|
||||
class="box mm-text mm-text--heading-sm box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
heading-sm
|
||||
</h4>
|
||||
<p
|
||||
class="box mm-text mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
body-lg-medium
|
||||
</p>
|
||||
<p
|
||||
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
body-md
|
||||
</p>
|
||||
<p
|
||||
class="box mm-text mm-text--body-md-medium box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
body-md-medium
|
||||
</p>
|
||||
<p
|
||||
class="box mm-text mm-text--body-md-bold box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
body-md-bold
|
||||
</p>
|
||||
<p
|
||||
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
body-sm
|
||||
</p>
|
||||
<p
|
||||
class="box mm-text mm-text--body-sm-medium box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
body-sm-medium
|
||||
</p>
|
||||
<p
|
||||
class="box mm-text mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
body-sm-bold
|
||||
</p>
|
||||
<p
|
||||
class="box mm-text mm-text--body-xs box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
body-xs
|
||||
</p>
|
||||
<p
|
||||
class="box mm-text mm-text--body-xs-medium box--flex-direction-row box--color-text-default"
|
||||
>
|
||||
body-xs-medium
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
@ -1,3 +0,0 @@
|
||||
export { Text } from './text';
|
||||
export { ValidTag, TextDirection, InvisibleCharacter } from './text.types';
|
||||
export type { TextProps, ValidTagType } from './text.types';
|
||||
@ -1,249 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import {
|
||||
FontStyle,
|
||||
FontWeight,
|
||||
OverflowWrap,
|
||||
TextAlign,
|
||||
TextColor,
|
||||
TextTransform,
|
||||
TextVariant,
|
||||
Color,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
import { TextDirection } from './text.types';
|
||||
import { Text } from '.';
|
||||
|
||||
describe('Text', () => {
|
||||
it('should render the Text without crashing', () => {
|
||||
const { getByText } = render(<Text>Test type</Text>);
|
||||
expect(getByText('Test type')).toBeDefined();
|
||||
});
|
||||
it('should render the Text with correct html elements', () => {
|
||||
const { getByText, container } = render(
|
||||
<>
|
||||
<Text as="p">p</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="span">span</Text>
|
||||
<Text as="strong">strong</Text>
|
||||
<Text as="em">em</Text>
|
||||
<Text as="li">li</Text>
|
||||
<Text as="div">div</Text>
|
||||
<Text as="dt">dt</Text>
|
||||
<Text as="dd">dd</Text>
|
||||
</>,
|
||||
);
|
||||
expect(container.querySelector('p')).toBeDefined();
|
||||
expect(getByText('p')).toBeDefined();
|
||||
expect(container.querySelector('h1')).toBeDefined();
|
||||
expect(getByText('h1')).toBeDefined();
|
||||
expect(container.querySelector('h2')).toBeDefined();
|
||||
expect(getByText('h2')).toBeDefined();
|
||||
expect(container.querySelector('h3')).toBeDefined();
|
||||
expect(getByText('h3')).toBeDefined();
|
||||
expect(container.querySelector('h4')).toBeDefined();
|
||||
expect(getByText('h4')).toBeDefined();
|
||||
expect(container.querySelector('h5')).toBeDefined();
|
||||
expect(getByText('h5')).toBeDefined();
|
||||
expect(container.querySelector('h6')).toBeDefined();
|
||||
expect(getByText('h6')).toBeDefined();
|
||||
expect(container.querySelector('span')).toBeDefined();
|
||||
expect(getByText('span')).toBeDefined();
|
||||
expect(container.querySelector('strong')).toBeDefined();
|
||||
expect(getByText('strong')).toBeDefined();
|
||||
expect(container.querySelector('em')).toBeDefined();
|
||||
expect(getByText('em')).toBeDefined();
|
||||
expect(container.querySelector('li')).toBeDefined();
|
||||
expect(getByText('li')).toBeDefined();
|
||||
expect(container.querySelector('div')).toBeDefined();
|
||||
expect(getByText('div')).toBeDefined();
|
||||
expect(container.querySelector('dt')).toBeDefined();
|
||||
expect(getByText('dt')).toBeDefined();
|
||||
expect(container.querySelector('dd')).toBeDefined();
|
||||
expect(getByText('dd')).toBeDefined();
|
||||
});
|
||||
|
||||
it('should render the Text with proper variant class name', () => {
|
||||
const { getByText, container } = render(
|
||||
<>
|
||||
<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.bodyMdMedium}>body-md-medium</Text>
|
||||
<Text variant={TextVariant.bodyMdBold}>body-md-bold</Text>
|
||||
<Text variant={TextVariant.bodySm}>body-sm</Text>
|
||||
<Text variant={TextVariant.bodySmMedium}>body-sm-medium</Text>
|
||||
<Text variant={TextVariant.bodySmBold}>body-sm-bold</Text>
|
||||
<Text variant={TextVariant.bodyXs}>body-xs</Text>
|
||||
<Text variant={TextVariant.bodyXsMedium}>body-xs-medium</Text>
|
||||
</>,
|
||||
);
|
||||
|
||||
expect(getByText('display-md')).toHaveClass('mm-text--display-md');
|
||||
expect(getByText('heading-lg')).toHaveClass('mm-text--heading-lg');
|
||||
expect(getByText('heading-md')).toHaveClass('mm-text--heading-md');
|
||||
expect(getByText('heading-sm')).toHaveClass('mm-text--heading-sm');
|
||||
expect(getByText('body-lg-medium')).toHaveClass('mm-text--body-lg-medium');
|
||||
expect(getByText('body-md')).toHaveClass('mm-text--body-md');
|
||||
expect(getByText('body-md-medium')).toHaveClass('mm-text--body-md-medium');
|
||||
expect(getByText('body-md-bold')).toHaveClass('mm-text--body-md-bold');
|
||||
expect(getByText('body-sm')).toHaveClass('mm-text--body-sm');
|
||||
expect(getByText('body-sm-medium')).toHaveClass('mm-text--body-sm-medium');
|
||||
expect(getByText('body-sm-bold')).toHaveClass('mm-text--body-sm-bold');
|
||||
expect(getByText('body-xs')).toHaveClass('mm-text--body-xs');
|
||||
expect(getByText('body-xs-medium')).toHaveClass('mm-text--body-xs-medium');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render the Text with proper font weight class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<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');
|
||||
expect(getByText('medium')).toHaveClass('mm-text--font-weight-medium');
|
||||
expect(getByText('normal')).toHaveClass('mm-text--font-weight-normal');
|
||||
});
|
||||
|
||||
it('should render the Text with proper text color class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<Text color={TextColor.textDefault}>text-default</Text>
|
||||
<Text color={TextColor.textAlternative}>text-alternative</Text>
|
||||
<Text color={TextColor.textMuted}>text-muted</Text>
|
||||
<Text color={Color.overlayInverse}>overlay-inverse</Text>
|
||||
<Text color={TextColor.primaryDefault}>primary-default</Text>
|
||||
<Text color={TextColor.primaryInverse}>primary-inverse</Text>
|
||||
<Text color={TextColor.errorDefault}>error-default</Text>
|
||||
<Text color={TextColor.errorInverse}>error-inverse</Text>
|
||||
<Text color={TextColor.successDefault}>success-default</Text>
|
||||
<Text color={TextColor.successInverse}>success-inverse</Text>
|
||||
<Text color={TextColor.warningInverse}>warning-inverse</Text>
|
||||
<Text color={TextColor.infoDefault}>info-default</Text>
|
||||
<Text color={TextColor.infoInverse}>info-inverse</Text>
|
||||
</>,
|
||||
);
|
||||
expect(getByText('text-default')).toHaveClass('box--color-text-default');
|
||||
expect(getByText('text-alternative')).toHaveClass(
|
||||
'box--color-text-alternative',
|
||||
);
|
||||
expect(getByText('text-muted')).toHaveClass('box--color-text-muted');
|
||||
expect(getByText('primary-default')).toHaveClass(
|
||||
'box--color-primary-default',
|
||||
);
|
||||
expect(getByText('primary-inverse')).toHaveClass(
|
||||
'box--color-primary-inverse',
|
||||
);
|
||||
expect(getByText('error-default')).toHaveClass('box--color-error-default');
|
||||
expect(getByText('error-inverse')).toHaveClass('box--color-error-inverse');
|
||||
expect(getByText('success-default')).toHaveClass(
|
||||
'box--color-success-default',
|
||||
);
|
||||
expect(getByText('success-inverse')).toHaveClass(
|
||||
'box--color-success-inverse',
|
||||
);
|
||||
expect(getByText('warning-inverse')).toHaveClass(
|
||||
'box--color-warning-inverse',
|
||||
);
|
||||
expect(getByText('info-default')).toHaveClass('box--color-info-default');
|
||||
expect(getByText('info-inverse')).toHaveClass('box--color-info-inverse');
|
||||
});
|
||||
|
||||
it('should render the Text with proper font style class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<Text fontStyle={FontStyle.Italic}>italic</Text>
|
||||
<Text fontStyle={FontStyle.Normal}>normal</Text>
|
||||
</>,
|
||||
);
|
||||
expect(getByText('italic')).toHaveClass('mm-text--font-style-italic');
|
||||
expect(getByText('normal')).toHaveClass('mm-text--font-style-normal');
|
||||
});
|
||||
|
||||
it('should render the Text with proper text align class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<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>
|
||||
</>,
|
||||
);
|
||||
|
||||
expect(getByText('left')).toHaveClass('mm-text--text-align-left');
|
||||
expect(getByText('center')).toHaveClass('mm-text--text-align-center');
|
||||
expect(getByText('right')).toHaveClass('mm-text--text-align-right');
|
||||
expect(getByText('justify')).toHaveClass('mm-text--text-align-justify');
|
||||
expect(getByText('end')).toHaveClass('mm-text--text-align-end');
|
||||
});
|
||||
|
||||
it('should render the Text with proper overflow wrap class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<Text overflowWrap={OverflowWrap.BreakWord}>break-word</Text>
|
||||
<Text overflowWrap={OverflowWrap.Normal}>normal</Text>
|
||||
</>,
|
||||
);
|
||||
expect(getByText('break-word')).toHaveClass(
|
||||
'mm-text--overflow-wrap-break-word',
|
||||
);
|
||||
expect(getByText('normal')).toHaveClass('mm-text--overflow-wrap-normal');
|
||||
});
|
||||
|
||||
it('should render the Text with proper ellipsis class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<Text ellipsis>ellipsis</Text>
|
||||
</>,
|
||||
);
|
||||
expect(getByText('ellipsis')).toHaveClass('mm-text--ellipsis');
|
||||
});
|
||||
|
||||
it('should render the Text with proper text transform class name', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<Text textTransform={TextTransform.Uppercase}>uppercase</Text>
|
||||
<Text textTransform={TextTransform.Lowercase}>lowercase</Text>
|
||||
<Text textTransform={TextTransform.Capitalize}>capitalize</Text>
|
||||
</>,
|
||||
);
|
||||
expect(getByText('uppercase')).toHaveClass(
|
||||
'mm-text--text-transform-uppercase',
|
||||
);
|
||||
expect(getByText('lowercase')).toHaveClass(
|
||||
'mm-text--text-transform-lowercase',
|
||||
);
|
||||
expect(getByText('capitalize')).toHaveClass(
|
||||
'mm-text--text-transform-capitalize',
|
||||
);
|
||||
});
|
||||
it('should accept a ref prop that is passed down to the html element', () => {
|
||||
const mockRef = jest.fn();
|
||||
render(<Text ref={mockRef} />);
|
||||
expect(mockRef).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should render the Text with proper direction', () => {
|
||||
const { getByText } = render(
|
||||
<>
|
||||
<Text textDirection={TextDirection.Auto}>auto</Text>
|
||||
<Text textDirection={TextDirection.LeftToRight}>ltr</Text>
|
||||
<Text textDirection={TextDirection.RightToLeft}>rtl</Text>
|
||||
</>,
|
||||
);
|
||||
expect(getByText('auto')).toHaveAttribute('dir', 'auto');
|
||||
expect(getByText('ltr')).toHaveAttribute('dir', 'ltr');
|
||||
expect(getByText('rtl')).toHaveAttribute('dir', 'rtl');
|
||||
});
|
||||
});
|
||||
@ -1,89 +0,0 @@
|
||||
import React, { forwardRef, Ref } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import Box from '../../../ui/box';
|
||||
import {
|
||||
FontWeight,
|
||||
TextVariant,
|
||||
TextColor,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
import { TextProps } from './text.types';
|
||||
|
||||
const getTextElementDefault = (variant: TextVariant) => {
|
||||
switch (variant) {
|
||||
case TextVariant.displayMd:
|
||||
return 'h1';
|
||||
case TextVariant.headingLg:
|
||||
return 'h2';
|
||||
case TextVariant.headingMd:
|
||||
return 'h3';
|
||||
case TextVariant.headingSm:
|
||||
return 'h4';
|
||||
case TextVariant.inherit:
|
||||
return 'span';
|
||||
// TextVariant.bodyLgMedium, TextVariant.bodyMd, TextVariant.bodyMdBold, TextVariant.bodySm, TextVariant.bodySmBold, TextVariant.bodyXs use default 'p' tag
|
||||
default:
|
||||
return 'p';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated This version of the `<Text />` component has been deprecated
|
||||
* Use `import { Text } from '../../component-library';` instead
|
||||
*/
|
||||
|
||||
export const Text = forwardRef(function Text(
|
||||
{
|
||||
variant = TextVariant.bodyMd,
|
||||
color = TextColor.textDefault,
|
||||
fontWeight,
|
||||
fontStyle,
|
||||
textTransform,
|
||||
textAlign,
|
||||
textDirection,
|
||||
overflowWrap,
|
||||
ellipsis,
|
||||
as,
|
||||
className = '',
|
||||
children,
|
||||
...props
|
||||
}: TextProps,
|
||||
ref: Ref<HTMLElement>,
|
||||
) {
|
||||
// Check if as is set otherwise set a default tag based on variant
|
||||
const Tag = as ?? getTextElementDefault(variant);
|
||||
let strongTagFontWeight;
|
||||
|
||||
if (Tag === 'strong') {
|
||||
strongTagFontWeight = FontWeight.Bold;
|
||||
}
|
||||
|
||||
const computedClassName = classnames(
|
||||
'mm-text',
|
||||
className,
|
||||
`mm-text--${variant}`,
|
||||
{
|
||||
[`mm-text--font-weight-${strongTagFontWeight || fontWeight}`]: Boolean(
|
||||
strongTagFontWeight || fontWeight,
|
||||
),
|
||||
[`mm-text--font-style-${String(fontStyle)}`]: Boolean(fontStyle),
|
||||
[`mm-text--ellipsis`]: Boolean(ellipsis),
|
||||
[`mm-text--text-transform-${String(textTransform)}`]:
|
||||
Boolean(textTransform),
|
||||
[`mm-text--text-align-${String(textAlign)}`]: Boolean(textAlign),
|
||||
[`mm-text--overflow-wrap-${String(overflowWrap)}`]: Boolean(overflowWrap),
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<Box
|
||||
className={classnames(computedClassName)}
|
||||
as={Tag}
|
||||
dir={textDirection}
|
||||
color={color}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
@ -1,146 +0,0 @@
|
||||
import React from 'react';
|
||||
import type { BoxProps } from '../../../ui/box/box.d';
|
||||
import {
|
||||
FontWeight,
|
||||
FontStyle,
|
||||
TextVariant,
|
||||
TextAlign,
|
||||
TextTransform,
|
||||
OverflowWrap,
|
||||
TextColor,
|
||||
Color,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
|
||||
export enum TextDirection {
|
||||
LeftToRight = 'ltr',
|
||||
RightToLeft = 'rtl',
|
||||
Auto = 'auto',
|
||||
}
|
||||
|
||||
/**
|
||||
* The InvisibleCharacter is a very useful tool if you want to make sure a line of text
|
||||
* takes up vertical space even if it's empty.
|
||||
*/
|
||||
export const InvisibleCharacter = '\u200B';
|
||||
|
||||
/**
|
||||
* @deprecated ValidTag enum is deprecated in favor of a union of strings.
|
||||
* To change the root html element tag of the Text component, use the `as` prop and string value.
|
||||
* e.g. `<Text as="h1">Hello World</Text>`
|
||||
*
|
||||
* Contribute to replacing the enum with a union of string by submitting a PR
|
||||
*/
|
||||
|
||||
export enum ValidTag {
|
||||
Dd = 'dd',
|
||||
Div = 'div',
|
||||
Dt = 'dt',
|
||||
Em = 'em',
|
||||
H1 = 'h1',
|
||||
H2 = 'h2',
|
||||
H3 = 'h3',
|
||||
H4 = 'h4',
|
||||
H5 = 'h5',
|
||||
H6 = 'h6',
|
||||
Li = 'li',
|
||||
P = 'p',
|
||||
Span = 'span',
|
||||
Strong = 'strong',
|
||||
Ul = 'ul',
|
||||
Label = 'label',
|
||||
Input = 'input',
|
||||
Header = 'header',
|
||||
}
|
||||
|
||||
export type ValidTagType =
|
||||
| 'dd'
|
||||
| 'div'
|
||||
| 'dt'
|
||||
| 'em'
|
||||
| 'h1'
|
||||
| 'h2'
|
||||
| 'h3'
|
||||
| 'h4'
|
||||
| 'h5'
|
||||
| 'h6'
|
||||
| 'li'
|
||||
| 'p'
|
||||
| 'span'
|
||||
| 'strong'
|
||||
| 'ul'
|
||||
| 'label'
|
||||
| 'input'
|
||||
| 'header';
|
||||
|
||||
export interface TextProps extends BoxProps {
|
||||
/**
|
||||
* The text content of the Text component
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* The variation of font styles including sizes and weights of the Text component
|
||||
* Possible values:
|
||||
* `displayMd` large screen: 48px / small screen: 32px,
|
||||
* `headingLg` large screen: 32px / small screen: 24px,
|
||||
* `headingMd` large screen: 24px / small screen: 18px,
|
||||
* `headingSm` large screen: 18px / small screen: 16px,
|
||||
* `bodyLgMedium` large screen: 18px / small screen: 16px,
|
||||
* `bodyMd` large screen: 16px / small screen: 14px,
|
||||
* `bodyMdMedium` large screen: 16px / small screen: 14px,
|
||||
* `bodyMdBold` large screen: 16px / small screen: 14px,
|
||||
* `bodySm` large screen: 14px / small screen: 12px,
|
||||
* `bodySmMedium` large screen: 14px / small screen: 12px,
|
||||
* `bodySmBold` large screen: 14px / small screen: 12px,
|
||||
* `bodyXsMedium` large screen: 12px / small screen: 10px,
|
||||
* `bodyXs` large screen: 12px / small screen: 10px,
|
||||
* `inherit`
|
||||
*/
|
||||
variant?: TextVariant;
|
||||
/**
|
||||
* The color of the Text component Should use the COLOR object from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
color?: TextColor | Color;
|
||||
/**
|
||||
* The font-weight of the Text component. Should use the FontWeight enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
fontWeight?: FontWeight;
|
||||
/**
|
||||
* The font-style of the Text component. Should use the FontStyle enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
fontStyle?: FontStyle;
|
||||
/**
|
||||
* The textTransform of the Text component. Should use the TextTransform enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
textTransform?: TextTransform;
|
||||
/**
|
||||
* The text-align of the Text component. Should use the TextAlign enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
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 OverflowWrap enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
overflowWrap?: OverflowWrap;
|
||||
/**
|
||||
* Used for long strings that can be cut off...
|
||||
*/
|
||||
ellipsis?: boolean;
|
||||
/**
|
||||
* Changes the root html element tag of the Text component.
|
||||
*/
|
||||
as?: ValidTagType;
|
||||
/**
|
||||
* Additional className to assign the Text component
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user