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 'gap' prop to Box (#12611)

Browse Source
This commit is contained in:
ryanml 2021-11-08 09:26:03 -07:00 committed by GitHub
parent 4b1c51aec5
commit 33e253f532
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,6 +79,7 @@ export default function Box({
textAlign, textAlign,
flexDirection = FLEX_DIRECTION.ROW, flexDirection = FLEX_DIRECTION.ROW,
flexWrap, flexWrap,
gap,
display, display,
width, width,
height, height,
@ -134,6 +135,7 @@ export default function Box({
[`box--height-${height}`]: Boolean(height), [`box--height-${height}`]: Boolean(height),
// background // background
[`box--background-color-${backgroundColor}`]: Boolean(backgroundColor), [`box--background-color-${backgroundColor}`]: Boolean(backgroundColor),
...generateSizeClasses('box', 'gap', gap),
}); });
// Apply Box styles to any other component using function pattern // Apply Box styles to any other component using function pattern
if (typeof children === 'function') { if (typeof children === 'function') {
@ -146,6 +148,7 @@ 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)), flexWrap: PropTypes.oneOf(Object.values(FLEX_WRAP)),
gap: ValidSize,
margin: MultipleSizes, margin: MultipleSizes,
marginTop: ValidSize, marginTop: ValidSize,
marginBottom: ValidSize, marginBottom: ValidSize,

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

@ -2,10 +2,10 @@
@use "design-system"; @use "design-system";
@use "utilities"; @use "utilities";
$attributes: padding, margin; $attributes: padding, margin, gap;
.box { .box {
// Padding and Margin // Padding, Margin, and Gap
@each $attribute in $attributes { @each $attribute in $attributes {
@each $size in design-system.$sizes-numeric { @each $size in design-system.$sizes-numeric {
&--#{$attribute}-#{$size} { &--#{$attribute}-#{$size} {