From 487080bd167b51c06e53577bd5e333cd875061b4 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Fri, 29 Oct 2021 10:02:10 -0700
Subject: [PATCH] Adding backgroundColor prop to Box (#12524)

---
 ui/components/ui/box/box.js         | 4 ++++
 ui/components/ui/box/box.scss       | 7 +++++++
 ui/components/ui/box/box.stories.js | 6 ++++++
 3 files changed, 17 insertions(+)

diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js
index b720ff2fc1..9727d09efb 100644
--- a/ui/components/ui/box/box.js
+++ b/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,
 };
diff --git a/ui/components/ui/box/box.scss b/ui/components/ui/box/box.scss
index 59865bbf70..3f657ac6d5 100644
--- a/ui/components/ui/box/box.scss
+++ b/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;
+    }
+  }
 }
diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js
index 25b17838bc..b7168786b7 100644
--- a/ui/components/ui/box/box.stories.js
+++ b/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>