m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

TEXT_ALIGN to TextAlign in UI folder (#19235)

Browse Source
This commit is contained in:
Garrett Bear 2023-05-23 13:57:07 -07:00 committed by GitHub
parent c5a35b70c7
commit 53acfe271d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 69 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
ui/components/ui/box/README.mdx
View File

@ -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
View File

@ -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';

6
ui/components/ui/box/box.js
View File

@ -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)),

4
ui/components/ui/box/box.stories.tsx
View File

@ -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' },
},

4
ui/components/ui/card/card.stories.js
View File

@ -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: {

4
ui/components/ui/nft-collection-image/nft-collection-image.js
View File

@ -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}

4
ui/components/ui/popover/popover.component.js
View File

@ -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
ui/components/ui/tabs/tab/tab.component.js
View File

@ -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}
>

14
ui/components/ui/typography/README.mdx
View File

@ -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>
```

6
ui/components/ui/typography/typography.js
View File

@ -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

8
ui/components/ui/typography/typography.stories.js
View File

@ -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}