WIP: BorderBox and Popover bug fixes

docs/content/Popover.md

@@ -1,6 +1,7 @@
 ---
 title: Popover
 ---
+import State from '../components/State'
 
 Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
 
@@ -28,6 +29,18 @@ It can be useful to give the `Popover.Content` element a margin to help align th
 </Relative>
 ```
 
+## Border color
+
+The `borderColor` system prop (read our [System Props](/system-props) doc page for more info) also affects the color of the caret.
+
+```jsx live
+<Popover relative open={true}>
+  <Popover.Content borderColor='blue.5'>
+    <Text>Hi there!</Text>
+  </Popover.Content>
+</Popover>
+```
+
 ## Caret position
 
 `Popover` supports various caret positions, which you can specify via the `caret` property. This demo shows all the valid values for the prop. The default is `top`. Note that the `top-left`, `bottom-left`, `top-right`, and `bottom-right` values modify the horizontal alignment of the popover.

src/BorderBox.js

@@ -8,7 +8,8 @@ const BorderBox = styled(Box)(BORDER)
 
 BorderBox.defaultProps = {
   theme,
-  border: '1px solid',
+  borderWidth: '1px',
+  borderStyle: 'solid',
   borderColor: 'gray.2',
   borderRadius: 2
 }

src/Popover.js

@@ -20,6 +20,14 @@ const Popover = styled.div.attrs(({className, caret}) => {
   ${POSITION};
 `
 
+function getPopoverBorderColor(props) {
+  if (props.borderColor) {
+    return get(`colors.${props.borderColor}`)(props)
+  } else {
+    return get('popovers.colors.caret')(props)
+  }
+}
+
 Popover.Content = styled(BorderBox)`
   position: relative;
   width: 232px;
@@ -44,7 +52,7 @@ Popover.Content = styled(BorderBox)`
     top: -${get('space.3')};
     margin-left: -9px;
     border: ${get('space.2')} solid transparent; // TODO: solid?
-    border-bottom-color: ${get('popovers.colors.caret')};
+    border-bottom-color: ${getPopoverBorderColor};
   }
 
   &::after {
@@ -66,7 +74,7 @@ Popover.Content = styled(BorderBox)`
 
     &::before {
       bottom: -${get('space.3')};
-      border-top-color: ${get('popovers.colors.caret')};
+      border-top-color: ${getPopoverBorderColor};
     }
 
     &::after {
@@ -145,7 +153,7 @@ Popover.Content = styled(BorderBox)`
   ${Popover}.caret-pos--right-bottom & {
     &::before {
       right: -${get('space.3')};
-      border-left-color: ${get('popovers.colors.caret')};
+      border-left-color: ${getPopoverBorderColor};
     }
 
     &::after {
@@ -161,7 +169,7 @@ Popover.Content = styled(BorderBox)`
   ${Popover}.caret-pos--left-bottom & {
     &::before {
       left: -${get('space.3')};
-      border-right-color: ${get('popovers.colors.caret')};
+      border-right-color: ${getPopoverBorderColor};
     }
 
     &::after {

src/__tests__/Position.js

@@ -35,7 +35,7 @@ describe('position components', () => {
     it('can render other components with the is prop', () => {
       const result = render(<Absolute as={BorderBox} />)
       expect(result).toHaveStyleRule('position', 'absolute')
-      expect(result).toHaveStyleRule('border', '1px solid')
+      expect(result).not.toHaveStyleRule('border-style')
     })
 
     it('respects the "as" prop', () => {
@@ -71,7 +71,7 @@ describe('position components', () => {
     it('can render other components with the is prop', () => {
       const result = render(<Fixed as={BorderBox} />)
       expect(result).toHaveStyleRule('position', 'fixed')
-      expect(result).toHaveStyleRule('border', '1px solid')
+      expect(result).not.toHaveStyleRule('border-style')
     })
   })
 
@@ -103,7 +103,7 @@ describe('position components', () => {
     it('can render other components with the is prop', () => {
       const result = render(<Relative as={BorderBox} />)
       expect(result).toHaveStyleRule('position', 'relative')
-      expect(result).toHaveStyleRule('border', '1px solid')
+      expect(result).not.toHaveStyleRule('border-style')
     })
   })
 
@@ -132,7 +132,7 @@ describe('position components', () => {
     it('can render other components with the is prop', () => {
       const result = render(<Sticky as={BorderBox} />)
       expect(result).toHaveStyleRule('position', 'sticky')
-      expect(result).toHaveStyleRule('border', '1px solid')
+      expect(result).not.toHaveStyleRule('border-style')
     })
   })
 })

src/__tests__/__snapshots__/PointerBox.js.snap

@@ -3,7 +3,8 @@
 exports[`PointerBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
 .c1 {
   background-color: #d73a49;
-  border: 1px solid;
+  border-width: 1px;
+  border-style: solid;
   border-color: #e1e4e8;
   border-radius: 6px;
 }
@@ -54,7 +55,8 @@ exports[`PointerBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
 exports[`PointerBox passes the "borderColor" prop to both <BorderBox> and <Caret> 1`] = `
 .c1 {
   border-color: #d73a49;
-  border: 1px solid;
+  border-width: 1px;
+  border-style: solid;
   border-radius: 6px;
 }
 
@@ -103,7 +105,8 @@ exports[`PointerBox passes the "borderColor" prop to both <BorderBox> and <Caret
 
 exports[`PointerBox renders a <Caret> in <BorderBox> with relative positioning 1`] = `
 .c1 {
-  border: 1px solid;
+  border-width: 1px;
+  border-style: solid;
   border-color: #e1e4e8;
   border-radius: 6px;
 }