From f6fc4976b49f7659eb170ba29e9cbee8add0d9d1 Mon Sep 17 00:00:00 2001
From: Pedro Duarte <contact@peduarte.com>
Date: Fri, 3 May 2019 01:05:05 +0100
Subject: [PATCH] Add missing props to Margin and Padding (#35158)

---
 types/styled-system/index.d.ts              |  4 +--
 types/styled-system/styled-system-tests.tsx | 30 ++++++++++++++++++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index b8b13c7261..e14185d996 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -127,7 +127,7 @@ export interface SpaceProps<TLength = TLengthStyledSystem> {
 
 export const space: styleFn;
 
-export interface MarginProps extends Pick<SpaceProps, 'm' | 'margin' | 'mt' | 'marginTop' | 'mb' | 'marginBottom' | 'ml' | 'marginLeft' | 'mr' | 'marginRight'> {}
+export interface MarginProps extends Pick<SpaceProps, 'm' | 'margin' | 'mt' | 'marginTop' | 'mb' | 'marginBottom' | 'ml' | 'marginLeft' | 'mr' | 'marginRight' | 'my' | 'mx'> {}
 export interface MarginTopProps extends Pick<SpaceProps, 'mt' | 'marginTop'> {}
 export interface MarginBottomProps extends Pick<SpaceProps, 'mb' | 'marginBottom'> {}
 export interface MarginLeftProps extends Pick<SpaceProps, 'ml' | 'marginLeft'> {}
@@ -139,7 +139,7 @@ export const marginBottom: styleFn;
 export const marginLeft: styleFn;
 export const marginRight: styleFn;
 
-export interface PaddingProps extends Pick<SpaceProps, 'p' | 'padding' | 'pt' | 'paddingTop' | 'pb' | 'paddingBottom' | 'pl' | 'paddingLeft' | 'pr' | 'paddingRight'> {}
+export interface PaddingProps extends Pick<SpaceProps, 'p' | 'padding' | 'pt' | 'paddingTop' | 'pb' | 'paddingBottom' | 'pl' | 'paddingLeft' | 'pr' | 'paddingRight' | 'py' | 'px'> {}
 export interface PaddingTopProps extends Pick<SpaceProps, 'pt' | 'paddingTop'> {}
 export interface PaddingBottomProps extends Pick<SpaceProps, 'pb' | 'paddingBottom'> {}
 export interface PaddingLeftProps extends Pick<SpaceProps, 'pl' | 'paddingLeft'> {}
diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx
index 4d74adb952..b5ec71ae53 100644
--- a/types/styled-system/styled-system-tests.tsx
+++ b/types/styled-system/styled-system-tests.tsx
@@ -73,8 +73,8 @@ import {
     GridRowGapProps,
     GridRowProps,
     gridTemplateColumns,
-    gridTemplateRows,
     GridTemplateColumnsProps,
+    gridTemplateRows,
     GridTemplateRowsProps,
     height,
     HeightProps,
@@ -90,6 +90,8 @@ import {
     LetterSpacingProps,
     lineHeight,
     LineHeightProps,
+    margin,
+    MarginProps,
     maxHeight,
     MaxHeightProps,
     maxWidth,
@@ -98,6 +100,8 @@ import {
     MinHeightProps,
     minWidth,
     MinWidthProps,
+    padding,
+    PaddingProps,
     position,
     PositionProps,
     right,
@@ -290,6 +294,15 @@ const TestButton: React.ComponentType<ButtonProps> = styled`
     ${styles.textColor}
 `;
 
+interface SpacerProps
+    extends MarginProps,
+        PaddingProps {}
+
+const Spacer: React.ComponentType<SpacerProps> = styled`
+    ${margin};
+    ${padding};
+`;
+
 const test = () => (
     <div>
         // width: 50%
@@ -546,6 +559,19 @@ const test = () => (
         <Box borderLeft={["1px solid red", "2px solid red"]} />
 
         <TestButton variant="primary" m={2} color="tomato" />
+
+        <Spacer m={[1, 2, 3]} p={[1, 2, 3]} />
+        <Spacer ml={[1, 2, 3]} pl={[1, 2, 3]} />
+        <Spacer mr={[1, 2, 3]} pr={[1, 2, 3]} />
+        <Spacer mt={[1, 2, 3]} pt={[1, 2, 3]} />
+        <Spacer mb={[1, 2, 3]} pb={[1, 2, 3]} />
+        <Spacer mx={[1, 2, 3]} px={[1, 2, 3]} />
+        <Spacer my={[1, 2, 3]} py={[1, 2, 3]} />
+        <Spacer margin={[1, 2, 3]} padding={[1, 2, 3]} />
+        <Spacer marginLeft={[1, 2, 3]} paddingLeft={[1, 2, 3]} />
+        <Spacer marginRight={[1, 2, 3]} paddingRight={[1, 2, 3]} />
+        <Spacer marginTop={[1, 2, 3]} paddingTop={[1, 2, 3]} />
+        <Spacer marginBottom={[1, 2, 3]} paddingBottom={[1, 2, 3]} />
     </div>
 );
 
@@ -678,10 +704,12 @@ export const justifySelfPropTypes = justifySelf.propTypes;
 export const leftPropTypes = left.propTypes;
 export const letterSpacingPropTypes = letterSpacing.propTypes;
 export const lineHeightPropTypes = lineHeight.propTypes;
+export const marginPropTypes = margin.propTypes;
 export const maxHeightPropTypes = maxHeight.propTypes;
 export const maxWidthPropTypes = maxWidth.propTypes;
 export const minHeightPropTypes = minHeight.propTypes;
 export const minWidthPropTypes = minWidth.propTypes;
+export const paddingPropTypes = padding.propTypes;
 export const positionPropTypes = position.propTypes;
 export const rightPropTypes = right.propTypes;
 export const sizePropTypes = size.propTypes;