From 67ab83d47896d8db5ec2e75487390c2876b07801 Mon Sep 17 00:00:00 2001
From: Jeffrey Cherewaty <jeffrey@cherewaty.com>
Date: Mon, 2 Mar 2020 16:57:05 -0600
Subject: [PATCH] [styled-system] Add missing margin and padding properties
 (#42766)

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

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index 22d544bbba..519109b38e 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -19,6 +19,7 @@
 //                 Nicholas Hehr <https://github.com/HipsterBrown>
 //                 Hammad Jutt <https://github.com/hammadj>
 //                 Dhruv Jain <https://github.com/maddhruv>
+//                 Jeffrey Cherewaty <https://github.com/cherewaty>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.9
 
@@ -229,7 +230,9 @@ export interface MarginProps<ThemeType extends Theme = RequiredTheme>
     | 'mr'
     | 'marginRight'
     | 'my'
-    | 'mx'> {
+    | 'marginY'
+    | 'mx'
+    | 'marginX'> {
 }
 
 export interface MarginTopProps<ThemeType extends Theme = RequiredTheme> extends Pick<SpaceProps<ThemeType>, 'mt' | 'marginTop'> {
@@ -263,7 +266,9 @@ export interface PaddingProps<ThemeType extends Theme = RequiredTheme>
     | 'pr'
     | 'paddingRight'
     | 'py'
-    | 'px'> {
+    | 'paddingY'
+    | 'px'
+    | 'paddingX'> {
 }
 
 export interface PaddingTopProps<ThemeType extends Theme = RequiredTheme> extends Pick<SpaceProps<ThemeType>, 'pt' | 'paddingTop'> {
diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx
index df217ea04a..1ac77cea3f 100644
--- a/types/styled-system/styled-system-tests.tsx
+++ b/types/styled-system/styled-system-tests.tsx
@@ -409,6 +409,8 @@ const test = () => (
         <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]} />
+        <Spacer marginX={[1, 2, 3]} paddingX={[1, 2, 3]} />
+        <Spacer marginY={[1, 2, 3]} paddingY={[1, 2, 3]} />
         // overflow
         <Box overflow="hidden" />
         <Box overflowX="auto" />