Merge pull request #138 from primer/margin-and-padding-for-all

Add Margin & Padding Utilities to all Components

src/Avatar.js

@@ -1,16 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
-const Avatar = props => {
-  const {alt, isChild, size = 20, src} = props
+const Avatar = ({alt, isChild, size = 20, src, ...rest}) => {
+  const {className} = mapWhitespaceProps(rest)
 
-  const className = classnames('avatar', {
-    'avatar-small': size <= 24,
-    'avatar-child': isChild
-  })
+  const classes = classnames(
+    'avatar',
+    {
+      'avatar-small': size <= 24,
+      'avatar-child': isChild
+    },
+    className
+  )
 
-  return <img className={className} alt={alt} src={src} width={size} height={size} />
+  return <img className={classes} alt={alt} src={src} width={size} height={size} />
 }
 
 Avatar.propTypes = {

src/BranchName.js

@@ -1,14 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
-export default function BranchName({children, href, tag: Tag}) {
+export default function BranchName({children, href, tag: Tag, ...rest}) {
+  const {className} = mapWhitespaceProps(rest)
   // We don't want someone to use href on a non tag
   if (Tag !== 'a') {
     href = null
   }
 
   return (
-    <Tag href={href} className="branch-name">
+    <Tag href={href} className={classnames('branch-name', className)}>
       {children}
     </Tag>
   )

src/Button.js

@@ -1,9 +1,12 @@
 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
+import {mapWhitespaceProps} from './props'
 
-function Button({tag: Tag = 'button', children, size, block, linkStyle, grouped, scheme, onClick, disabled, ...props}) {
+function Button({tag: Tag = 'button', children, size, block, linkStyle, grouped, scheme, onClick, disabled, ...rest}) {
+  const {className} = mapWhitespaceProps(rest)
   const classes = classnames(
+    className,
     {
       btn: !linkStyle,
       'btn-link': linkStyle,
@@ -16,7 +19,7 @@ function Button({tag: Tag = 'button', children, size, block, linkStyle, grouped,
   )
 
   return (
-    <Tag {...props} type="button" disabled={disabled} onClick={disabled ? undefined : onClick} className={classes}>
+    <Tag {...rest} type="button" disabled={disabled} onClick={disabled ? undefined : onClick} className={classes}>
       {children}
     </Tag>
   )

src/CircleBadge.js

@@ -1,18 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
 const ICON_CLASS = 'CircleBadge-icon'
 
 const CircleBadge = ({tag: Tag = 'div', size = 'medium', bg, children, ...rest}) => {
+  const {className} = mapWhitespaceProps(rest)
   const mappedChildren = React.Children.map(children, child => {
     let {className = ''} = child.props
     if (!className.includes(ICON_CLASS)) {
       className = classnames(ICON_CLASS, className)
     }
     return React.cloneElement(child, {className})
   })
-  const classes = classnames('CircleBadge', `CircleBadge--${size}`, bg && `bg-${bg}`)
+  const classes = classnames(className, 'CircleBadge', `CircleBadge--${size}`, bg && `bg-${bg}`)
   return (
     <Tag className={classes} {...rest}>
       {mappedChildren}

src/CircleOcticon.js

@@ -2,16 +2,19 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Octicon from '@githubprimer/octicons-react'
+import {mapWhitespaceProps} from './props'
 import {colors} from './theme'
 
 export default function CircleOcticon({size, bg, color, ...rest}) {
-  const className = classnames(
+  const {className} = mapWhitespaceProps(rest)
+  const classes = classnames(
+    className,
     'circle d-flex flex-items-center flex-justify-center',
     bg && `bg-${bg}`,
     color && `text-${color}`
   )
   return (
-    <div style={{width: `${size}px`, height: `${size}px`}} className={className}>
+    <div style={{width: `${size}px`, height: `${size}px`}} className={classes}>
       <Octicon size={size} {...rest} />
     </div>
   )

src/CounterLabel.js

@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
-export default function CounterLabel({theme, children}) {
-  return <span className={classnames('Counter', theme && `Counter--${theme}`)}>{children}</span>
+export default function CounterLabel({theme, children, ...rest}) {
+  const {className} = mapWhitespaceProps(rest)
+  return <span className={classnames(className, 'Counter', theme && `Counter--${theme}`)}>{children}</span>
 }
 
 CounterLabel.propTypes = {

src/Details.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
 function getRenderer(children) {
   return typeof children === 'function' ? children : () => children
@@ -21,11 +22,11 @@ export default class Details extends React.Component {
   }
 
   render() {
-    const {className, children, render = getRenderer(children), ...props} = this.props
+    const {className, children, render = getRenderer(children), ...rest} = mapWhitespaceProps(this.props)
     const {open} = this.state
 
     return (
-      <details {...props} className={classnames('details-reset', className)} open={open}>
+      <details {...rest} className={classnames('details-reset', className)} open={open}>
         {render({open, toggle: this.toggle})}
       </details>
     )

src/DonutChart.js

@@ -2,14 +2,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {arc as Arc, pie as Pie} from 'd3-shape'
 import DonutSlice from './DonutSlice'
-import {oneOrMoreOf} from './props'
+import {oneOrMoreOf, mapWhitespaceProps} from './props'
 
 function mapData(data) {
   return Object.keys(data).map(key => <DonutSlice key={key} state={key} value={data[key]} />)
 }
 
 const DonutChart = props => {
-  const {data, children = mapData(data), size = 30} = props
+  const {data, children = mapData(data), size = 30, ...rest} = props
+  const {className} = mapWhitespaceProps(rest)
 
   const radius = size / 2
   const innerRadius = radius - 6
@@ -28,7 +29,7 @@ const DonutChart = props => {
   })
 
   return (
-    <svg width={size} height={size}>
+    <svg width={size} height={size} className={className}>
       <g transform={`translate(${radius},${radius})`}>{slices}</g>
     </svg>
   )

src/Dropdown.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import Details from './Details'
 import Button from './Button'
 import Caret from './Caret'
+import {mapWhitespaceProps} from './props'
 
 const arrowStyles = {
   content: '',
@@ -14,9 +16,10 @@ const arrowStyles = {
   height: '0'
 }
 
-export default function Dropdown({title, scheme, children}) {
+export default function Dropdown({title, scheme, children, ...rest}) {
+  const {className} = mapWhitespaceProps(rest)
   return (
-    <div className="BtnGroup">
+    <div className={classnames(className, 'BtnGroup')}>
       <Details className="details-reset BtnGroup-form d-flex">
         {({toggle}) => (
           <React.Fragment>

src/Flash.js

@@ -1,14 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
 const schemeMap = {
   green: 'success',
   red: 'error',
   yellow: 'warn'
 }
 
-export default function Flash({children, className, full, scheme}) {
+export default function Flash({children, full, scheme, ...rest}) {
+  const {className} = mapWhitespaceProps(rest)
   return (
     <div className={classnames(className, 'flash', full && 'flash-full', scheme && `flash-${schemeMap[scheme]}`)}>
       {children}

src/FlexItem.js

@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
-const FlexItem = ({tag: Tag = 'div', children, flexAuto, alignSelf}) => {
-  const classes = classnames({'flex-auto': flexAuto}, alignSelf && `flex-self-${alignSelf}`)
+const FlexItem = ({tag: Tag = 'div', children, flexAuto, alignSelf, ...rest}) => {
+  const {className} = mapWhitespaceProps(rest)
+  const classes = classnames(className, {'flex-auto': flexAuto}, alignSelf && `flex-self-${alignSelf}`)
   return <Tag className={classes}>{children}</Tag>
 }
 

src/Label.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
 const colorScheme = (scheme, outline) => {
   if (outline) {
@@ -17,10 +18,12 @@ const colorScheme = (scheme, outline) => {
   }
 }
 
-export default function Label(props) {
-  const {outline, scheme, children} = props
+export default function Label({outline, scheme, children, ...rest}) {
+  const {className} = mapWhitespaceProps(rest)
   return (
-    <span className={classnames('Label', outline && 'Label--outline', colorScheme(scheme, outline))}>{children}</span>
+    <span className={classnames(className, 'Label', outline && 'Label--outline', colorScheme(scheme, outline))}>
+      {children}
+    </span>
   )
 }
 

src/Link.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
-export default function Link({children, className, muted, scheme, nounderline, ...rest}) {
+export default function Link({children, muted, scheme, nounderline, ...rest}) {
+  const {className} = mapWhitespaceProps(rest)
   const colorClass = scheme ? `link-${scheme}` : muted ? 'muted-link' : 'text-blue'
   return (
     <a className={classnames(className, colorClass, nounderline && 'no-underline')} {...rest}>

src/MergeStatus.js

@@ -12,7 +12,7 @@ const stateColorMap = {
 
 const octicon = <Octicon icon={GitMerge} size="medium" />
 
-const MergeStatus = ({state}) => <StateLabel scheme={stateColorMap[state]} icon={octicon} />
+const MergeStatus = ({state, ...rest}) => <StateLabel {...rest} scheme={stateColorMap[state]} icon={octicon} />
 
 MergeStatus.propTypes = {
   state: PropTypes.oneOf(['ready', 'invalid', 'merged', 'pending']).isRequired

src/StateLabel.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import Octicon, {GitMerge, IssueClosed, IssueOpened, IssueReopened} from '@githubprimer/octicons-react'
 import classnames from 'classnames'
 import {colors} from './theme'
+import {mapWhitespaceProps} from './props'
 
 const stateColorMap = {
   open: 'green',
@@ -36,7 +37,8 @@ function getIconComponent(icon, children) {
   return null
 }
 
-const StateLabel = ({state, scheme, small, icon, children}) => {
+const StateLabel = ({state, scheme, icon, small, children, ...rest}) => {
+  const {className} = mapWhitespaceProps(rest)
   if (icon !== false) {
     icon = icon || getOcticon(state)
   }
@@ -50,6 +52,7 @@ const StateLabel = ({state, scheme, small, icon, children}) => {
   return (
     <span
       className={classnames(
+        className,
         'State',
         {
           'State--small': small

src/Text.js

@@ -13,8 +13,7 @@ const fontSizeMap = {
   6: 0
 }
 
-const Text = props => {
-  const {tag: Tag = 'span', children, color, fontSize, fontWeight, lineHeight, mono, nowrap, ...rest} = props
+const Text = ({tag: Tag = 'span', children, color, fontSize, fontWeight, lineHeight, mono, nowrap, ...rest}) => {
   const {className} = mapWhitespaceProps(rest)
 
   const fontSizeClass =

src/TextInput.js

@@ -1,26 +1,42 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
-const TextInput = ({autocomplete, onChange, block, disabled, id, name, placeholder, required, size, value}) => (
-  <input
-    aria-label={placeholder}
-    autoComplete={autocomplete}
-    className={classnames('form-control', {
-      'input-block': block,
-      'input-sm': size === 'small',
-      'input-lg': size === 'large'
-    })}
-    disabled={disabled}
-    id={id}
-    name={name}
-    placeholder={placeholder}
-    required={required}
-    type="text"
-    value={value}
-    onChange={onChange}
-  />
-)
+const TextInput = ({
+  autocomplete,
+  onChange,
+  block,
+  disabled,
+  id,
+  name,
+  placeholder,
+  required,
+  size,
+  value,
+  ...rest
+}) => {
+  const {className} = mapWhitespaceProps(rest)
+  return (
+    <input
+      aria-label={placeholder}
+      autoComplete={autocomplete}
+      onChange={onChange}
+      className={classnames(className, 'form-control', {
+        'input-block': block,
+        'input-sm': size === 'small',
+        'input-lg': size === 'large'
+      })}
+      disabled={disabled}
+      id={id}
+      name={name}
+      placeholder={placeholder}
+      required={required}
+      type="text"
+      value={value}
+    />
+  )
+}
 
 TextInput.propTypes = {
   autocomplete: PropTypes.string,

src/Tooltip.js

@@ -1,12 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import {mapWhitespaceProps} from './props'
 
-export default function Tooltip({children, direction, text, noDelay, align, wrap}) {
+export default function Tooltip({children, direction, text, noDelay, align, wrap, ...rest}) {
+  const {className} = mapWhitespaceProps(rest)
   return (
     <span
       aria-label={text}
       className={classnames(
+        className,
         'tooltipped',
         `tooltipped-${direction}`,
         align && `tooltipped-align-${align}-2`,