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..364e28dedd81 100644
--- a/ui/components/ui/box/box.test.tsx
+++ b/ui/components/ui/box/box.test.tsx
@@ -2,13 +2,13 @@ import * as React from 'react';
import { render } from '@testing-library/react';
import {
BorderStyle,
- DISPLAY,
- FLEX_DIRECTION,
- FLEX_WRAP,
+ Display,
+ FlexDirection,
+ FlexWrap,
AlignItems,
JustifyContent,
TEXT_ALIGN,
- BLOCK_SIZES,
+ BlockSize,
BorderRadius,
BorderColor,
BackgroundColor,
@@ -487,15 +487,15 @@ 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
>,
);
@@ -522,7 +522,7 @@ describe('Box', () => {
const { getByText } = render(
<>
Box content
@@ -549,14 +549,14 @@ 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
>,
@@ -580,10 +580,10 @@ describe('Box', () => {
<>
Box content
@@ -604,11 +604,9 @@ describe('Box', () => {
it('should render the Box with the flexWrap classes', () => {
const { getByText } = render(
<>
- Box flex-wrap-wrap
-
- Box flex-wrap-wrap-reverse
-
- Box flex-wrap-nowrap
+ Box flex-wrap-wrap
+ Box flex-wrap-wrap-reverse
+ Box flex-wrap-nowrap
>,
);
@@ -626,11 +624,7 @@ describe('Box', () => {
const { getByText } = render(
<>
Box content
@@ -884,10 +878,10 @@ 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
>,
);
expect(getByText('Box half')).toHaveClass('box--width-1/2');
@@ -900,10 +894,10 @@ describe('Box', () => {
<>
Box content
@@ -918,10 +912,10 @@ describe('Box', () => {
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
>,
);
expect(getByText('Box half')).toHaveClass('box--height-1/2');
@@ -934,10 +928,10 @@ describe('Box', () => {
<>
Box content
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',