m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

add box height and width responsive sizes (#16111)

Browse Source 
* add box height and width responsive sizes

* add Object.values() to valid sizes
This commit is contained in:
Garrett Bear 2022-10-10 10:59:06 -07:00 committed by GitHub
parent f6f8edfd15
commit 9125ecf0d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui/components/ui/box/box.js
View File

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