Adding design-system enums and deprecating consts

MetaMask · May 17, 2023 · 14b6ec9 · 14b6ec9
1 parent aa9ee8a
commit 14b6ec9
Show file tree

Hide file tree

Showing 6 changed files with 398 additions and 242 deletions.
diff --git 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';
 
-<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,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>
 </>;

diff --git a/ui/components/ui/box/box.d.ts b/ui/components/ui/box/box.d.ts
@@ -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
@@ -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';