mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
TEXT_ALIGN to TextAlign in UI folder (#19235)
This commit is contained in:
Garrett Bear
GitHub
parent
c5a35b70c7
commit
53acfe271d
@ -14,42 +14,42 @@ Box is a utility component that can be used for layout or as a base for other UI
|
||||
|
||||
## Props
|
||||
|
||||
| Name | Description | Default |
|
||||
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||||
| children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - |
|
||||
| className | Additional className of the Box component | - |
|
||||
| margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] for responsive props | - |
|
||||
| marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginInline | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| display | Display values or array of Display values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| flexDirection | FlexDirection values or array of FlexDirection values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FlexDirection.Row |
|
||||
| flexWrap | FlexWrap values or array of FlexWrap values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| alignItems | AlignItems values or array of AlignItems values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| justifyContent | JustifyContent values or array of JustifyContent values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| textAlign | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| width | BlockSize values or array of BlockSize values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| height | BlockSize values or array of BlockSize values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| borderRadius | BorderRadius values or array of BorderRadius values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| borderStyle | BORDER_STYLE values or array of BORDER_STYLE values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' |
|
||||
| Name | Description | Default |
|
||||
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
|
||||
| children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - |
|
||||
| className | Additional className of the Box component | - |
|
||||
| margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] for responsive props | - |
|
||||
| marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginInline | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| marginInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
|
||||
| padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| display | Display values or array of Display values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| flexDirection | FlexDirection values or array of FlexDirection values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FlexDirection.Row |
|
||||
| flexWrap | FlexWrap values or array of FlexWrap values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| alignItems | AlignItems values or array of AlignItems values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| justifyContent | JustifyContent values or array of JustifyContent values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| textAlign | TextAlign values or array of TextAlign values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| width | BlockSize values or array of BlockSize values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| height | BlockSize values or array of BlockSize values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| borderRadius | BorderRadius values or array of BorderRadius values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| borderStyle | BORDER_STYLE values or array of BORDER_STYLE values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
|
||||
| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' |
|
||||
|
||||
## Usage
|
||||
|
||||
@ -368,10 +368,7 @@ import Box from '../../ui/box';
|
||||
BlockSize.OneFourth,
|
||||
]}
|
||||
>
|
||||
BlockSize.Full,
|
||||
BlockSize.Half,
|
||||
BlockSize.OneThird,
|
||||
BlockSize.OneFourth,
|
||||
BlockSize.Full, BlockSize.Half, BlockSize.OneThird, BlockSize.OneFourth,
|
||||
</Box>
|
||||
<Box
|
||||
width={[
|
||||
@ -381,10 +378,7 @@ import Box from '../../ui/box';
|
||||
BlockSize.OneFourth,
|
||||
]}
|
||||
>
|
||||
BlockSize.Full,
|
||||
BlockSize.Half,
|
||||
BlockSize.OneThird,
|
||||
BlockSize.OneFourth,
|
||||
BlockSize.Full, BlockSize.Half, BlockSize.OneThird, BlockSize.OneFourth,
|
||||
</Box>
|
||||
<Box
|
||||
width={[
|
||||
@ -394,10 +388,7 @@ import Box from '../../ui/box';
|
||||
BlockSize.OneFourth,
|
||||
]}
|
||||
>
|
||||
BlockSize.Full,
|
||||
BlockSize.Half,
|
||||
BlockSize.OneThird,
|
||||
BlockSize.OneFourth,
|
||||
BlockSize.Full, BlockSize.Half, BlockSize.OneThird, BlockSize.OneFourth,
|
||||
</Box>
|
||||
<Box
|
||||
width={[
|
||||
@ -407,10 +398,7 @@ import Box from '../../ui/box';
|
||||
BlockSize.OneFourth,
|
||||
]}
|
||||
>
|
||||
BlockSize.Full,
|
||||
BlockSize.Half,
|
||||
BlockSize.OneThird,
|
||||
BlockSize.OneFourth,
|
||||
BlockSize.Full, BlockSize.Half, BlockSize.OneThird, BlockSize.OneFourth,
|
||||
</Box>
|
||||
</Box>
|
||||
</>;
|
||||
|
||||
4
ui/components/ui/box/box.d.ts
vendored
4
ui/components/ui/box/box.d.ts
vendored
@ -340,10 +340,10 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
|
||||
justifyContent?: JustifyContent | JustifyContentArray;
|
||||
/**
|
||||
* The text-align of the Box component.
|
||||
* Use TEXT_ALIGN const from '../../../helpers/constants/design-system';
|
||||
* Use TextAlign enum from '../../../helpers/constants/design-system';
|
||||
* Accepts responsive props in the form of an array.
|
||||
*/
|
||||
textAlign?: BoxTextAlign | BoxTextAlignArray;
|
||||
textAlign?: BoxTextAlign | BoxTextAlignArray | TextAlign | TextAlignArray;
|
||||
/**
|
||||
* The display of the Box component.
|
||||
* Use DISPLAY const from '../../../helpers/constants/design-system';
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
TextColor,
|
||||
IconColor,
|
||||
JustifyContent,
|
||||
TEXT_ALIGN,
|
||||
TextAlign,
|
||||
FlexDirection,
|
||||
FlexWrap,
|
||||
BREAKPOINTS,
|
||||
@ -369,8 +369,8 @@ Box.propTypes = {
|
||||
alignItems: MultipleAlignItems,
|
||||
justifyContent: MultipleJustifyContents,
|
||||
textAlign: PropTypes.oneOfType([
|
||||
PropTypes.oneOf(Object.values(TEXT_ALIGN)),
|
||||
PropTypes.arrayOf(PropTypes.oneOf(Object.values(TEXT_ALIGN))),
|
||||
PropTypes.oneOf(Object.values(TextAlign)),
|
||||
PropTypes.arrayOf(PropTypes.oneOf(Object.values(TextAlign))),
|
||||
]),
|
||||
display: PropTypes.oneOfType([
|
||||
PropTypes.oneOf(Object.values(Display)),
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
Display,
|
||||
AlignItems,
|
||||
JustifyContent,
|
||||
TEXT_ALIGN,
|
||||
TextAlign,
|
||||
FlexDirection,
|
||||
FlexWrap,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
@ -125,7 +125,7 @@ export default {
|
||||
table: { category: 'display' },
|
||||
},
|
||||
textAlign: {
|
||||
options: Object.values(TEXT_ALIGN),
|
||||
options: Object.values(TextAlign),
|
||||
control: 'select',
|
||||
table: { category: 'text' },
|
||||
},
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
BorderStyle,
|
||||
DISPLAY,
|
||||
JustifyContent,
|
||||
TEXT_ALIGN,
|
||||
TextAlign,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import README from './README.mdx';
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
control: {
|
||||
type: 'select',
|
||||
},
|
||||
options: Object.values(TEXT_ALIGN),
|
||||
options: Object.values(TextAlign),
|
||||
},
|
||||
margin: {
|
||||
control: {
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useSelector } from 'react-redux';
|
||||
import Box from '../box';
|
||||
import { Color, TEXT_ALIGN } from '../../../helpers/constants/design-system';
|
||||
import { Color, TextAlign } from '../../../helpers/constants/design-system';
|
||||
import Identicon from '../identicon';
|
||||
import { getTokenList } from '../../../selectors';
|
||||
import { useNftsCollections } from '../../../hooks/useNftsCollections';
|
||||
@ -28,7 +28,7 @@ export default function NftCollectionImage({ assetName, tokenAddress }) {
|
||||
return (
|
||||
<Box
|
||||
color={Color.overlayInverse}
|
||||
textAlign={TEXT_ALIGN.CENTER}
|
||||
textAlign={TextAlign.Center}
|
||||
className="collection-image-alt"
|
||||
>
|
||||
{assetName?.[0]?.toUpperCase() ?? null}
|
||||
|
||||
@ -15,7 +15,7 @@ import {
|
||||
Size,
|
||||
BorderColor,
|
||||
IconColor,
|
||||
TEXT_ALIGN,
|
||||
TextAlign,
|
||||
BLOCK_SIZES,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
@ -96,7 +96,7 @@ const Popover = ({
|
||||
/>
|
||||
) : null}
|
||||
<Text
|
||||
textAlign={centerTitle ? TEXT_ALIGN.CENTER : TEXT_ALIGN.START}
|
||||
textAlign={centerTitle ? TextAlign.Center : TextAlign.Start}
|
||||
ellipsis
|
||||
variant={TextVariant.headingSm}
|
||||
as="h2"
|
||||
|
||||
@ -4,7 +4,7 @@ import classnames from 'classnames';
|
||||
import {
|
||||
BLOCK_SIZES,
|
||||
DISPLAY,
|
||||
TEXT_ALIGN,
|
||||
TextAlign,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
import Box from '../../box';
|
||||
|
||||
@ -37,7 +37,7 @@ const Tab = (props) => {
|
||||
<Box
|
||||
as="button"
|
||||
padding={2}
|
||||
textAlign={TEXT_ALIGN.CENTER}
|
||||
textAlign={TextAlign.Center}
|
||||
display={DISPLAY.BLOCK}
|
||||
width={BLOCK_SIZES.FULL}
|
||||
>
|
||||
|
||||
@ -165,7 +165,7 @@ import { FONT_STYLE } from '../../../helpers/constants/design-system';
|
||||
|
||||
### Align
|
||||
|
||||
Use the `align` prop and the `TEXT_ALIGN` object from `./ui/helpers/constants/design-system.js` to change the text alignment of the Typography component.
|
||||
Use the `align` prop and the `TextAlign` enum from `./ui/helpers/constants/design-system.js` to change the text alignment of the Typography component.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-ui-typography--align" />
|
||||
@ -174,21 +174,21 @@ Use the `align` prop and the `TEXT_ALIGN` object from `./ui/helpers/constants/de
|
||||
```jsx
|
||||
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
||||
import Typography from '../../ui/typography';
|
||||
import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
|
||||
import { TextAlign } from '../../../helpers/constants/design-system';
|
||||
|
||||
<Typography align={TEXT_ALIGN.LEFT}>
|
||||
<Typography align={TextAlign.Left}>
|
||||
left
|
||||
</Typography>
|
||||
<Typography align={TEXT_ALIGN.CENTER}>
|
||||
<Typography align={TextAlign.Center}>
|
||||
center
|
||||
</Typography>
|
||||
<Typography align={TEXT_ALIGN.RIGHT}>
|
||||
<Typography align={TextAlign.Right}>
|
||||
right
|
||||
</Typography>
|
||||
<Typography align={TEXT_ALIGN.JUSTIFY}>
|
||||
<Typography align={TextAlign.Justify}>
|
||||
justify
|
||||
</Typography>
|
||||
<Typography align={TEXT_ALIGN.END}>
|
||||
<Typography align={TextAlign.End}>
|
||||
end
|
||||
</Typography>
|
||||
```
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
Color,
|
||||
FONT_WEIGHT,
|
||||
FONT_STYLE,
|
||||
TEXT_ALIGN,
|
||||
TextAlign,
|
||||
TypographyVariant,
|
||||
OVERFLOW_WRAP,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
@ -152,10 +152,10 @@ Typography.propTypes = {
|
||||
*/
|
||||
fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)),
|
||||
/**
|
||||
* The text-align of the Typography component. Should use the TEXT_ALIGN object from
|
||||
* The text-align of the Typography component. Should use the TextAlign enum from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
align: PropTypes.oneOf(Object.values(TEXT_ALIGN)),
|
||||
align: PropTypes.oneOf(Object.values(TextAlign)),
|
||||
/**
|
||||
* The overflow-wrap of the Typography component. Should use the OVERFLOW_WRAP object from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import {
|
||||
FONT_WEIGHT,
|
||||
FONT_STYLE,
|
||||
TEXT_ALIGN,
|
||||
TextAlign,
|
||||
TypographyVariant,
|
||||
OVERFLOW_WRAP,
|
||||
DISPLAY,
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
},
|
||||
align: {
|
||||
control: { type: 'select' },
|
||||
options: Object.values(TEXT_ALIGN),
|
||||
options: Object.values(TextAlign),
|
||||
},
|
||||
overflowWrap: {
|
||||
control: { type: 'select' },
|
||||
@ -176,7 +176,7 @@ export const Color = (args) => {
|
||||
<React.Fragment key={color}>
|
||||
<Typography
|
||||
color={TextColor.textDefault}
|
||||
align={TEXT_ALIGN.CENTER}
|
||||
align={TextAlign.Center}
|
||||
boxProps={{
|
||||
backgroundColor: BackgroundColor.warningMuted,
|
||||
padding: 4,
|
||||
@ -280,7 +280,7 @@ export const Align = (args) => (
|
||||
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
|
||||
}}
|
||||
/>
|
||||
{Object.values(TEXT_ALIGN).map((align) => (
|
||||
{Object.values(TextAlign).map((align) => (
|
||||
<Typography
|
||||
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
|
||||
{...args}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user