[styled-system] Add missing margin and padding properties (#42766)

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'> {

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" />