m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

Adding backgroundColor prop to Box (#12524)

Browse Source
This commit is contained in:
ryanml 2021-10-29 10:02:10 -07:00 committed by GitHub
parent 7e7d0c13f4
commit 487080bd16
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 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

@ -82,6 +82,7 @@ export default function Box({
height, height,
children, children,
className, className,
backgroundColor,
}) { }) {
const boxClassName = classnames('box', className, { const boxClassName = classnames('box', className, {
// ---Borders--- // ---Borders---
@ -128,6 +129,8 @@ export default function Box({
// width & height // width & height
[`box--width-${width}`]: Boolean(width), [`box--width-${width}`]: Boolean(width),
[`box--height-${height}`]: Boolean(height), [`box--height-${height}`]: Boolean(height),
// background
[`box--background-color-${backgroundColor}`]: Boolean(backgroundColor),
}); });
// 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') {
@ -159,5 +162,6 @@ Box.propTypes = {
display: PropTypes.oneOf(Object.values(DISPLAY)), display: PropTypes.oneOf(Object.values(DISPLAY)),
width: PropTypes.oneOf(Object.values(BLOCK_SIZES)), width: PropTypes.oneOf(Object.values(BLOCK_SIZES)),
height: PropTypes.oneOf(Object.values(BLOCK_SIZES)), height: PropTypes.oneOf(Object.values(BLOCK_SIZES)),
backgroundColor: PropTypes.oneOf(Object.values(COLORS)),
className: PropTypes.string, className: PropTypes.string,
}; };

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

@ -139,4 +139,11 @@ $attributes: padding, margin;
text-align: $alignment; text-align: $alignment;
} }
} }
// background
@each $variant, $color in design-system.$color-map {
&--background-color-#{$variant} {
background-color: $color;
}
}
} }

6
ui/components/ui/box/box.stories.js
View File

@ -75,6 +75,12 @@ export const box = () => {
)} )}
borderWidth={number('borderWidth', 1, sizeKnobOptions, 'border')} borderWidth={number('borderWidth', 1, sizeKnobOptions, 'border')}
borderColor={select('borderColor', COLORS, COLORS.BLACK, 'border')} borderColor={select('borderColor', COLORS, COLORS.BLACK, 'border')}
backgroundColor={select(
'backgroundColor',
COLORS,
COLORS.WHITE,
'background',
)}
> >
{items} {items}
</Box> </Box>