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

Adding design-system enums and deprecating consts (#19133)

Browse Source 
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Nazrul Hassan 2023-05-18 04:14:51 +05:30 committed by GitHub
parent 577e4cba0b
commit 9ef9327507
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 661 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) | - |
@ -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
@ -318,16 +318,16 @@ 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" />
@ -335,74 +335,82 @@ Example: [BLOCK_SIZES.HALF, BLOCK_SIZES.THREE_FOURTHS, BLOCK_SIZES.ONE_FIFTH, BL
```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>
</>;

101
ui/components/ui/box/box.d.ts vendored
View File

@ -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?];
export type BoxTextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN] | null;
export type BoxTextAlignArray = [
/**
* @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 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
@ -130,6 +178,7 @@ export type BackgroundColorArray = [
BackgroundColor?,
BackgroundColor?,
];
export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
/**
* The content of the Box component.
@ -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';
@ -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';

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

@ -4,26 +4,26 @@ import classnames from 'classnames';
import { memoize } from 'lodash';
import {
AlignItems,
BLOCK_SIZES,
BlockSize,
BorderStyle,
BackgroundColor,
BorderColor,
TextColor,
IconColor,
DISPLAY,
JustifyContent,
TEXT_ALIGN,
FLEX_DIRECTION,
FLEX_WRAP,
FlexDirection,
FlexWrap,
BREAKPOINTS,
BorderRadius,
Display,
} from '../../../helpers/constants/design-system';
const BASE_CLASS_NAME = 'box';
const Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const ValidSize = PropTypes.oneOf(Sizes);
const ValidBlockSize = PropTypes.oneOf(Object.values(BLOCK_SIZES));
const ValidBlockSize = PropTypes.oneOf(Object.values(BlockSize));
const ValidSizeAndAuto = PropTypes.oneOf([...Sizes, 'auto']);
export const ValidBackgroundColor = PropTypes.oneOf(
Object.values(BackgroundColor),
@ -212,7 +212,7 @@ const Box = React.forwardRef(function Box(
alignItems,
justifyContent,
textAlign,
flexDirection = FLEX_DIRECTION.ROW,
flexDirection = FlexDirection.Row,
flexWrap,
gap,
display,
@ -329,12 +329,12 @@ function isCustomComponent(element) {
Box.propTypes = {
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
flexDirection: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(FLEX_DIRECTION)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(FLEX_DIRECTION))),
PropTypes.oneOf(Object.values(FlexDirection)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(FlexDirection))),
]),
flexWrap: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(FLEX_WRAP)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(FLEX_WRAP))),
PropTypes.oneOf(Object.values(FlexWrap)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(FlexWrap))),
]),
gap: MultipleSizes,
margin: MultipleSizesAndAuto,
@ -373,8 +373,8 @@ Box.propTypes = {
PropTypes.arrayOf(PropTypes.oneOf(Object.values(TEXT_ALIGN))),
]),
display: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(DISPLAY)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(DISPLAY))),
PropTypes.oneOf(Object.values(Display)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(Display))),
]),
width: MultipleBlockSizes,
height: MultipleBlockSizes,

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

@ -2,18 +2,18 @@ import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import {
BLOCK_SIZES,
BlockSize,
BorderStyle,
BorderRadius,
TextColor,
BorderColor,
BackgroundColor,
DISPLAY,
Display,
AlignItems,
JustifyContent,
TEXT_ALIGN,
FLEX_DIRECTION,
FLEX_WRAP,
FlexDirection,
FlexWrap,
} from '../../../helpers/constants/design-system';
import { Text } from '../../component-library';
@ -53,17 +53,17 @@ export default {
table: { category: 'children' },
},
display: {
options: Object.values(DISPLAY),
options: Object.values(Display),
control: 'select',
table: { category: 'display' },
},
width: {
options: Object.values(BLOCK_SIZES),
options: Object.values(BlockSize),
control: 'multi-select',
table: { category: 'display' },
},
height: {
options: Object.values(BLOCK_SIZES),
options: Object.values(BlockSize),
control: 'select',
table: { category: 'display' },
},
@ -105,12 +105,12 @@ export default {
table: { category: 'border' },
},
flexWrap: {
options: Object.values(FLEX_WRAP),
options: Object.values(FlexWrap),
control: 'select',
table: { category: 'display' },
},
flexDirection: {
options: Object.values(FLEX_DIRECTION),
options: Object.values(FlexDirection),
control: 'select',
table: { category: 'display' },
},
@ -223,11 +223,11 @@ export const DefaultStory: ComponentStory<typeof Box> = (args) => (
DefaultStory.args = {
children: 'Box component',
display: DISPLAY.FLEX,
display: Display.Flex,
justifyContent: JustifyContent.center,
alignItems: AlignItems.center,
width: BLOCK_SIZES.HALF,
height: BLOCK_SIZES.HALF,
width: BlockSize.Half,
height: BlockSize.Half,
borderColor: BorderColor.borderDefault,
padding: 4,
};
@ -497,7 +497,7 @@ export const BorderRadiusStory = () => {
return (
<>
<Box
display={DISPLAY.GRID}
display={Display.Grid}
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}
gap={4}
>
@ -572,7 +572,7 @@ export const BorderRadiusStory = () => {
borderWidth={2}
borderRadius={BorderRadius.full}
margin={4}
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
style={{ height: '250px', width: '250px' }}
>
@ -596,11 +596,11 @@ export const ResponsiveProps = () => {
marginBottom={[0]}
padding={[2, 4]}
gap={[2, 4]}
display={[DISPLAY.FLEX, null, null, DISPLAY.NONE]}
display={[Display.Flex, null, null, Display.None]}
flexDirection={[
FLEX_DIRECTION.COLUMN,
FLEX_DIRECTION.COLUMN,
FLEX_DIRECTION.ROW,
FlexDirection.Column,
FlexDirection.Column,
FlexDirection.Row,
]}
borderColor={BorderColor.borderDefault}
>
@ -699,7 +699,7 @@ export const Width: ComponentStory<typeof Box> = () => {
? BackgroundColor.errorMuted
: BackgroundColor.warningMuted
}
width={BLOCK_SIZES.ONE_TWELFTH}
width={BlockSize.OneTwelfth}
/>,
);
}
@ -712,7 +712,7 @@ export const Width: ComponentStory<typeof Box> = () => {
<b>Static widths</b>
</p>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
borderColor={BorderColor.borderMuted}
style={{
height: '100vh',
@ -723,9 +723,9 @@ export const Width: ComponentStory<typeof Box> = () => {
{getColumns()}
<Box
width={BLOCK_SIZES.FULL}
display={DISPLAY.FLEX}
flexWrap={FLEX_WRAP.WRAP}
width={BlockSize.Full}
display={Display.Flex}
flexWrap={FlexWrap.Wrap}
style={{
position: 'absolute',
top: 0,
@ -738,107 +738,107 @@ export const Width: ComponentStory<typeof Box> = () => {
borderColor={BorderColor.borderMuted}
borderWidth={6}
marginBottom={6}
width={BLOCK_SIZES.FULL}
display={DISPLAY.FLEX}
width={BlockSize.Full}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.FULL
BlockSize.Full
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
marginBottom={6}
width={BLOCK_SIZES.HALF}
display={DISPLAY.FLEX}
width={BlockSize.Half}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.HALF
BlockSize.Half
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
marginBottom={6}
width={BLOCK_SIZES.HALF}
display={DISPLAY.FLEX}
width={BlockSize.Half}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.HALF
BlockSize.Half
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
marginBottom={6}
width={BLOCK_SIZES.ONE_THIRD}
display={DISPLAY.FLEX}
width={BlockSize.OneThird}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.ONE_THIRD
BlockSize.OneThird
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
marginBottom={6}
width={BLOCK_SIZES.ONE_THIRD}
display={DISPLAY.FLEX}
width={BlockSize.OneThird}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.ONE_THIRD
BlockSize.OneThird
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
marginBottom={6}
width={BLOCK_SIZES.ONE_THIRD}
display={DISPLAY.FLEX}
width={BlockSize.OneThird}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.ONE_THIRD
BlockSize.OneThird
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
width={BLOCK_SIZES.ONE_FOURTH}
display={DISPLAY.FLEX}
width={BlockSize.OneFourth}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.ONE_FOURTH
BlockSize.OneFourth
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
width={BLOCK_SIZES.ONE_FOURTH}
display={DISPLAY.FLEX}
width={BlockSize.OneFourth}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.ONE_FOURTH
BlockSize.OneFourth
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
width={BLOCK_SIZES.ONE_FOURTH}
display={DISPLAY.FLEX}
width={BlockSize.OneFourth}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.ONE_FOURTH
BlockSize.OneFourth
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
width={BLOCK_SIZES.ONE_FOURTH}
display={DISPLAY.FLEX}
width={BlockSize.OneFourth}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.ONE_FOURTH
BlockSize.OneFourth
</Box>
</Box>
</Box>
@ -846,16 +846,16 @@ export const Width: ComponentStory<typeof Box> = () => {
<b>Responsive widths</b>
</p>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
borderColor={BorderColor.borderMuted}
style={{ height: '100vh', position: 'relative', textAlign: 'center' }}
>
{getColumns()}
<Box
width={BLOCK_SIZES.FULL}
display={DISPLAY.FLEX}
flexWrap={FLEX_WRAP.WRAP}
width={BlockSize.Full}
display={Display.Flex}
flexWrap={FlexWrap.Wrap}
style={{
position: 'absolute',
top: 0,
@ -868,65 +868,65 @@ export const Width: ComponentStory<typeof Box> = () => {
borderColor={BorderColor.borderMuted}
borderWidth={6}
width={[
BLOCK_SIZES.FULL,
BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
]}
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
BlockSize.OneFourth,
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
width={[
BLOCK_SIZES.FULL,
BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
]}
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
BlockSize.OneFourth,
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
width={[
BLOCK_SIZES.FULL,
BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
]}
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
BlockSize.OneFourth,
</Box>
<Box
borderColor={BorderColor.borderMuted}
borderWidth={6}
width={[
BLOCK_SIZES.FULL,
BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full,
BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
]}
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
BlockSize.OneFourth,
</Box>
</Box>
</Box>
@ -936,9 +936,9 @@ export const Width: ComponentStory<typeof Box> = () => {
Width.args = {
width: [
BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_FIFTH,
BLOCK_SIZES.THREE_FOURTHS,
BLOCK_SIZES.ONE_FOURTH,
BlockSize.Half,
BlockSize.OneFifth,
BlockSize.ThreeFourths,
BlockSize.OneFourth,
],
};

353
ui/components/ui/box/box.test.tsx
View File

@ -2,12 +2,17 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import {
BorderStyle,
Display,
DISPLAY,
FlexDirection,
FLEX_DIRECTION,
FlexWrap,
FLEX_WRAP,
AlignItems,
JustifyContent,
TEXT_ALIGN,
TextAlign,
BlockSize,
BLOCK_SIZES,
BorderRadius,
BorderColor,
@ -487,15 +492,32 @@ describe('Box', () => {
it('should render the Box with the display classes', () => {
const { getByText } = render(
<>
<Box display={DISPLAY.BLOCK}>Box display-block</Box>
<Box display={DISPLAY.FLEX}>Box display-flex</Box>
<Box display={DISPLAY.GRID}>Box display-grid</Box>
<Box display={DISPLAY.INLINE}>Box display-inline</Box>
<Box display={DISPLAY.INLINE_BLOCK}>Box display-inline-block</Box>
<Box display={DISPLAY.INLINE_FLEX}>Box display-inline-flex</Box>
<Box display={DISPLAY.INLINE_GRID}>Box display-inline-grid</Box>
<Box display={DISPLAY.LIST_ITEM}>Box display-list-item</Box>
<Box display={DISPLAY.NONE}>Box display-none</Box>
<Box display={Display.Block}>Box display-block</Box>
<Box display={Display.Flex}>Box display-flex</Box>
<Box display={Display.Grid}>Box display-grid</Box>
<Box display={Display.Inline}>Box display-inline</Box>
<Box display={Display.InlineBlock}>Box display-inline-block</Box>
<Box display={Display.InlineFlex}>Box display-inline-flex</Box>
<Box display={Display.InlineGrid}>Box display-inline-grid</Box>
<Box display={Display.ListItem}>Box display-list-item</Box>
<Box display={Display.None}>Box display-none</Box>
<Box display={DISPLAY.BLOCK}>DEPRECATED Box display-block</Box>
<Box display={DISPLAY.FLEX}>DEPRECATED Box display-flex</Box>
<Box display={DISPLAY.GRID}>DEPRECATED Box display-grid</Box>
<Box display={DISPLAY.INLINE}>DEPRECATED Box display-inline</Box>
<Box display={DISPLAY.INLINE_BLOCK}>
DEPRECATED Box display-inline-block
</Box>
<Box display={DISPLAY.INLINE_FLEX}>
DEPRECATED Box display-inline-flex
</Box>
<Box display={DISPLAY.INLINE_GRID}>
DEPRECATED Box display-inline-grid
</Box>
<Box display={DISPLAY.LIST_ITEM}>
DEPRECATED Box display-list-item
</Box>
<Box display={DISPLAY.NONE}>DEPRECATED Box display-none</Box>
</>,
);
@ -517,21 +539,64 @@ describe('Box', () => {
expect(getByText('Box display-list-item')).toHaveClass(
'box--display-list-item',
);
expect(getByText('DEPRECATED Box display-block')).toHaveClass(
'box--display-block',
);
expect(getByText('DEPRECATED Box display-flex')).toHaveClass(
'box--display-flex',
);
expect(getByText('DEPRECATED Box display-grid')).toHaveClass(
'box--display-grid',
);
expect(getByText('DEPRECATED Box display-inline')).toHaveClass(
'box--display-inline',
);
expect(getByText('DEPRECATED Box display-inline-block')).toHaveClass(
'box--display-inline-block',
);
expect(getByText('DEPRECATED Box display-inline-flex')).toHaveClass(
'box--display-inline-flex',
);
expect(getByText('DEPRECATED Box display-inline-grid')).toHaveClass(
'box--display-inline-grid',
);
expect(getByText('DEPRECATED Box display-list-item')).toHaveClass(
'box--display-list-item',
);
});
it('should render the Box with the responsive display classes', () => {
const { getByText } = render(
<>
<Box
display={[DISPLAY.BLOCK, DISPLAY.FLEX, DISPLAY.GRID, DISPLAY.NONE]}
display={[Display.Block, Display.Flex, Display.Grid, Display.None]}
>
Box content
</Box>
<Box
display={[DISPLAY.BLOCK, DISPLAY.FLEX, DISPLAY.GRID, DISPLAY.NONE]}
>
DEPRECATED Box content
</Box>
</>,
);
expect(getByText('Box content')).toHaveClass('box--display-block');
expect(getByText('Box content')).toHaveClass('box--sm:display-flex');
expect(getByText('Box content')).toHaveClass('box--md:display-grid');
expect(getByText('Box content')).toHaveClass('box--lg:display-none');
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--display-block',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:display-flex',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:display-grid',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--lg:display-none',
);
});
it('should render the Box with the gap class', () => {
const { getByText } = render(<Box gap={1}>Box content</Box>);
@ -549,16 +614,29 @@ describe('Box', () => {
it('should render the Box with the flexDirection classes', () => {
const { getByText } = render(
<>
<Box flexDirection={FLEX_DIRECTION.ROW}>Box flex-direction-row</Box>
<Box flexDirection={FLEX_DIRECTION.ROW_REVERSE}>
<Box flexDirection={FlexDirection.Row}>Box flex-direction-row</Box>
<Box flexDirection={FlexDirection.RowReverse}>
Box flex-direction-row-reverse
</Box>
<Box flexDirection={FLEX_DIRECTION.COLUMN}>
<Box flexDirection={FlexDirection.Column}>
Box flex-direction-column
</Box>
<Box flexDirection={FLEX_DIRECTION.COLUMN_REVERSE}>
<Box flexDirection={FlexDirection.ColumnReverse}>
Box flex-direction-column-reverse
</Box>
<Box flexDirection={FlexDirection.Row}>
DEPRECATED Box flex-direction-row
</Box>
<Box flexDirection={FlexDirection.RowReverse}>
DEPRECATED Box flex-direction-row-reverse
</Box>
<Box flexDirection={FlexDirection.Column}>
DEPRECATED Box flex-direction-column
</Box>
<Box flexDirection={FlexDirection.ColumnReverse}>
DEPRECATED Box flex-direction-column-reverse
</Box>
</>,
);
@ -574,10 +652,33 @@ describe('Box', () => {
expect(getByText('Box flex-direction-column-reverse')).toHaveClass(
'box--flex-direction-column-reverse',
);
expect(getByText('DEPRECATED Box flex-direction-row')).toHaveClass(
'box--flex-direction-row',
);
expect(
getByText('DEPRECATED Box flex-direction-row-reverse'),
).toHaveClass('box--flex-direction-row-reverse');
expect(getByText('DEPRECATED Box flex-direction-column')).toHaveClass(
'box--flex-direction-column',
);
expect(
getByText('DEPRECATED Box flex-direction-column-reverse'),
).toHaveClass('box--flex-direction-column-reverse');
});
it('should render the Box with the responsive flexDirection classes', () => {
const { getByText } = render(
<>
<Box
flexDirection={[
FlexDirection.Row,
FlexDirection.RowReverse,
FlexDirection.Column,
FlexDirection.ColumnReverse,
]}
>
Box content
</Box>
<Box
flexDirection={[
FLEX_DIRECTION.ROW,
@ -586,7 +687,7 @@ describe('Box', () => {
FLEX_DIRECTION.COLUMN_REVERSE,
]}
>
Box content
DEPRECATED Box content
</Box>
</>,
);
@ -600,15 +701,34 @@ describe('Box', () => {
expect(getByText('Box content')).toHaveClass(
'box--lg:flex-direction-column-reverse',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--flex-direction-row',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:flex-direction-row-reverse',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:flex-direction-column',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--lg:flex-direction-column-reverse',
);
});
it('should render the Box with the flexWrap classes', () => {
const { getByText } = render(
<>
<Box flexWrap={FLEX_WRAP.WRAP}>Box flex-wrap-wrap</Box>
<Box flexWrap={FlexWrap.Wrap}>Box flex-wrap-wrap</Box>
<Box flexWrap={FlexWrap.WrapReverse}>Box flex-wrap-wrap-reverse</Box>
<Box flexWrap={FlexWrap.NoWrap}>Box flex-wrap-nowrap</Box>
<Box flexWrap={FLEX_WRAP.WRAP}>DEPRECATED Box flex-wrap-wrap</Box>
<Box flexWrap={FLEX_WRAP.WRAP_REVERSE}>
Box flex-wrap-wrap-reverse
DEPRECATED Box flex-wrap-wrap-reverse
</Box>
<Box flexWrap={FLEX_WRAP.NO_WRAP}>
DEPRECATED Box flex-wrap-nowrap
</Box>
<Box flexWrap={FLEX_WRAP.NO_WRAP}>Box flex-wrap-nowrap</Box>
</>,
);
@ -621,19 +741,30 @@ describe('Box', () => {
expect(getByText('Box flex-wrap-nowrap')).toHaveClass(
'box--flex-wrap-nowrap',
);
expect(getByText('DEPRECATED Box flex-wrap-wrap')).toHaveClass(
'box--flex-wrap-wrap',
);
expect(getByText('DEPRECATED Box flex-wrap-wrap-reverse')).toHaveClass(
'box--flex-wrap-wrap-reverse',
);
expect(getByText('DEPRECATED Box flex-wrap-nowrap')).toHaveClass(
'box--flex-wrap-nowrap',
);
});
it('should render the Box with the responsive flexWrap classes', () => {
const { getByText } = render(
<>
<Box
flexWrap={[
FLEX_WRAP.WRAP,
FLEX_WRAP.WRAP_REVERSE,
FLEX_WRAP.NO_WRAP,
]}
flexWrap={[FlexWrap.Wrap, FlexWrap.WrapReverse, FlexWrap.NoWrap]}
>
Box content
</Box>
<Box
flexWrap={[FlexWrap.Wrap, FlexWrap.WrapReverse, FlexWrap.NoWrap]}
>
DEPRECATED Box content
</Box>
</>,
);
expect(getByText('Box content')).toHaveClass('box--flex-wrap-wrap');
@ -641,6 +772,16 @@ describe('Box', () => {
'box--sm:flex-wrap-wrap-reverse',
);
expect(getByText('Box content')).toHaveClass('box--md:flex-wrap-nowrap');
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--flex-wrap-wrap',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:flex-wrap-wrap-reverse',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:flex-wrap-nowrap',
);
});
it('should render the Box with the alignItems classes', () => {
const { getByText } = render(
@ -772,11 +913,17 @@ describe('Box', () => {
it('should render the Box with the textAlign auto class', () => {
const { getByText } = render(
<>
<Box textAlign={TEXT_ALIGN.LEFT}>Box left</Box>
<Box textAlign={TEXT_ALIGN.CENTER}>Box center</Box>
<Box textAlign={TEXT_ALIGN.RIGHT}>Box right</Box>
<Box textAlign={TEXT_ALIGN.JUSTIFY}>Box justify</Box>
<Box textAlign={TEXT_ALIGN.END}>Box end</Box>
<Box textAlign={TextAlign.Left}>Box left</Box>
<Box textAlign={TextAlign.Center}>Box center</Box>
<Box textAlign={TextAlign.Right}>Box right</Box>
<Box textAlign={TextAlign.Justify}>Box justify</Box>
<Box textAlign={TextAlign.End}>Box end</Box>
<Box textAlign={TEXT_ALIGN.LEFT}>DEPRECATED Box left</Box>
<Box textAlign={TEXT_ALIGN.CENTER}>DEPRECATED Box center</Box>
<Box textAlign={TEXT_ALIGN.RIGHT}>DEPRECATED Box right</Box>
<Box textAlign={TEXT_ALIGN.JUSTIFY}>DEPRECATED Box justify</Box>
<Box textAlign={TEXT_ALIGN.END}>DEPRECATED Box end</Box>
</>,
);
@ -785,19 +932,47 @@ describe('Box', () => {
expect(getByText('Box right')).toHaveClass('box--text-align-right');
expect(getByText('Box justify')).toHaveClass('box--text-align-justify');
expect(getByText('Box end')).toHaveClass('box--text-align-end');
expect(getByText('DEPRECATED Box left')).toHaveClass(
'box--text-align-left',
);
expect(getByText('DEPRECATED Box center')).toHaveClass(
'box--text-align-center',
);
expect(getByText('DEPRECATED Box right')).toHaveClass(
'box--text-align-right',
);
expect(getByText('DEPRECATED Box justify')).toHaveClass(
'box--text-align-justify',
);
expect(getByText('DEPRECATED Box end')).toHaveClass(
'box--text-align-end',
);
});
it('should render the Box with the responsive textAlign classes', () => {
const { getByText } = render(
<Box
textAlign={[
TEXT_ALIGN.LEFT,
TEXT_ALIGN.CENTER,
TEXT_ALIGN.RIGHT,
TEXT_ALIGN.JUSTIFY,
]}
>
Box content
</Box>,
<>
<Box
textAlign={[
TextAlign.Left,
TextAlign.Center,
TextAlign.Right,
TextAlign.Justify,
]}
>
Box content
</Box>
<Box
textAlign={[
TEXT_ALIGN.LEFT,
TEXT_ALIGN.CENTER,
TEXT_ALIGN.RIGHT,
TEXT_ALIGN.JUSTIFY,
]}
>
DEPRECATED Box content
</Box>
</>,
);
expect(getByText('Box content')).toHaveClass('box--text-align-left');
@ -806,6 +981,19 @@ describe('Box', () => {
expect(getByText('Box content')).toHaveClass(
'box--lg:text-align-justify',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--text-align-left',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:text-align-center',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:text-align-right',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--lg:text-align-justify',
);
});
});
describe('background', () => {
@ -884,20 +1072,43 @@ describe('Box', () => {
it('should render the Box with the width class', () => {
const { getByText } = render(
<>
<Box width={BLOCK_SIZES.HALF}>Box half</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>Box one fourth</Box>
<Box width={BLOCK_SIZES.MAX}>Box max</Box>
<Box width={BLOCK_SIZES.MIN}>Box min</Box>
<Box width={BlockSize.Half}>Box half</Box>
<Box width={BlockSize.OneFourth}>Box one fourth</Box>
<Box width={BlockSize.Max}>Box max</Box>
<Box width={BlockSize.Min}>Box min</Box>
<Box width={BLOCK_SIZES.HALF}>DEPRECATED Box half</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>DEPRECATED Box one fourth</Box>
<Box width={BLOCK_SIZES.MAX}>DEPRECATED Box max</Box>
<Box width={BLOCK_SIZES.MIN}>DEPRECATED Box min</Box>
</>,
);
expect(getByText('Box half')).toHaveClass('box--width-1/2');
expect(getByText('Box one fourth')).toHaveClass('box--width-1/4');
expect(getByText('Box max')).toHaveClass('box--width-max');
expect(getByText('Box min')).toHaveClass('box--width-min');
expect(getByText('DEPRECATED Box half')).toHaveClass('box--width-1/2');
expect(getByText('DEPRECATED Box one fourth')).toHaveClass(
'box--width-1/4',
);
expect(getByText('DEPRECATED Box max')).toHaveClass('box--width-max');
expect(getByText('DEPRECATED Box min')).toHaveClass('box--width-min');
});
it('should render the Box with the responsive width classes', () => {
const { getByText } = render(
<>
<Box
width={[
BlockSize.Half,
BlockSize.OneFourth,
BlockSize.Max,
BlockSize.Min,
]}
>
Box content
</Box>
<Box
width={[
BLOCK_SIZES.HALF,
@ -906,7 +1117,7 @@ describe('Box', () => {
BLOCK_SIZES.MIN,
]}
>
Box content
DEPRECATED Box content
</Box>
</>,
);
@ -914,24 +1125,57 @@ describe('Box', () => {
expect(getByText('Box content')).toHaveClass('box--sm:width-1/4');
expect(getByText('Box content')).toHaveClass('box--md:width-max');
expect(getByText('Box content')).toHaveClass('box--lg:width-min');
expect(getByText('DEPRECATED Box content')).toHaveClass('box--width-1/2');
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:width-1/4',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:width-max',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--lg:width-min',
);
});
it('should render the Box with the height class', () => {
const { getByText } = render(
<>
<Box height={BLOCK_SIZES.HALF}>Box half</Box>
<Box height={BLOCK_SIZES.ONE_FOURTH}>Box one fourth</Box>
<Box height={BLOCK_SIZES.MAX}>Box max</Box>
<Box height={BLOCK_SIZES.MIN}>Box min</Box>
<Box height={BlockSize.Half}>Box half</Box>
<Box height={BlockSize.OneFourth}>Box one fourth</Box>
<Box height={BlockSize.Max}>Box max</Box>
<Box height={BlockSize.Min}>Box min</Box>
<Box height={BLOCK_SIZES.HALF}>DEPRECATED Box half</Box>
<Box height={BLOCK_SIZES.ONE_FOURTH}>DEPRECATED Box one fourth</Box>
<Box height={BLOCK_SIZES.MAX}>DEPRECATED Box max</Box>
<Box height={BLOCK_SIZES.MIN}>DEPRECATED Box min</Box>
</>,
);
expect(getByText('Box half')).toHaveClass('box--height-1/2');
expect(getByText('Box one fourth')).toHaveClass('box--height-1/4');
expect(getByText('Box max')).toHaveClass('box--height-max');
expect(getByText('Box min')).toHaveClass('box--height-min');
expect(getByText('DEPRECATED Box half')).toHaveClass('box--height-1/2');
expect(getByText('DEPRECATED Box one fourth')).toHaveClass(
'box--height-1/4',
);
expect(getByText('DEPRECATED Box max')).toHaveClass('box--height-max');
expect(getByText('DEPRECATED Box min')).toHaveClass('box--height-min');
});
it('should render the Box with the responsive height classes', () => {
const { getByText } = render(
<>
<Box
height={[
BlockSize.Half,
BlockSize.OneFourth,
BlockSize.Max,
BlockSize.Min,
]}
>
Box content
</Box>
<Box
height={[
BLOCK_SIZES.HALF,
@ -940,7 +1184,7 @@ describe('Box', () => {
BLOCK_SIZES.MIN,
]}
>
Box content
DEPRECATED Box content
</Box>
</>,
);
@ -948,6 +1192,19 @@ describe('Box', () => {
expect(getByText('Box content')).toHaveClass('box--sm:height-1/4');
expect(getByText('Box content')).toHaveClass('box--md:height-max');
expect(getByText('Box content')).toHaveClass('box--lg:height-min');
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--height-1/2',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:height-1/4',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:height-max',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--lg:height-min',
);
});
});
describe('polymorphic "as" prop', () => {

103
ui/helpers/constants/design-system.ts
View File

@ -2,7 +2,7 @@
* A note about the existence of both singular and plural variable names here:
* When dealing with a literal property name, e.g. AlignItems, the constant
* should match the property. When detailing a collection of things, it should
* match the plural form of the thing. e.g. Color, TypographyVariant
* match the plural form of the thing. e.g. Color, TextVariant, Size
*/
export enum Color {
@ -235,6 +235,19 @@ export enum JustifyContent {
spaceEvenly = 'space-evenly',
}
export enum FlexDirection {
Row = 'row',
RowReverse = 'row-reverse',
Column = 'column',
ColumnReverse = 'column-reverse',
}
/**
* @deprecated `FLEX_DIRECTION` const has been deprecated in favour of the `FlexDirection` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `FLEX_DIRECTION` with `FlexDirection` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const FLEX_DIRECTION = {
ROW: 'row',
ROW_REVERSE: 'row-reverse',
@ -242,12 +255,42 @@ export const FLEX_DIRECTION = {
COLUMN_REVERSE: 'column-reverse',
};
export enum FlexWrap {
Wrap = 'wrap',
WrapReverse = 'wrap-reverse',
NoWrap = 'nowrap',
}
/**
* @deprecated `FLEX_WRAP` const has been deprecated in favour of the `FlexWrap` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `FLEX_WRAP` with `FlexWrap` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const FLEX_WRAP = {
WRAP: 'wrap',
WRAP_REVERSE: 'wrap-reverse',
NO_WRAP: 'nowrap',
};
export enum Display {
Block = 'block',
Flex = 'flex',
Grid = 'grid',
InlineBlock = 'inline-block',
Inline = 'inline',
InlineFlex = 'inline-flex',
InlineGrid = 'inline-grid',
ListItem = 'list-item',
None = 'none',
}
/**
* @deprecated `DISPLAY` const has been deprecated in favour of the `Display` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `DISPLAY` with `Display` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const DISPLAY = {
BLOCK: 'block',
FLEX: 'flex',
@ -260,6 +303,12 @@ export const DISPLAY = {
NONE: 'none',
};
/**
* @deprecated `FRACTIONS` const has been deprecated in favour of the `BlockSize` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `FRACTIONS` with `BlockSize` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const FRACTIONS = {
HALF: '1/2',
ONE_THIRD: '1/3',
@ -289,6 +338,45 @@ export const FRACTIONS = {
ELEVEN_TWELFTHS: '11/12',
};
export enum BlockSize {
Half = '1/2',
OneThird = '1/3',
TwoThirds = '2/3',
OneFourth = '1/4',
TwoFourths = '2/4',
ThreeFourths = '3/4',
OneFifth = '1/5',
TwoFifths = '2/5',
ThreeFifths = '3/5',
FourFifths = '4/5',
OneSixth = '1/6',
TwoSixths = '2/6',
ThreeSixths = '3/6',
FourSixths = '4/6',
FiveSixths = '5/6',
OneTwelfth = '1/12',
TwoTwelfths = '2/12',
ThreeTwelfths = '3/12',
FourTwelfths = '4/12',
FiveTwelfths = '5/12',
SixTwelfths = '6/12',
SevenTwelfths = '7/12',
EightTwelfths = '8/12',
NineTwelfths = '9/12',
TenTwelfths = '10/12',
ElevenTwelfths = '11/12',
Screen = 'screen',
Max = 'max',
Min = 'min',
Full = 'full',
}
/**
* @deprecated `BLOCK_SIZES` const has been deprecated in favour of the `BlockSize` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `BLOCK_SIZES` with `BlockSize` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const BLOCK_SIZES = {
...FRACTIONS,
SCREEN: 'screen',
@ -389,6 +477,19 @@ export const FONT_STYLE = {
NORMAL: 'normal',
};
export enum Severity {
Danger = 'danger',
Warning = 'warning',
Info = 'info',
Success = 'success',
}
/**
* @deprecated `SEVERITIES` const has been deprecated in favour of the `Severity` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `SEVERITIES` with `FontStyle` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const SEVERITIES = {
DANGER: 'danger',
WARNING: 'warning',