diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js index 83795b453..703ec63bd 100644 --- a/ui/components/ui/box/box.js +++ b/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, /**