Fix merge button

examples/demos/MergeActions.js

@@ -5,7 +5,7 @@ import MergeButton from './MergeButton'
 
 const MergeActions = ({numCommits, onClick, desktopUrl, state}) => {
   return (
-    <Box py={3} px={4} bg="gray.0" style={{borderBottomLeftRadius: '3px', borderBottomRightRadius: '3px'}}>
+    <Box py={3} px={4} bg="gray.0" css={{borderBottomLeftRadius: '3px', borderBottomRightRadius: '3px'}}>
       <MergeButton primary={state === 'ready'} numCommits={numCommits} onClick={onClick} />
       <Text ml={2}>You can also </Text>
       <Link nounderline href={desktopUrl}>

examples/demos/MergeButton.js

@@ -1,18 +1,42 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, Button, PointerBox, Details, Text} from '../../src'
+import styled from 'react-emotion'
+import {withSystemProps, LAYOUT, listStyle} from '../../src/system-props'
+import {Absolute, Button, FlexContainer, PointerBox, Details, Text} from '../../src'
 
-const MergeButton = ({numCommits, onClick, primary}) => {
-  const arrowStyles = {
-    content: '',
-    border: '4px solid',
-    borderRightColor: 'transparent',
-    borderLeftColor: 'transparent',
-    borderBottomColor: 'transparent',
-    width: '0',
-    height: '0'
-  }
+const Arrow = styled('span')({
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  border: '5px solid',
+  borderRightColor: 'transparent',
+  borderLeftColor: 'transparent',
+  borderBottomColor: 'transparent',
+  width: 0,
+  height: 0
+})
+
+const List = withSystemProps(
+  {
+    is: 'ul',
+    m: 0,
+    p: 0,
+    listStyle: 'none'
+  },
+  [...LAYOUT, listStyle]
+)
 
+const ListItem = withSystemProps(
+  {
+    is: 'li',
+    borderColor: 'gray.2',
+    m: 0,
+    p: 2,
+    pl: 4
+  },
+  LAYOUT
+)
+
+const MergeButton = ({numCommits, onClick, primary}) => {
   const borderStyles = {
     borderTopLeftRadius: '0',
     borderBottomLeftRadius: '0'
@@ -26,50 +50,50 @@ const MergeButton = ({numCommits, onClick, primary}) => {
   const commits = numCommits === 1 ? '1 commit' : `${numCommits} commits`
 
   return (
-    <div className="BtnGroup">
-      <Button {...buttonSchemeProps} grouped onClick={onClick} style={{borderRight: 0}}>
+    <FlexContainer className="BtnGroup">
+      <Button {...buttonSchemeProps} grouped onClick={onClick} css={{borderRight: 0}}>
         Merge Pull Request
       </Button>
-      <Details className="details-reset d-flex float-right">
+      <Details>
         {({toggle}) => (
           <React.Fragment>
-            <Button is="summary" {...buttonSchemeProps} onClick={toggle} style={borderStyles}>
-              <div className="d-inline-block v-align-middle" style={arrowStyles} />
+            <Button is="summary" {...buttonSchemeProps} onClick={toggle} css={borderStyles}>
+              <Arrow />
             </Button>
-            <Box position="absolute" width={300} mt={1} style={{zIndex: 99999}}>
+            <Absolute mt={1} width={300} zIndex={99999} boxShadow="small">
               <PointerBox caret="top-left">
-                <ul className="list-style-none p-0 m-0">
-                  <li className="border-bottom py-2 pl-4 pr-2">
+                <List>
+                  <ListItem borderBottom={1}>
                     <Text is="p" m={0} fontSize={1} fontWeight="bold">
                       Create a merge commit
                     </Text>
                     <Text is="p" m={0} fontSize={0}>
                       All commits from this branch will be added to the base branch via a merge commit.
                     </Text>
-                  </li>
-                  <li className="border-bottom py-2 pl-4 pr-2">
+                  </ListItem>
+                  <ListItem borderBottom={1}>
                     <Text is="p" m={0} fontSize={1} fontWeight="bold">
                       Squash and merge
                     </Text>
                     <Text is="p" m={0} fontSize={0}>
                       The {commits} from this branch will be combined into one commit in the base branch.
                     </Text>
-                  </li>
-                  <li className="py-2 pl-4 pr-2">
+                  </ListItem>
+                  <ListItem>
                     <Text is="p" m={0} fontSize={1} fontWeight="bold">
                       Rebase and merge
                     </Text>
                     <Text is="p" fontSize={0} m={0}>
                       The {commits} from this branch will be rebased and added to the base branch
                     </Text>
-                  </li>
-                </ul>
+                  </ListItem>
+                </List>
               </PointerBox>
-            </Box>
+            </Absolute>
           </React.Fragment>
         )}
       </Details>
-    </div>
+    </FlexContainer>
   )
 }
 

src/system-props.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import {style} from 'styled-system'
 import system from 'system-components/emotion'
 import {default as defaultTheme} from './theme'
 
@@ -139,6 +140,12 @@ export function withoutPropTypes(Component, props) {
   return Component
 }
 
+export const listStyle = style({
+  prop: 'listStyle',
+  cssProperty: 'list-style',
+  key: 'listStyles'
+})
+
 function guardDoubleRender(Component) {
   function render(props) {
     const {is, ...rest} = props