From e5a545cdd0c7e5dd24e988e953e178fbff8d14b2 Mon Sep 17 00:00:00 2001
From: Shawn Allen <shawn.allen@github.com>
Date: Mon, 2 Jul 2018 12:44:44 -0700
Subject: [PATCH 1/2] make Block::shadow accept "small" instead of true

---
 examples/component-examples/Box.js   | 2 +-
 examples/component-examples/Caret.js | 2 +-
 src/Block.js                         | 4 ++--
 src/__tests__/Block.js               | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/component-examples/Box.js b/examples/component-examples/Box.js
index 3df2bf453b6..1fd12622966 100644
--- a/examples/component-examples/Box.js
+++ b/examples/component-examples/Box.js
@@ -8,7 +8,7 @@ const BoxExample =
       <div>
         <Box m={2}>This is a box</Box>
         <Box p={2} m={2}>This is a box with padding.</Box>
-        <Box shadow p={2} m={2}>This is a box with shadow.</Box>
+        <Box shadow='small' p={2} m={2}>This is a box with a small shadow.</Box>
         <Box shadow='medium' p={2} m={2}>This is a box with a medium shadow.</Box>
         <Box shadow='large' p={2} m={2}>This is a box with a large shadow.</Box>
         <Box shadow='extra-large' p={2} m={2}>This is a box with an extra-large shadow.</Box>
diff --git a/examples/component-examples/Caret.js b/examples/component-examples/Caret.js
index b363de45d67..d6b5a88d37e 100644
--- a/examples/component-examples/Caret.js
+++ b/examples/component-examples/Caret.js
@@ -7,7 +7,7 @@ const CaretExample =
     element: (
       <Block p={4}>
         {Caret.locations.map((loc, i) => (
-          <Box p={2} mb={4} position='relative' maxWidth={300} minHeight={96} shadow key={i}>
+          <Box p={2} mb={4} position='relative' maxWidth={300} minHeight={96} shadow='small' key={i}>
             <Text fontSize={1} mono>location='{loc}'</Text>
             <Caret location={loc} />
           </Box>
diff --git a/src/Block.js b/src/Block.js
index 8a06f45ec01..111f615ef06 100644
--- a/src/Block.js
+++ b/src/Block.js
@@ -37,7 +37,7 @@ const Block = props => {
         fg && `text-${fg}`,
         position && `position-${position}`,
         typeof round === 'number' && `rounded-${round}`,
-        shadow && (shadow === true ? 'box-shadow' : `box-shadow-${shadow}`)
+        shadow && (shadow === 'small' ? 'box-shadow' : `box-shadow-${shadow}`)
       )}
       style={style}
     >
@@ -53,7 +53,7 @@ Block.propTypes = {
   fg: PropTypes.string,
   position: PropTypes.oneOf(['absolute', 'fixed', 'relative']),
   round: PropTypes.number,
-  shadow: PropTypes.oneOf([true, 'medium', 'large', 'extra-large']),
+  shadow: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large']),
   ...mapWhitespaceProps.propTypes
 }
 
diff --git a/src/__tests__/Block.js b/src/__tests__/Block.js
index d60e2902e10..9a443b53c61 100644
--- a/src/__tests__/Block.js
+++ b/src/__tests__/Block.js
@@ -45,7 +45,7 @@ describe('Block', () => {
   })
 
   it('renders shadow', () => {
-    expect(renderClasses(<Block shadow />)).toEqual(['box-shadow'])
+    expect(renderClasses(<Block shadow="small" />)).toEqual(['box-shadow'])
     expect(renderClasses(<Block shadow="medium" />)).toEqual(['box-shadow-medium'])
     expect(renderClasses(<Block shadow="large" />)).toEqual(['box-shadow-large'])
     expect(renderClasses(<Block shadow="extra-large" />)).toEqual(['box-shadow-extra-large'])

From 117b087ee5b86b85aff78f5ccfe3b9f9320bb26c Mon Sep 17 00:00:00 2001
From: Shawn Allen <shawn.allen@github.com>
Date: Mon, 2 Jul 2018 21:22:16 -0700
Subject: [PATCH 2/2] better Box examples

---
 examples/component-examples/Box.js | 31 ++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/examples/component-examples/Box.js b/examples/component-examples/Box.js
index 1fd12622966..741d6fbc2e7 100644
--- a/examples/component-examples/Box.js
+++ b/examples/component-examples/Box.js
@@ -1,19 +1,30 @@
 import React from 'react'
-import { Box } from '../../src'
+import ExampleHeading from '../doc-components/ExampleHeading'
+import {Block, Box, Text} from '../../src'
 
 const BoxExample =
   {
     name: 'Box',
     element: (
-      <div>
-        <Box m={2}>This is a box</Box>
-        <Box p={2} m={2}>This is a box with padding.</Box>
-        <Box shadow='small' p={2} m={2}>This is a box with a small shadow.</Box>
-        <Box shadow='medium' p={2} m={2}>This is a box with a medium shadow.</Box>
-        <Box shadow='large' p={2} m={2}>This is a box with a large shadow.</Box>
-        <Box shadow='extra-large' p={2} m={2}>This is a box with an extra-large shadow.</Box>
-        <Box border={[true, 'green']} p={2} m={2}>This is a box with a green border.</Box>
-      </div>
+      <Block p={4}>
+        <Box my={4}>Box</Box>
+        <Box p={2} my={4}>Box with padding</Box>
+
+        <ExampleHeading>shadows</ExampleHeading>
+        {['small', 'medium', 'large', 'extra-large'].map(shadow => (
+          <Box shadow={shadow} p={2} my={4}>Box with <Text mono>shadow='{shadow}'</Text></Box>
+        ))}
+
+        <ExampleHeading>borders</ExampleHeading>
+        {['blue', 'red', 'green', 'gray'].map(borderColor => (
+          <Box border={[true, borderColor]} p={2} my={4}>Box with <Text mono>borderColor='{borderColor}'</Text></Box>
+        ))}
+
+        <ExampleHeading>rounded corners</ExampleHeading>
+        {[0, 1, 2, 3].map(borderRadius => (
+          <Box border round={borderRadius} p={2} my={4}>Box with <Text mono>border borderRadius={`{${borderRadius}}`}</Text></Box>
+        ))}
+      </Block>
     )
   }