add box height and width responsive sizes (#16111)

* add box height and width responsive sizes

* add Object.values() to valid sizes

ui/components/ui/box/box.js

@@ -23,6 +23,7 @@ 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 ValidSizeAndAuto = PropTypes.oneOf([...Sizes, 'auto']);
 export const ValidBackgroundColors = PropTypes.oneOf(
   Object.values(BACKGROUND_COLORS),
@@ -30,6 +31,8 @@ export const ValidBackgroundColors = PropTypes.oneOf(
 export const ValidBorderColors = PropTypes.oneOf(Object.values(BORDER_COLORS));
 export const ValidTextColors = PropTypes.oneOf(Object.values(TEXT_COLORS));
 export const ValidIconColors = PropTypes.oneOf(Object.values(ICON_COLORS));
+const ValidAlignItem = PropTypes.oneOf(Object.values(ALIGN_ITEMS));
+const ValidJustifyContent = PropTypes.oneOf(Object.values(JUSTIFY_CONTENT));
 
 const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize);
 export const MultipleSizes = PropTypes.oneOfType([
@@ -37,6 +40,12 @@ export const MultipleSizes = PropTypes.oneOfType([
   ArrayOfValidSizes,
 ]);
 
+const ArrayOfValidBlockSizes = PropTypes.arrayOf(ValidBlockSize);
+export const MultipleBlockSizes = PropTypes.oneOfType([
+  ValidBlockSize,
+  ArrayOfValidBlockSizes,
+]);
+
 const ArrayOfValidSizesAndAuto = PropTypes.arrayOf(ValidSizeAndAuto);
 export const MultipleSizesAndAuto = PropTypes.oneOfType([
   ValidSizeAndAuto,
@@ -64,6 +73,18 @@ export const MultipleTextColors = PropTypes.oneOfType([
   ArrayOfValidIconColors,
 ]);
 
+const ArrayOfValidAlignItems = PropTypes.arrayOf(ValidAlignItem);
+export const MultipleAlignItems = PropTypes.oneOfType([
+  ValidAlignItem,
+  ArrayOfValidAlignItems,
+]);
+
+const ArrayOfValidJustifyContents = PropTypes.arrayOf(ValidJustifyContent);
+export const MultipleJustifyContents = PropTypes.oneOfType([
+  ValidJustifyContent,
+  ArrayOfValidJustifyContents,
+]);
+
 function isValidSize(type, value) {
   // Only margin types allow 'auto'
   return (
@@ -295,14 +316,8 @@ Box.propTypes = {
     PropTypes.oneOf(Object.values(BORDER_STYLE)),
     PropTypes.arrayOf(PropTypes.oneOf(Object.values(BORDER_STYLE))),
   ]),
-  alignItems: PropTypes.oneOfType([
-    PropTypes.oneOf(Object.values(ALIGN_ITEMS)),
-    PropTypes.arrayOf(PropTypes.oneOf(Object.values(ALIGN_ITEMS))),
-  ]),
-  justifyContent: PropTypes.oneOfType([
-    PropTypes.oneOf(Object.values(JUSTIFY_CONTENT)),
-    PropTypes.arrayOf(PropTypes.oneOf(Object.values(JUSTIFY_CONTENT))),
-  ]),
+  alignItems: MultipleAlignItems,
+  justifyContent: MultipleJustifyContents,
   textAlign: PropTypes.oneOfType([
     PropTypes.oneOf(Object.values(TEXT_ALIGN)),
     PropTypes.arrayOf(PropTypes.oneOf(Object.values(TEXT_ALIGN))),
@@ -311,14 +326,8 @@ Box.propTypes = {
     PropTypes.oneOf(Object.values(DISPLAY)),
     PropTypes.arrayOf(PropTypes.oneOf(Object.values(DISPLAY))),
   ]),
-  width: PropTypes.oneOfType([
-    PropTypes.oneOf(Object.values(BLOCK_SIZES)),
-    PropTypes.arrayOf(PropTypes.oneOf(Object.values(BLOCK_SIZES))),
-  ]),
-  height: PropTypes.oneOfType([
-    PropTypes.oneOf(Object.values(BLOCK_SIZES)),
-    PropTypes.arrayOf(PropTypes.oneOf(Object.values(BLOCK_SIZES))),
-  ]),
+  width: MultipleBlockSizes,
+  height: MultipleBlockSizes,
   backgroundColor: MultipleBackgroundColors,
   className: PropTypes.string,
   /**