Merge pull request #229 from primer/fix-merge-button

Fix merge button
primer · Aug 24, 2018 · 5f0aa66 · 5f0aa66
2 parents 266ecbe + bd8c517
commit 5f0aa66
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 49 deletions.
diff --git a/examples/doc-components/MergeActions.js b/examples/doc-components/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}>

diff --git a/examples/doc-components/MergeBox.js b/examples/doc-components/MergeBox.js
@@ -8,7 +8,7 @@ const stateColorMap = {
   ready: 'green.5',
   invalid: 'invalid',
   merged: 'purple.5',
-  pending: 'yellow.5'
+  pending: 'yellow.7'
 }
 
 function getDesktopURL(repoUrl, branchName) {

diff --git a/examples/doc-components/MergeButton.js b/examples/doc-components/MergeButton.js
@@ -1,18 +1,43 @@
 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, Box, Button, Heading, 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 MergeOption = ({title, value, children, ...boxProps}) => {
+  return (
+    <Box is="label" display="block" borderColor="gray.2" p={2} pl={4} {...boxProps} css={{fontWeight: 'normal'}}>
+      <Heading fontSize={1}>{title}</Heading>
+      <Text is="div" fontSize={0}>
+        {children}
+      </Text>
+      <input type="radio" name="merge-type" value={value} hidden />
+    </Box>
+  )
+}
+
+export default function MergeButton({numCommits, onClick, primary}) {
   const borderStyles = {
     borderTopLeftRadius: '0',
     borderBottomLeftRadius: '0'
@@ -26,50 +51,35 @@ 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">
-                <Box is="ul" p={0} m={0} className="list-style-none">
-                  <Box is="li" borderBottom={1} borderColor="gray.2" pl={4} pr={2}>
-                    <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>
-                  </Box>
-                  <Box is="li" borderBottom={1} borderColor="gray.2" pl={4} pr={2}>
-                    <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>
-                  </Box>
-                  <Box is="li" py={2} pl={4} pr={2}>
-                    <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>
-                  </Box>
-                </Box>
+                <List>
+                  <MergeOption title="Create a merge commit" value="merge" borderBottom={1}>
+                    All commits from this branch will be added to the base branch via a merge commit.
+                  </MergeOption>
+                  <MergeOption title="Squash and merge" value="squash" borderBottom={1}>
+                    The {commits} from this branch will be combined into one commit in the base branch.
+                  </MergeOption>
+                  <MergeOption title="Rebase and merge" value="rebase">
+                    The {commits} from this branch will be rebased and added to the base branch
+                  </MergeOption>
+                </List>
               </PointerBox>
-            </Box>
+            </Absolute>
           </React.Fragment>
         )}
       </Details>
-    </div>
+    </FlexContainer>
   )
 }
 
@@ -82,5 +92,3 @@ MergeButton.propTypes = {
   onClick: PropTypes.func.isRequired,
   primary: PropTypes.bool
 }
-
-export default MergeButton
diff --git a/src/system-props.js b/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