Repository: uber-web/baseui (js)

Issue:
[block] Adding more props, e.g. backgroundColor
These are fairly common use cases for a couple of projects I'm working on.

Can we have the following props available for Block?

* `backgroundColor?: string`
  * Accepts all themeable color properties (`primary200`, etc.).
* `lineHeight?`: [available values](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
* `fontWeight?`: [available values](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
* `marginX?: string`
  * Accepts all themeable sizing properties (`scale100`, etc.).
* `marginY?: string`
  * Accepts all themeable sizing properties (`scale100`, etc.).
* `paddingX?: string`
  * Accepts all themeable sizing properties (`scale100`, etc.).
* `paddingY?: string`
  * Accepts all themeable sizing properties (`scale100`, etc.).

Where `X` is the `Left` and `Right` of `margin` / `padding`

Where `Y` is the `Top` and `Bottom` of `margin` / `padding`

Pull request:
feat(block): add backgroundColor prop to Block
Fixes #859

#### Description

Add backgroundColor prop to Block, following the pattern of the color prop

#### Scope

- [ ] Patch: Bug Fix
- [x] Minor: New Feature
- [ ] Major: Breaking Change


Patch:
diff --git a/src/block/block.js b/src/block/block.js
index 4ee1ca65c..488dcd242 100644
--- a/src/block/block.js
+++ b/src/block/block.js
@@ -17,6 +17,7 @@ function Block({
   as,
   overrides,
   color,
+  backgroundColor,
   font,
   alignContent,
   alignItems,
@@ -83,6 +84,7 @@ function Block({
     <BaseBlock
       $as={as}
       $color={color}
+      $backgroundColor={backgroundColor}
       $font={font}
       $alignContent={alignContent}
       $alignItems={alignItems}
diff --git a/src/block/styled-components.js b/src/block/styled-components.js
index 096f47f11..f6fac5a69 100644
--- a/src/block/styled-components.js
+++ b/src/block/styled-components.js
@@ -78,6 +78,11 @@ export const StyledBlock = styled('div', (props: StyledBlockPropsT) => {
     value: get(props, '$color'),
     transform: color => colors[color] || color,
   });
+  styles.apply({
+    property: 'backgroundColor',
+    value: get(props, '$backgroundColor'),
+    transform: backgroundColor => colors[backgroundColor] || backgroundColor,
+  });
 
   styles.apply({
     property: 'fontFamily',
diff --git a/src/block/types.js b/src/block/types.js
index 5d4248c2f..868cd4d68 100644
--- a/src/block/types.js
+++ b/src/block/types.js
@@ -228,6 +228,8 @@ export type BlockPropsT = {
   overrides?: OverridesT,
   /** Accepts all themeable color properties (`primary200`, etc.). */
   color?: ResponsiveT<string>,
+  /** Accepts all themeable color properties (`primary200`, etc.). */
+  backgroundColor?: ResponsiveT<string>,
   /** Accepts all themeable font properties (`font200`, etc.). */
   font?: string | Array<string>,
   /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content */
@@ -319,6 +321,7 @@ export type StyledBlockPropsT = {
   $theme: ThemeT,
   $as?: ElementType,
   $color?: ResponsiveT<string>,
+  $backgroundColor?: ResponsiveT<string>,
   $font?: ResponsiveT<string>,
   $alignContent?: ResponsiveT<AlignContentT>,
   $alignItems?: ResponsiveT<AlignItemsT>,


Test patch:
diff --git a/src/block/__tests__/block.test.js b/src/block/__tests__/block.test.js
index 95c01a276..26c2bcd7c 100644
--- a/src/block/__tests__/block.test.js
+++ b/src/block/__tests__/block.test.js
@@ -31,6 +31,20 @@ describe('Block', () => {
     });
   });
 
+  it('renders themed backgroundColor if provided', () => {
+    expect(
+      retrieveStyles(<Block backgroundColor="primary200">test</Block>),
+    ).toMatchObject({backgroundColor: '$theme.colors.primary200'});
+  });
+
+  it('renders provided backgroundColor if no matching themeable value is found', () => {
+    expect(
+      retrieveStyles(<Block backgroundColor="red">test</Block>),
+    ).toMatchObject({
+      backgroundColor: 'red',
+    });
+  });
+
   it('renders themed font if provided', () => {
     expect(retrieveStyles(<Block font="font200">test</Block>)).toMatchObject({
       fontFamily: '$theme.typography.font200.fontFamily',