feat: Split spacingProps into margin/paddingProps

src/Box/index.js

@@ -4,15 +4,17 @@ import PropTypes from 'prop-types';
 import {
 	positionProps,
 	flexProps,
-	spacingProps,
+	marginProps,
+	paddingProps,
 	borderProps,
 	textProps,
 } from '../styleProps';
 
 const Box = styled.div`
 	${positionProps}
 	${flexProps}
-	${spacingProps}
+	${marginProps}
+	${paddingProps}
 	${borderProps}
 	${textProps}
 `;

src/Button/index.js

@@ -6,6 +6,8 @@ import {alpha} from '../utils/colors';
 import {pxToRem} from '../utils/units';
 import {fillParent, ellipsis} from '../mixins';
 
+import {positionProps, marginProps} from '../styleProps';
+
 import ButtonCore from '../ButtonCore';
 import Icon from '../Icon';
 
@@ -25,7 +27,7 @@ const PropFilteringWrapper = ({
 const Wrapper = styled(PropFilteringWrapper)`
 	/* Structure, size & spacing */
 
-	position: relative;
+	${positionProps}
 
 	${p =>
 		p.fullWidth &&
@@ -34,6 +36,7 @@ const Wrapper = styled(PropFilteringWrapper)`
 			width: 100%; /* needed for button element */
 		`}
 	padding: ${pxToRem(12)};
+	${marginProps}
 
 	font-size: ${p => p.theme.globals.typeScale.m};
 	font-weight: 600;
@@ -230,6 +233,7 @@ function ButtonWithRef(props, ref) {
 
 	return (
 		<Wrapper
+			position="relative"
 			forwardedAs={as}
 			buttonRef={ref}
 			aria-label={props['aria-label'] || title}

src/Flex/index.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-import {spacingProps} from '../styleProps';
+import {marginProps, paddingProps} from '../styleProps';
 import {alignMap} from '../styleProps/flexProps';
 
 import Box from '../Box';
@@ -26,7 +26,8 @@ const Flex = styled.div`
 
 	align-items: ${p => alignMap[p.alignItems] || p.alignItems};
 
-	${spacingProps}
+	${marginProps}
+	${paddingProps}
 `;
 
 Flex.defaultProps = {

src/InlineList/index.js

@@ -11,7 +11,6 @@ const Wrapper = styled.ul`
 	list-style: none;
 	margin: 0;
     padding: 0;
-	margin-left: 0;
 
 	${p =>
 		p.spacing &&

src/Text/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import {textProps, spacingProps} from '../styleProps';
+import {textProps, marginProps, paddingProps} from '../styleProps';
 
 const Text = styled.span`
 	${props =>
@@ -10,7 +10,8 @@ const Text = styled.span`
 			textAlign: props.align,
 			fontSize: props.size,
 		})}
-	${spacingProps}
+	${marginProps}
+	${paddingProps}
 `;
 
 Text.propTypes = {

src/TextLink/index.js

@@ -1,6 +1,8 @@
 import React, {forwardRef} from 'react';
 import styled, {css} from 'styled-components';
 
+import {positionProps, marginProps} from '../styleProps';
+
 import ButtonCore from '../ButtonCore';
 
 const textLinkStyles = css`
@@ -31,8 +33,10 @@ const textLinkStyles = css`
 const Wrapper = styled(({linkRef, bold, stealthy, ...otherProps}) => (
 	<ButtonCore ref={linkRef} {...otherProps} />
 ))`
+	${positionProps}
 	display: inline;
 	vertical-align: baseline;
+	${marginProps}
 
 	${textLinkStyles}
 `;

src/styleProps/index.js

@@ -1,7 +1,15 @@
 import borderProps from './borderProps';
 import flexProps from './flexProps';
+import paddingProps from './paddingProps';
 import positionProps from './positionProps';
-import spacingProps from './spacingProps';
+import marginProps from './marginProps';
 import textProps from './textProps';
 
-export {borderProps, flexProps, positionProps, spacingProps, textProps};
+export {
+	borderProps,
+	flexProps,
+	paddingProps,
+	positionProps,
+	marginProps,
+	textProps,
+};

src/styleProps/marginProps.js

@@ -0,0 +1,34 @@
+import {getSpacing} from '../utils/spacing';
+import {checkTheme} from '../utils/theme';
+
+function marginProps(props) {
+	const {m, mx, my, mt, mr, mb, ml, theme} = props;
+
+	checkTheme(theme);
+
+	return {
+		margin: m ? getSpacing(m, theme) : undefined,
+		marginTop: my
+			? getSpacing(my, theme)
+			: mt
+			? getSpacing(mt, theme)
+			: undefined,
+		marginRight: mx
+			? getSpacing(mx, theme)
+			: mr
+			? getSpacing(mr, theme)
+			: undefined,
+		marginBottom: my
+			? getSpacing(my, theme)
+			: mb
+			? getSpacing(mb, theme)
+			: undefined,
+		marginLeft: mx
+			? getSpacing(mx, theme)
+			: ml
+			? getSpacing(ml, theme)
+			: undefined,
+	};
+}
+
+export default marginProps;

src/styleProps/paddingProps.js

@@ -0,0 +1,34 @@
+import {getSpacing} from '../utils/spacing';
+import {checkTheme} from '../utils/theme';
+
+function paddingProps(props) {
+	const {p, px, py, pt, pr, pb, pl, theme} = props;
+
+	checkTheme(theme);
+
+	return {
+		padding: p ? getSpacing(p, theme) : undefined,
+		paddingTop: py
+			? getSpacing(py, theme)
+			: pt
+			? getSpacing(pt, theme)
+			: undefined,
+		paddingRight: px
+			? getSpacing(px, theme)
+			: pr
+			? getSpacing(pr, theme)
+			: undefined,
+		paddingBottom: py
+			? getSpacing(py, theme)
+			: pb
+			? getSpacing(pb, theme)
+			: undefined,
+		paddingLeft: px
+			? getSpacing(px, theme)
+			: pl
+			? getSpacing(pl, theme)
+			: undefined,
+	};
+}
+
+export default paddingProps;