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

Adding flexWrap prop to Box (#12542)

Browse Source
This commit is contained in:
ryanml 2021-11-01 12:16:23 -07:00 committed by GitHub
parent db20399d81
commit 1390d72259
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import {
SIZES, SIZES,
TEXT_ALIGN, TEXT_ALIGN,
FLEX_DIRECTION, FLEX_DIRECTION,
FLEX_WRAP,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
const ValidSize = PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]); const ValidSize = PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
@ -77,6 +78,7 @@ export default function Box({
justifyContent, justifyContent,
textAlign, textAlign,
flexDirection = FLEX_DIRECTION.ROW, flexDirection = FLEX_DIRECTION.ROW,
flexWrap,
display, display,
width, width,
height, height,
@ -122,6 +124,7 @@ export default function Box({
[`box--justify-content-${justifyContent}`]: Boolean(justifyContent), [`box--justify-content-${justifyContent}`]: Boolean(justifyContent),
[`box--align-items-${alignItems}`]: Boolean(alignItems), [`box--align-items-${alignItems}`]: Boolean(alignItems),
[`box--flex-direction-${flexDirection}`]: Boolean(flexDirection), [`box--flex-direction-${flexDirection}`]: Boolean(flexDirection),
[`box--flex-wrap-${flexWrap}`]: Boolean(flexWrap),
// text align // text align
[`box--text-align-${textAlign}`]: Boolean(textAlign), [`box--text-align-${textAlign}`]: Boolean(textAlign),
// display // display
@ -142,6 +145,7 @@ export default function Box({
Box.propTypes = { Box.propTypes = {
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
flexDirection: PropTypes.oneOf(Object.values(FLEX_DIRECTION)), flexDirection: PropTypes.oneOf(Object.values(FLEX_DIRECTION)),
flexWrap: PropTypes.oneOf(Object.values(FLEX_WRAP)),
margin: MultipleSizes, margin: MultipleSizes,
marginTop: ValidSize, marginTop: ValidSize,
marginBottom: ValidSize, marginBottom: ValidSize,

6
ui/components/ui/box/box.scss
View File

@ -90,6 +90,12 @@ $attributes: padding, margin;
} }
} }
@each $wrap in design-system.$flex-wrap {
&--flex-wrap-#{$wrap} {
flex-wrap: $wrap;
}
}
// Width and Height // Width and Height
&--width-full { &--width-full {
width: 100%; width: 100%;

5
ui/css/design-system/attributes.scss
View File

@ -19,6 +19,11 @@ $flex-direction:
column, column,
column-reverse; column-reverse;
$flex-wrap:
wrap,
wrap-reverse,
nowrap;
$fractions: ( $fractions: (
1\/2: 50%, 1\/2: 50%,
1\/3: 33.333333%, 1\/3: 33.333333%,

6
ui/helpers/constants/design-system.js
View File

@ -96,6 +96,12 @@ export const FLEX_DIRECTION = {
COLUMN_REVERSE: 'column-reverse', COLUMN_REVERSE: 'column-reverse',
}; };
export const FLEX_WRAP = {
WRAP: 'wrap',
WRAP_REVERSE: 'wrap-reverse',
NO_WRAP: 'nowrap',
};
export const DISPLAY = { export const DISPLAY = {
BLOCK: 'block', BLOCK: 'block',
FLEX: 'flex', FLEX: 'flex',