From 6789a2961f7ff601373c19e6c052e67590c79f17 Mon Sep 17 00:00:00 2001
From: Eliseu Monar dos Santos <eliseumds@gmail.com>
Date: Fri, 16 Aug 2019 09:09:42 +1000
Subject: [PATCH] styled-system: Add individual border and overflow props
 (#37573)

* Add overflowX and overflowY properties

Add @eliseumds as contributor to styled-system

* Add individual border props to styled-system

* styled-system: bump up the version to 5.1
---
 types/styled-system/index.d.ts              | 113 +++++++++++++++++++-
 types/styled-system/styled-system-tests.tsx |  52 +++++++--
 2 files changed, 156 insertions(+), 9 deletions(-)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index 3492bb0431..368694e6f3 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for styled-system 5.0
+// Type definitions for styled-system 5.1
 // Project: https://github.com/jxnblk/styled-system#readme
 // Definitions by: Marshall Bowers <https://github.com/maxdeviant>
 //                 Ben McCormick <https://github.com/phobon>
@@ -15,6 +15,7 @@
 //                 Dhalton Huber <https://github.com/Dhalton>
 //                 Elliot Bonneville <https://github.com/elliotbonneville>
 //                 Jack Caldwell <https://github.com/jackcaldwell>
+//                 Eliseu Monar dos Santos <https://github.com/eliseumds>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -860,6 +861,30 @@ export interface BorderWidthProps<TLength = TLengthStyledSystem> {
      * [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)
      */
     borderWidth?: ResponsiveValue<CSS.BorderWidthProperty<TLength>>;
+    /**
+     * The border-top-width CSS property sets the width of the top border of an element.
+     *
+     * [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width)
+     */
+    borderTopWidth?: ResponsiveValue<CSS.BorderTopWidthProperty<TLength>>;
+    /**
+     * The border-bottom-width CSS property sets the width of the bottom border of an element.
+     *
+     * [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width)
+     */
+    borderBottomWidth?: ResponsiveValue<CSS.BorderBottomWidthProperty<TLength>>;
+    /**
+     * The border-left-width CSS property sets the width of the left border of an element.
+     *
+     * [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width)
+     */
+    borderLeftWidth?: ResponsiveValue<CSS.BorderLeftWidthProperty<TLength>>;
+    /**
+     * The border-right-width CSS property sets the width of the right border of an element.
+     *
+     * [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width)
+     */
+    borderRightWidth?: ResponsiveValue<CSS.BorderRightWidthProperty<TLength>>;
 }
 
 export const borderWidth: styleFn;
@@ -871,6 +896,30 @@ export interface BorderStyleProps {
      * [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)
      */
     borderStyle?: ResponsiveValue<CSS.BorderStyleProperty>;
+    /**
+     * The border-top-style CSS property sets the line style of an element's top border.
+     *
+     * [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style)
+     */
+    borderTopStyle?: ResponsiveValue<CSS.BorderTopStyleProperty>;
+    /**
+     * The border-bottom-style CSS property sets the line style of an element's bottom border.
+     *
+     * [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style)
+     */
+    borderBottomStyle?: ResponsiveValue<CSS.BorderBottomStyleProperty>;
+    /**
+     * The border-left-style CSS property sets the line style of an element's left border.
+     *
+     * [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style)
+     */
+    borderLeftStyle?: ResponsiveValue<CSS.BorderLeftStyleProperty>;
+    /**
+     * The border-right-style CSS property sets the line style of an element's right border.
+     *
+     * [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style)
+     */
+    borderRightStyle?: ResponsiveValue<CSS.BorderRightStyleProperty>;
 }
 
 export const borderStyle: styleFn;
@@ -882,6 +931,30 @@ export interface BorderColorProps {
      * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
      */
     borderColor?: ResponsiveValue<CSS.BorderColorProperty>;
+    /**
+     * The border-top-color CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties border-color or border-top.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
+     */
+    borderTopColor?: ResponsiveValue<CSS.BorderTopColorProperty>;
+    /**
+     * The border-bottom-color CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
+     */
+    borderBottomColor?: ResponsiveValue<CSS.BorderBottomColorProperty>;
+    /**
+     * The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties border-color or border-left.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
+     */
+    borderLeftColor?: ResponsiveValue<CSS.BorderLeftColorProperty>;
+    /**
+     * The border-right-color CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties border-color or border-right.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
+     */
+    borderRightColor?: ResponsiveValue<CSS.BorderRightColorProperty>;
 }
 
 export const borderColor: styleFn;
@@ -942,6 +1015,30 @@ export interface BorderRadiusProps<TLength = TLengthStyledSystem> {
      * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
      */
     borderRadius?: ResponsiveValue<CSS.BorderRadiusProperty<TLength>>;
+    /**
+     * The border-top-left-radius CSS property rounds the top-left corner of an element.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius)
+     */
+    borderTopLeftRadius?: ResponsiveValue<CSS.BorderTopLeftRadiusProperty<TLength>>;
+    /**
+     * The border-top-right-radius CSS property rounds the top-right corner of an element.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius)
+     */
+    borderTopRightRadius?: ResponsiveValue<CSS.BorderTopRightRadiusProperty<TLength>>;
+    /**
+     * The border-bottom-left-radius CSS property rounds the bottom-left corner of an element.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius)
+     */
+    borderBottomLeftRadius?: ResponsiveValue<CSS.BorderBottomLeftRadiusProperty<TLength>>;
+    /**
+     * The border-bottom-right-radius CSS property rounds the bottom-right corner of an element.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius)
+     */
+    borderBottomRightRadius?: ResponsiveValue<CSS.BorderBottomRightRadiusProperty<TLength>>;
 }
 
 export const borderRadius: styleFn;
@@ -1030,6 +1127,20 @@ export interface OverflowProps {
      * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
      */
     overflow?: ResponsiveValue<CSS.OverflowProperty>;
+    /**
+     * The overflow-x CSS property sets what shows when content overflows a block-level element's left
+     * and right edges. This may be nothing, a scroll bar, or the overflow content.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x)
+     */
+    overflowX?: ResponsiveValue<CSS.OverflowXProperty>;
+    /**
+     * The overflow-y CSS property sets what shows when content overflows a block-level element's top
+     * and bottom edges. This may be nothing, a scroll bar, or the overflow content.
+     *
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y)
+     */
+    overflowY?: ResponsiveValue<CSS.OverflowYProperty>;
 }
 
 export const overflow: styleFn;
diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx
index 5afb51f6be..3d65962b58 100644
--- a/types/styled-system/styled-system-tests.tsx
+++ b/types/styled-system/styled-system-tests.tsx
@@ -38,6 +38,8 @@ import {
     GridProps,
     shadow,
     ShadowProps,
+    overflow,
+    OverflowProps,
 } from 'styled-system';
 
 // tslint:disable-next-line:strict-export-declare-modifiers
@@ -59,7 +61,8 @@ interface BoxProps
         ShadowProps,
         TypographyProps,
         ColorStyleProps,
-        ColorProps {
+        ColorProps,
+        OverflowProps {
     boxStyle?: string;
 }
 
@@ -77,7 +80,8 @@ const boxStyles = compose(
     position,
     shadow,
     colorStyle,
-    boxStyle
+    boxStyle,
+    overflow,
 );
 
 const Box: React.ComponentType<BoxProps> = styled(boxStyles);
@@ -324,15 +328,43 @@ const test = () => (
         <Box alignSelf="center" />
         <Box alignSelf={['center']} />
         <Box alignSelf={{ sm: 'center' }} />
+
         <Box border="1px solid" />
-        <Box borderTop="1px solid" />
-        <Box borderRight="1px solid" />
-        <Box borderBottom="1px solid" />
-        <Box borderLeft="1px solid" />
-        // borderColor
+        <Box border={{ sm: '1px solid' }} />
+        <Box borderWidth={15} />
+        <Box borderWidth="10px" />
+        <Box borderWidth={{ sm: 15}} />
         <Box borderColor="blue" />
-        // borderRadius
+        <Box borderColor={{ sm: 'blue' }} />
         <Box borderRadius={4} />
+        <Box borderRadius="1rem" />
+        <Box borderRadius={{ sm: 4 }} />
+        <Box borderTopLeftRadius={4} />
+        <Box borderTopLeftRadius={4} />
+        <Box borderTopRightRadius={{ sm: 5, md: '10px' }} />
+        <Box borderBottomLeftRadius="250px 100px" />
+        <Box borderBottomRightRadius="50%" />
+
+        <Box borderTop="1px solid" />
+        <Box borderTopStyle="dashed" />
+        <Box borderTopWidth="10rem" />
+        <Box borderTopColor="transparent" />
+
+        <Box borderRight="1px solid" />
+        <Box borderRightStyle={{ sm: 'none' }} />
+        <Box borderRightWidth={{ sm: 5, md: 10 }} />
+        <Box borderRightColor={{ sm: 'blue', md: 'green' }} />
+
+        <Box borderBottom="1px solid" />
+        <Box borderBottomStyle="solid" />
+        <Box borderBottomWidth={3} />
+        <Box borderBottomColor="#09c" />
+
+        <Box borderLeft="1px solid" />
+        <Box borderLeftStyle="inset" />
+        <Box borderLeftWidth="10px" />
+        <Box borderLeftColor="rgba(0,0,0,0.25)" />
+
         // position (responsive)
         <Box position="absolute" />
         <Box position={['absolute']} />
@@ -383,6 +415,10 @@ 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]} />
+        // overflow
+        <Box overflow="hidden" />
+        <Box overflowX="auto" />
+        <Box overflowY="scroll" />
     </div>
 );