diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index aa0a4e65f255..07dd04469b0b 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -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';
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```
### 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
= () => {
{getColumns()}
= () => {
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
- BLOCK_SIZES.HALF
+ BlockSize.Half
- BLOCK_SIZES.HALF
+ BlockSize.Half
- BLOCK_SIZES.ONE_THIRD
+ BlockSize.OneThird
- BLOCK_SIZES.ONE_THIRD
+ BlockSize.OneThird
- BLOCK_SIZES.ONE_THIRD
+ BlockSize.OneThird
- BLOCK_SIZES.ONE_FOURTH
+ BlockSize.OneFourth
- BLOCK_SIZES.ONE_FOURTH
+ BlockSize.OneFourth
- BLOCK_SIZES.ONE_FOURTH
+ BlockSize.OneFourth
- BLOCK_SIZES.ONE_FOURTH
+ BlockSize.OneFourth
@@ -846,16 +846,16 @@ export const Width: ComponentStory = () => {
Responsive widths
{getColumns()}
= () => {
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,
- 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,
- BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
- BLOCK_SIZES.ONE_FOURTH,
+ BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
+ BlockSize.OneFourth,
@@ -936,9 +936,9 @@ export const Width: ComponentStory = () => {
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,
],
};
diff --git a/ui/components/ui/box/box.test.tsx b/ui/components/ui/box/box.test.tsx
index bc0cd108c09f..3bdd09537f55 100644
--- a/ui/components/ui/box/box.test.tsx
+++ b/ui/components/ui/box/box.test.tsx
@@ -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-block
- Box display-flex
- Box display-grid
- Box display-inline
- Box display-inline-block
- Box display-inline-flex
- Box display-inline-grid
- Box display-list-item
- Box display-none
+ Box display-block
+ Box display-flex
+ Box display-grid
+ Box display-inline
+ Box display-inline-block
+ Box display-inline-flex
+ Box display-inline-grid
+ Box display-list-item
+ Box display-none
+ DEPRECATED Box display-block
+ DEPRECATED Box display-flex
+ DEPRECATED Box display-grid
+ DEPRECATED Box display-inline
+
+ DEPRECATED Box display-inline-block
+
+
+ DEPRECATED Box display-inline-flex
+
+
+ DEPRECATED Box display-inline-grid
+
+
+ DEPRECATED Box display-list-item
+
+ DEPRECATED Box display-none
>,
);
@@ -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 content
+
+ DEPRECATED Box content
+
>,
);
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 content);
@@ -549,16 +614,29 @@ describe('Box', () => {
it('should render the Box with the flexDirection classes', () => {
const { getByText } = render(
<>
- Box flex-direction-row
-
+ Box flex-direction-row
+
Box flex-direction-row-reverse
-
+
Box flex-direction-column
-
+
Box flex-direction-column-reverse
+
+
+ DEPRECATED Box flex-direction-row
+
+
+ DEPRECATED Box flex-direction-row-reverse
+
+
+ DEPRECATED Box flex-direction-column
+
+
+ DEPRECATED Box flex-direction-column-reverse
+
>,
);
@@ -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 content
+
{
FLEX_DIRECTION.COLUMN_REVERSE,
]}
>
- Box content
+ DEPRECATED Box content
>,
);
@@ -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 flex-wrap-wrap
+ Box flex-wrap-wrap
+ Box flex-wrap-wrap-reverse
+ Box flex-wrap-nowrap
+
+ DEPRECATED Box flex-wrap-wrap
- Box flex-wrap-wrap-reverse
+ DEPRECATED Box flex-wrap-wrap-reverse
+
+
+ DEPRECATED Box flex-wrap-nowrap
- Box flex-wrap-nowrap
>,
);
@@ -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 content
+
+ DEPRECATED Box content
+
>,
);
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 left
- Box center
- Box right
- Box justify
- Box end
+ Box left
+ Box center
+ Box right
+ Box justify
+ Box end
+
+ DEPRECATED Box left
+ DEPRECATED Box center
+ DEPRECATED Box right
+ DEPRECATED Box justify
+ DEPRECATED Box end
>,
);
@@ -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 content
- ,
+ <>
+
+ Box content
+
+
+ DEPRECATED Box content
+
+ >,
);
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 half
- Box one fourth
- Box max
- Box min
+ Box half
+ Box one fourth
+ Box max
+ Box min
+
+ DEPRECATED Box half
+ DEPRECATED Box one fourth
+ DEPRECATED Box max
+ DEPRECATED Box min
>,
);
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 content
+
+
{
BLOCK_SIZES.MIN,
]}
>
- Box content
+ DEPRECATED Box content
>,
);
@@ -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 half
- Box one fourth
- Box max
- Box min
+ Box half
+ Box one fourth
+ Box max
+ Box min
+
+ DEPRECATED Box half
+ DEPRECATED Box one fourth
+ DEPRECATED Box max
+ DEPRECATED Box min
>,
);
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 content
+
{
BLOCK_SIZES.MIN,
]}
>
- Box content
+ DEPRECATED Box content
>,
);
@@ -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', () => {
diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts
index 0fb7a5faf2bf..e90fe6874bac 100644
--- a/ui/helpers/constants/design-system.ts
+++ b/ui/helpers/constants/design-system.ts
@@ -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',