From 19fee9984bf196930acbf96461d3c1234173bf3a Mon Sep 17 00:00:00 2001
From: David Edmondson <threehams@gmail.com>
Date: Sat, 16 Mar 2019 14:15:24 -0700
Subject: [PATCH] Add longhand padding/margin types.

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

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index ec7686ab89..b91f9c1707 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for styled-system 3.2
+// Type definitions for styled-system 4.0
 // Project: https://github.com/jxnblk/styled-system#readme
 // Definitions by: Marshall Bowers <https://github.com/maxdeviant>
 //                 Ben McCormick <https://github.com/phobon>
@@ -51,7 +51,7 @@ export type TLengthStyledSystem = string | 0 | number;
 export type ResponsiveValue<T> = T | Array<T | null> | { [key: string]: T };
 
 /**
- * Converts shorthand margin and padding props to margin and padding CSS declarations
+ * Converts shorthand or longhand margin and padding props to margin and padding CSS declarations
  *
  * - Numbers from 0-4 (or the length of theme.space) are converted to values on the spacing scale.
  * - Negative values can be used for negative margins.
@@ -59,32 +59,51 @@ export type ResponsiveValue<T> = T | Array<T | null> | { [key: string]: T };
  * - String values are passed as raw CSS values.
  * - Array values are converted into responsive values.
  */
-
 export interface SpaceProps<TLength = TLengthStyledSystem> {
     /** Margin on top, left, bottom and right */
     m?: ResponsiveValue<CSS.MarginProperty<TLength>>;
+    /** Margin on top, left, bottom and right */
+    margin?: ResponsiveValue<CSS.MarginProperty<TLength>>;
     /** Margin for the top */
     mt?: ResponsiveValue<CSS.MarginTopProperty<TLength>>;
+    /** Margin for the top */
+    marginTop?: ResponsiveValue<CSS.MarginTopProperty<TLength>>;
     /** Margin for the right */
     mr?: ResponsiveValue<CSS.MarginRightProperty<TLength>>;
+    /** Margin for the right */
+    marginRight?: ResponsiveValue<CSS.MarginRightProperty<TLength>>;
     /** Margin for the bottom */
     mb?: ResponsiveValue<CSS.MarginBottomProperty<TLength>>;
+    /** Margin for the bottom */
+    marginBottom?: ResponsiveValue<CSS.MarginBottomProperty<TLength>>;
     /** Margin for the left */
     ml?: ResponsiveValue<CSS.MarginLeftProperty<TLength>>;
+    /** Margin for the left */
+    marginLeft?: ResponsiveValue<CSS.MarginLeftProperty<TLength>>;
     /** Margin for the left and right */
     mx?: ResponsiveValue<CSS.PaddingProperty<TLength>>;
     /** Margin for the top and bottom */
     my?: ResponsiveValue<CSS.PaddingProperty<TLength>>;
     /** Padding on top, left, bottom and right */
     p?: ResponsiveValue<CSS.PaddingProperty<TLength>>;
+    /** Padding on top, left, bottom and right */
+    padding?: ResponsiveValue<CSS.PaddingProperty<TLength>>;
     /** Padding for the top */
     pt?: ResponsiveValue<CSS.PaddingTopProperty<TLength>>;
+    /** Padding for the top */
+    paddingTop?: ResponsiveValue<CSS.PaddingTopProperty<TLength>>;
     /** Padding for the right */
     pr?: ResponsiveValue<CSS.PaddingRightProperty<TLength>>;
+    /** Padding for the right */
+    paddingRight?: ResponsiveValue<CSS.PaddingRightProperty<TLength>>;
     /** Padding for the bottom */
     pb?: ResponsiveValue<CSS.PaddingBottomProperty<TLength>>;
+    /** Padding for the bottom */
+    paddingBottom?: ResponsiveValue<CSS.PaddingBottomProperty<TLength>>;
     /** Padding for the left */
     pl?: ResponsiveValue<CSS.PaddingLeftProperty<TLength>>;
+    /** Padding for the left */
+    paddingLeft?: ResponsiveValue<CSS.PaddingLeftProperty<TLength>>;
     /** Padding for the left and right */
     px?: ResponsiveValue<CSS.PaddingProperty<TLength>>;
     /** Padding for the top and bottom */
diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx
index ae2f87b7ab..c99a15c8f2 100644
--- a/types/styled-system/styled-system-tests.tsx
+++ b/types/styled-system/styled-system-tests.tsx
@@ -328,8 +328,30 @@ const test = () => (
         <Box fontSize={{ sm: 2, md: 3, lg: 4 }} />
         // responsive margin
         <Box m={[1, 2, 3]} />
+        <Box ml={[1, 2, 3]} />
+        <Box mr={[1, 2, 3]} />
+        <Box mt={[1, 2, 3]} />
+        <Box mb={[1, 2, 3]} />
+        <Box mx={[1, 2, 3]} />
+        <Box my={[1, 2, 3]} />
+        <Box margin={[1, 2, 3]} />
+        <Box marginLeft={[1, 2, 3]} />
+        <Box marginRight={[1, 2, 3]} />
+        <Box marginTop={[1, 2, 3]} />
+        <Box marginBottom={[1, 2, 3]} />
         // responsive padding
         <Box p={[1, 2, 3]} />
+        <Box pl={[1, 2, 3]} />
+        <Box pr={[1, 2, 3]} />
+        <Box pt={[1, 2, 3]} />
+        <Box pb={[1, 2, 3]} />
+        <Box px={[1, 2, 3]} />
+        <Box py={[1, 2, 3]} />
+        <Box padding={[1, 2, 3]} />
+        <Box paddingLeft={[1, 2, 3]} />
+        <Box paddingRight={[1, 2, 3]} />
+        <Box paddingTop={[1, 2, 3]} />
+        <Box paddingBottom={[1, 2, 3]} />
         <Box p={{ sm: 1, md: 2, lg: 3 }} />
         // examples (margin prop) // sets margin value of `theme.space[2]`
         <Box m={2} />