add ButtonClose component

docs/content/Buttons.md

@@ -17,6 +17,7 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
 <ButtonOutline>Button Outline</ButtonOutline>
 <ButtonPrimary>Button Primary</ButtonPrimary>
 <ButtonInvisible>Button Invisible</ButtonInvisible>
+<ButtonClose onClick={() => window.alert('button clicked')}/>
 
 <ButtonGroup display='block' my={2}>
   <Button>Button</Button>

index.d.ts

@@ -115,13 +115,20 @@ declare module '@primer/components' {
       LayoutProps,
       Omit<React.HTMLAttributes<HTMLElement>, 'color'> {}
 
+  export interface ButtonCloseProps
+    extends BaseProps,
+      CommonProps,
+      LayoutProps,
+      Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {}
+
   export const ButtonPrimary: React.FunctionComponent<ButtonProps>
   export const ButtonOutline: React.FunctionComponent<ButtonProps>
   export const ButtonDanger: React.FunctionComponent<ButtonProps>
   export const ButtonInvisible: React.FunctionComponent<ButtonProps>
   export const ButtonTableList: React.FunctionComponent<ButtonTableListProps>
   export const ButtonGroup: React.FunctionComponent<BoxProps>
   export const Button: React.FunctionComponent<ButtonProps>
+  export const ButtonClose: React.FunctionComponent<ButtonCloseProps>
 
   export interface AvatarProps extends CommonProps, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'color'> {
     size?: number
@@ -573,6 +580,11 @@ declare module '@primer/components/lib/Heading' {
   export default Heading
 }
 
+declare module '@primer/components/lib/ButtonClose' {
+  import {ButtonClose} from '@primer/components'
+  export default ButtonClose
+}
+
 declare module '@primer/components/lib/ButtonDanger' {
   import {ButtonDanger} from '@primer/components'
   export default ButtonDanger

src/Button/ButtonClose.js

@@ -0,0 +1,44 @@
+import {get, COMMON, LAYOUT} from '../constants'
+import theme from '../theme'
+import {XIcon} from '@primer/octicons-react'
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+const StyledButton = styled.button`
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+  margin: -6px -6px -6px 0px;
+  border-radius: 3px;
+  color: ${get('colors.text.white')};
+  border: 0;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba(139, 148, 158, 0.3);
+  }
+  ${COMMON};
+  ${LAYOUT};
+`
+
+const ButtonClose = (props) => (
+  <StyledButton aria-label="Close" {...props}>
+    <XIcon />
+  </StyledButton>
+)
+
+ButtonClose.defaultProps = {
+  theme,
+}
+
+ButtonClose.propTypes = {
+  children: PropTypes.node,
+  onClick: PropTypes.func,
+  ...COMMON.propTypes,
+  ...LAYOUT.propTypes,
+}
+
+export default ButtonClose

src/Button/index.js

@@ -6,3 +6,4 @@ export {default as ButtonOutline} from './ButtonOutline'
 export {default as ButtonPrimary} from './ButtonPrimary'
 export {default as ButtonInvisible} from './ButtonInvisible'
 export {default as ButtonTableList} from './ButtonTableList'
+export {default as ButtonClose} from './ButtonClose'

src/index.js

@@ -25,6 +25,7 @@ export {
   ButtonPrimary,
   ButtonInvisible,
   ButtonTableList,
+  ButtonClose,
   ButtonGroup,
 } from './Button'
 export {default as Caret} from './Caret'
@@ -43,6 +44,7 @@ export {default as Heading} from './Heading'
 export {default as LabelGroup} from './LabelGroup'
 export {default as Label} from './Label'
 export {default as Link} from './Link'
+export {default as Modal} from './Modal'
 export {default as Pagehead} from './Pagehead'
 export {default as Pagination} from './Pagination'
 export {default as PointerBox} from './PointerBox'