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

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 ## Props
| Name | Description | Default | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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) | - | | 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 | | 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) | - | | 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) | - | | 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) | - | | 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 | - | | 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) | - | | 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) | - | | 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) | - | | 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) | - | | 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) | - | | 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) | - | | 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 | - | | 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) | - | | 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) | - | | 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' | | as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' |
## Usage ## Usage
@ -368,10 +368,7 @@ import Box from '../../ui/box';
BlockSize.OneFourth, BlockSize.OneFourth,
]} ]}
> >
BlockSize.Full, BlockSize.Full, BlockSize.Half, BlockSize.OneThird, BlockSize.OneFourth,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box> </Box>
<Box <Box
width={[ width={[
@ -381,10 +378,7 @@ import Box from '../../ui/box';
BlockSize.OneFourth, BlockSize.OneFourth,
]} ]}
> >
BlockSize.Full, BlockSize.Full, BlockSize.Half, BlockSize.OneThird, BlockSize.OneFourth,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box> </Box>
<Box <Box
width={[ width={[
@ -394,10 +388,7 @@ import Box from '../../ui/box';
BlockSize.OneFourth, BlockSize.OneFourth,
]} ]}
> >
BlockSize.Full, BlockSize.Full, BlockSize.Half, BlockSize.OneThird, BlockSize.OneFourth,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box> </Box>
<Box <Box
width={[ width={[
@ -407,10 +398,7 @@ import Box from '../../ui/box';
BlockSize.OneFourth, BlockSize.OneFourth,
]} ]}
> >
BlockSize.Full, BlockSize.Full, BlockSize.Half, BlockSize.OneThird, BlockSize.OneFourth,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box> </Box>
</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; justifyContent?: JustifyContent | JustifyContentArray;
/** /**
* The text-align of the Box component. * 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. * Accepts responsive props in the form of an array.
*/ */
textAlign?: BoxTextAlign | BoxTextAlignArray; textAlign?: BoxTextAlign | BoxTextAlignArray | TextAlign | TextAlignArray;
/** /**
* The display of the Box component. * The display of the Box component.
* Use DISPLAY const from '../../../helpers/constants/design-system'; * Use DISPLAY const from '../../../helpers/constants/design-system';

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

@ -11,7 +11,7 @@ import {
TextColor, TextColor,
IconColor, IconColor,
JustifyContent, JustifyContent,
TEXT_ALIGN, TextAlign,
FlexDirection, FlexDirection,
FlexWrap, FlexWrap,
BREAKPOINTS, BREAKPOINTS,
@ -369,8 +369,8 @@ Box.propTypes = {
alignItems: MultipleAlignItems, alignItems: MultipleAlignItems,
justifyContent: MultipleJustifyContents, justifyContent: MultipleJustifyContents,
textAlign: PropTypes.oneOfType([ textAlign: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(TEXT_ALIGN)), PropTypes.oneOf(Object.values(TextAlign)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(TEXT_ALIGN))), PropTypes.arrayOf(PropTypes.oneOf(Object.values(TextAlign))),
]), ]),
display: PropTypes.oneOfType([ display: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(Display)), PropTypes.oneOf(Object.values(Display)),

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

@ -11,7 +11,7 @@ import {
Display, Display,
AlignItems, AlignItems,
JustifyContent, JustifyContent,
TEXT_ALIGN, TextAlign,
FlexDirection, FlexDirection,
FlexWrap, FlexWrap,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -125,7 +125,7 @@ export default {
table: { category: 'display' }, table: { category: 'display' },
}, },
textAlign: { textAlign: {
options: Object.values(TEXT_ALIGN), options: Object.values(TextAlign),
control: 'select', control: 'select',
table: { category: 'text' }, table: { category: 'text' },
}, },

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

@ -7,7 +7,7 @@ import {
BorderStyle, BorderStyle,
DISPLAY, DISPLAY,
JustifyContent, JustifyContent,
TEXT_ALIGN, TextAlign,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import README from './README.mdx'; import README from './README.mdx';
@ -68,7 +68,7 @@ export default {
control: { control: {
type: 'select', type: 'select',
}, },
options: Object.values(TEXT_ALIGN), options: Object.values(TextAlign),
}, },
margin: { margin: {
control: { 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 PropTypes from 'prop-types';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import Box from '../box'; 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 Identicon from '../identicon';
import { getTokenList } from '../../../selectors'; import { getTokenList } from '../../../selectors';
import { useNftsCollections } from '../../../hooks/useNftsCollections'; import { useNftsCollections } from '../../../hooks/useNftsCollections';
@ -28,7 +28,7 @@ export default function NftCollectionImage({ assetName, tokenAddress }) {
return ( return (
<Box <Box
color={Color.overlayInverse} color={Color.overlayInverse}
textAlign={TEXT_ALIGN.CENTER} textAlign={TextAlign.Center}
className="collection-image-alt" className="collection-image-alt"
> >
{assetName?.[0]?.toUpperCase() ?? null} {assetName?.[0]?.toUpperCase() ?? null}

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

@ -15,7 +15,7 @@ import {
Size, Size,
BorderColor, BorderColor,
IconColor, IconColor,
TEXT_ALIGN, TextAlign,
BLOCK_SIZES, BLOCK_SIZES,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -96,7 +96,7 @@ const Popover = ({
/> />
) : null} ) : null}
<Text <Text
textAlign={centerTitle ? TEXT_ALIGN.CENTER : TEXT_ALIGN.START} textAlign={centerTitle ? TextAlign.Center : TextAlign.Start}
ellipsis ellipsis
variant={TextVariant.headingSm} variant={TextVariant.headingSm}
as="h2" as="h2"

4
ui/components/ui/tabs/tab/tab.component.js
View File

@ -4,7 +4,7 @@ import classnames from 'classnames';
import { import {
BLOCK_SIZES, BLOCK_SIZES,
DISPLAY, DISPLAY,
TEXT_ALIGN, TextAlign,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
import Box from '../../box'; import Box from '../../box';
@ -37,7 +37,7 @@ const Tab = (props) => {
<Box <Box
as="button" as="button"
padding={2} padding={2}
textAlign={TEXT_ALIGN.CENTER} textAlign={TextAlign.Center}
display={DISPLAY.BLOCK} display={DISPLAY.BLOCK}
width={BLOCK_SIZES.FULL} 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 ### 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> <Canvas>
<Story id="components-ui-typography--align" /> <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 ```jsx
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory // If importing from ui/components/app/[YOUR_COMPONENT]/ directory
import Typography from '../../ui/typography'; 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 left
</Typography> </Typography>
<Typography align={TEXT_ALIGN.CENTER}> <Typography align={TextAlign.Center}>
center center
</Typography> </Typography>
<Typography align={TEXT_ALIGN.RIGHT}> <Typography align={TextAlign.Right}>
right right
</Typography> </Typography>
<Typography align={TEXT_ALIGN.JUSTIFY}> <Typography align={TextAlign.Justify}>
justify justify
</Typography> </Typography>
<Typography align={TEXT_ALIGN.END}> <Typography align={TextAlign.End}>
end end
</Typography> </Typography>
``` ```

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

@ -5,7 +5,7 @@ import {
Color, Color,
FONT_WEIGHT, FONT_WEIGHT,
FONT_STYLE, FONT_STYLE,
TEXT_ALIGN, TextAlign,
TypographyVariant, TypographyVariant,
OVERFLOW_WRAP, OVERFLOW_WRAP,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -152,10 +152,10 @@ Typography.propTypes = {
*/ */
fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)), 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 * ./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 * The overflow-wrap of the Typography component. Should use the OVERFLOW_WRAP object from
* ./ui/helpers/constants/design-system.js * ./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 { import {
FONT_WEIGHT, FONT_WEIGHT,
FONT_STYLE, FONT_STYLE,
TEXT_ALIGN, TextAlign,
TypographyVariant, TypographyVariant,
OVERFLOW_WRAP, OVERFLOW_WRAP,
DISPLAY, DISPLAY,
@ -51,7 +51,7 @@ export default {
}, },
align: { align: {
control: { type: 'select' }, control: { type: 'select' },
options: Object.values(TEXT_ALIGN), options: Object.values(TextAlign),
}, },
overflowWrap: { overflowWrap: {
control: { type: 'select' }, control: { type: 'select' },
@ -176,7 +176,7 @@ export const Color = (args) => {
<React.Fragment key={color}> <React.Fragment key={color}>
<Typography <Typography
color={TextColor.textDefault} color={TextColor.textDefault}
align={TEXT_ALIGN.CENTER} align={TextAlign.Center}
boxProps={{ boxProps={{
backgroundColor: BackgroundColor.warningMuted, backgroundColor: BackgroundColor.warningMuted,
padding: 4, padding: 4,
@ -280,7 +280,7 @@ export const Align = (args) => (
href: 'https://github.com/MetaMask/metamask-extension/issues/17670', href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
}} }}
/> />
{Object.values(TEXT_ALIGN).map((align) => ( {Object.values(TextAlign).map((align) => (
<Typography <Typography
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }} boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
{...args} {...args}