Adding backgroundColor prop to Box (#12524)

ui/components/ui/box/box.js

@@ -82,6 +82,7 @@ export default function Box({
   height,
   children,
   className,
+  backgroundColor,
 }) {
   const boxClassName = classnames('box', className, {
     // ---Borders---
@@ -128,6 +129,8 @@ export default function Box({
     // width & height
     [`box--width-${width}`]: Boolean(width),
     [`box--height-${height}`]: Boolean(height),
+    // background
+    [`box--background-color-${backgroundColor}`]: Boolean(backgroundColor),
   });
   // Apply Box styles to any other component using function pattern
   if (typeof children === 'function') {
@@ -159,5 +162,6 @@ Box.propTypes = {
   display: PropTypes.oneOf(Object.values(DISPLAY)),
   width: PropTypes.oneOf(Object.values(BLOCK_SIZES)),
   height: PropTypes.oneOf(Object.values(BLOCK_SIZES)),
+  backgroundColor: PropTypes.oneOf(Object.values(COLORS)),
   className: PropTypes.string,
 };

ui/components/ui/box/box.scss

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

ui/components/ui/box/box.stories.js

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