Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate remaining design system constants to enums #19133

Merged
merged 1 commit into from
May 17, 2023
Merged

Migrate remaining design system constants to enums #19133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 76 additions & 68 deletions ui/components/ui/box/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ Box is a utility component that can be used for layout or as a base for other UI
| 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 | FLEX_DIRECTION values or array of FLEX_DIRECTION 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) | FLEX_DIRECTION.ROW |
| flexWrap | FLEX_WRAP values or array of FLEX_WRAP 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 |
| 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 | BLOCK_SIZES values or array of BLOCK_SIZES 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 | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props [../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) | - |
Expand Down Expand Up @@ -115,31 +115,31 @@ Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12` or array of these values

The `display` prop can be used to set the display of the `Box` component. All of the display props accept [responsive props](#responsive-props) in the form of array props.

Accepted props imported from the design system `DISPLAY` const are:
Accepted props imported from the design system `Display` const are:

- `DISPLAY.BLOCK`
- `DISPLAY.FLEX`
- `DISPLAY.GRID`
- `DISPLAY.INLINE_BLOCK`
- `DISPLAY.INLINE_FLEX`
- `DISPLAY.INLINE_GRID`
- `DISPLAY.INLINE`
- `DISPLAY.LIST_ITEM`
- `DISPLAY.NONE`
- `Display.Block`
- `Display.Flex`
- `Display.Grid`
- `Display.InlineBlock`
- `Display.InlineFlex`
- `Display.InlineGrid`
- `Display.Inline`
- `Display.ListItem`
- `Display.None`

or array of these values.

```jsx
import { DISPLAY } from '../../../helpers/constants/design-system';
import { Display } from '../../../helpers/constants/design-system';
import Box from '../ui/box';

<Box display={DISPLAY.BLOCK} />
<Box display={DISPLAY.FLEX} />
<Box display={DISPLAY.GRID} />
<Box display={DISPLAY.INLINE_BLOCK} />
<Box display={DISPLAY.INLINE_FLEX} />
<Box display={DISPLAY.INLINE} />
<Box display={DISPLAY.NONE} />
<Box display={Display.Block} />
<Box display={Display.Flex} />
<Box display={Display.Grid} />
<Box display={Display.InlineBlock} />
<Box display={Display.InlineFlex} />
<Box display={Display.Inline} />
<Box display={Display.None} />
```

### Color
Expand Down Expand Up @@ -318,91 +318,99 @@ import Box from '../../ui/box';

### Width

Use the `width` prop to pass a singular `BLOCK_SIZES` or for a responsive width pass an array up to 4 `BLOCK_SIZES`
Use the `width` prop to pass a singular `BlockSize` or for a responsive width pass an array up to 4 `BlockSize`

Responsive widths go from smallest to largest screen sizes

Example: [BLOCK_SIZES.HALF, BLOCK_SIZES.THREE_FOURTHS, BLOCK_SIZES.ONE_FIFTH, BLOCK_SIZES.THREE_SIXTHS]
Example: [BlockSize.Half, BlockSize.ThreeFourths, BlockSize.OneFifth, BlockSize.ThreeSixths]

- BLOCK_SIZES.HALF is the default width for `base screen size (0px)` and up
- BLOCK_SIZES.THREE_FOURTHS is the width for `small screen size (576px) ` and up
- BLOCK_SIZES.ONE_FIFTH is the width for `medium screen size (768px)` and up
- BLOCK_SIZES.THREE_SIXTHS is the width for `large screen size (1280px)` and up
- BlockSize.Half is the default width for `base screen size (0px)` and up
- BlockSize.ThreeFourths is the width for `small screen size (576px) ` and up
- BlockSize.OneFifth is the width for `medium screen size (768px)` and up
- BlockSize.ThreeSixths is the width for `large screen size (1280px)` and up

<Canvas>
<Story id="components-ui-box--width" />
</Canvas>

```jsx
import {
BLOCK_SIZES,
DISPLAY,
FLEX_WRAP,
BlockSize,
Display,
FlexWrap,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';

<>
<p>Static widths</p>

<Box display={DISPLAY.FLEX}>
<Box width={BLOCK_SIZES.FULL}>BLOCK_SIZES.FULL</Box>
<Box width={BLOCK_SIZES.HALF}>BLOCK_SIZES.HALF</Box>
<Box width={BLOCK_SIZES.HALF}>BLOCK_SIZES.HALF</Box>
<Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
<Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
<Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
<Box display={Display.Flex}>
<Box width={BlockSize.Full}>BlockSize.Full</Box>
<Box width={BlockSize.Half}>BlockSize.Half</Box>
<Box width={BlockSize.Half}>BlockSize.Half</Box>
<Box width={BlockSize.OneThird}>BlockSize.OneThird</Box>
<Box width={BlockSize.OneThird}>BlockSize.OneThird</Box>
<Box width={BlockSize.OneThird}>BlockSize.OneThird</Box>
<Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
<Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
<Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
<Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
</Box>

<p>Responsive widths</p>

<Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP}>
<Box display={Display.Flex} flexWrap={FlexWrap.Wrap}>
<Box
width={[
BLOCK_SIZES.FULL,
BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
]}
>
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box>
<Box
width={[
BLOCK_SIZES.FULL,
BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
]}
>
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box>
<Box
width={[
BLOCK_SIZES.FULL,
BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
]}
>
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box>
<Box
width={[
BLOCK_SIZES.FULL,
BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
]}
>
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box>
</Box>
</>;
Expand Down
101 changes: 77 additions & 24 deletions ui/components/ui/box/box.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,61 +2,109 @@ import * as React from 'react';

import {
AlignItems,
BlockSize,
BLOCK_SIZES,
BorderStyle,
BackgroundColor,
BorderColor,
TextColor,
IconColor,
Display,
DISPLAY,
JustifyContent,
TextAlign,
TEXT_ALIGN,
FlexDirection,
FLEX_DIRECTION,
FlexWrap,
FLEX_WRAP,
BorderRadius,
} from '../../../helpers/constants/design-system';

export type BoxChildren = React.ReactNode | ((...args: any[]) => any);

export type BoxFlexDirection =
export type FlexDirectionArray = [
FlexDirection,
FlexDirection?,
FlexDirection?,
FlexDirection?,
];

/**
* @deprecated BoxFlexDirection is deprecated. Use FlexDirection instead.
*/
type BoxFlexDirection =
| (typeof FLEX_DIRECTION)[keyof typeof FLEX_DIRECTION]
| null;
export type BoxFlexDirectionArray = [

/**
* @deprecated BoxFlexDirectionArray is deprecated. Use FlexDirectionArray instead.
*/
type BoxFlexDirectionArray = [
BoxFlexDirection,
BoxFlexDirection?,
BoxFlexDirection?,
BoxFlexDirection?,
];

export type BoxFlexWrap = (typeof FLEX_WRAP)[keyof typeof FLEX_WRAP] | null;
export type BoxFlexWrapArray = [
BoxFlexWrap,
BoxFlexWrap?,
BoxFlexWrap?,
BoxFlexWrap?,
];
export type FlexWrapArray = [FlexWrap, FlexWrap?, FlexWrap?, FlexWrap?];

/**
* @deprecated BoxFlexWrap is deprecated. Use FlexWrap instead.
*/
type BoxFlexWrap = (typeof FLEX_WRAP)[keyof typeof FLEX_WRAP] | null;

/**
* @deprecated BoxFlexWrapArray is deprecated. Use FlexWrapArray instead.
*/
type BoxFlexWrapArray = [BoxFlexWrap, BoxFlexWrap?, BoxFlexWrap?, BoxFlexWrap?];

export type BoxTextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN] | null;
export type BoxTextAlignArray = [
export type TextAlignArray = [TextAlign, TextAlign?, TextAlign?, TextAlign?];

/**
* @deprecated BoxTextAlign is deprecated. Use TextAlign instead.
*/
type BoxTextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN] | null;
/**
* @deprecated BoxTextAlignArray is deprecated. Use TextAlignArray instead.
*/
type BoxTextAlignArray = [
BoxTextAlign,
BoxTextAlign?,
BoxTextAlign?,
BoxTextAlign?,
];

export type BoxDisplay = (typeof DISPLAY)[keyof typeof DISPLAY] | null;
export type BoxDisplayArray = [
BoxDisplay,
BoxDisplay?,
BoxDisplay?,
BoxDisplay?,
];
export type DisplayArray = [Display, Display?, Display?, Display?];

/**
* @deprecated BoxDisplay is deprecated. Use Display instead.
*/
type BoxDisplay = (typeof DISPLAY)[keyof typeof DISPLAY] | null;
/**
* @deprecated BoxDisplayArray is deprecated. Use DisplayArray instead.
*/
type BoxDisplayArray = [BoxDisplay, BoxDisplay?, BoxDisplay?, BoxDisplay?];

export type BlockSizeArray = [BlockSize, BlockSize?, BlockSize?, BlockSize?];

/**
* @deprecated BoxWidth is deprecated. Use BlockSize instead.
*/
export type BoxWidth = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null;
/**
* @deprecated BoxWidthArray is deprecated. Use BlockSizeArray instead.
*/
export type BoxWidthArray = [BoxWidth, BoxWidth?, BoxWidth?, BoxWidth?];

export type BoxHeight = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null;
export type BoxHeightArray = [BoxHeight, BoxHeight?, BoxHeight?, BoxHeight?];
/**
* @deprecated BoxHeight is deprecated. Use BlockSize instead.
*/
type BoxHeight = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null;
/**
* @deprecated BoxHeightArray is deprecated. Use BlockSizeArray instead.
*/
type BoxHeightArray = [BoxHeight, BoxHeight?, BoxHeight?, BoxHeight?];

export type SizeNumber =
| 0
Expand Down Expand Up @@ -130,6 +178,7 @@ export type BackgroundColorArray = [
BackgroundColor?,
BackgroundColor?,
];

export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
/**
* The content of the Box component.
Expand All @@ -140,7 +189,11 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
* Use the FLEX_DIRECTION object from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array.
*/
flexDirection?: BoxFlexDirection | BoxFlexDirectionArray;
flexDirection?:
| FlexDirection
| FlexDirectionArray
| BoxFlexDirection
| BoxFlexDirectionArray;
/**
* The flex wrap of the Box component.
* Use the FLEX_WRAP object from '../../../helpers/constants/design-system';
Expand Down Expand Up @@ -296,19 +349,19 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
* Use DISPLAY const from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array.
*/
display?: BoxDisplay | BoxDisplayArray;
display?: Display | DisplayArray | BoxDisplay | BoxDisplayArray;
/**
* The width of the Box component.
* Use BLOCK_SIZES const from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array.
*/
width?: BoxWidth | BoxWidthArray;
width?: BlockSize | BlockSizeArray | BoxWidth | BoxWidthArray;
/**
* The height of the Box component.
* Use BLOCK_SIZES const from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array.
*/
height?: BoxHeight | BoxHeightArray;
height?: BlockSize | BlockSizeArray | BoxHeight | BoxHeightArray;
/**
* The background-color of the Box component.
* Use BackgroundColor enum from '../../../helpers/constants/design-system';
Expand Down
Loading