Merge pull request #26755 from maoueh/feature/styled-system-grid

[styled-system] Added missing grid functions, props & values

types/styled-system/index.d.ts

@@ -5,6 +5,7 @@
 //                 Justin Bennett <https://github.com/zephraph>
 //                 Christopher Pappas <https://github.com/damassi>
 //                 Eloy Durán <https://github.com/alloy>
+//                 Matthieu Vachon <https://github.com/maoueh>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.6
 
@@ -409,7 +410,76 @@ export function flexBasis(...args: any[]): any;
  * Grid Layout
  */
 
-// TODO: Add grid values
+export type GridGapValue = number | string;
+export type ResponsiveGridGapValue = ResponsiveValue<GridGapValue>;
+
+export interface GridGapProps {
+    gridGap?: ResponsiveGridGapValue;
+}
+
+export function gridGap(...args: any[]): any;
+
+export interface GridRowGapProps {
+    gridRowGap?: ResponsiveGridGapValue;
+}
+
+export function gridRowGap(...args: any[]): any;
+
+export interface GridColumnGapProps {
+    gridColumnGap?: ResponsiveGridGapValue;
+}
+
+export function gridColumnGap(...args: any[]): any;
+
+export type GridCellValue = string;
+export type ResponsiveGridCellValue = ResponsiveValue<GridCellValue>;
+
+export interface GridColumnProps {
+    gridColumn?: ResponsiveGridCellValue;
+}
+
+export function gridColumn(...args: any[]): any;
+
+export interface GridRowProps {
+    gridRow?: ResponsiveGridCellValue;
+}
+
+export function gridRow(...args: any[]): any;
+
+export type GridAutoValue = string;
+
+export interface GridAutoFlowProps {
+    gridAutoFlow?: GridAutoValue;
+}
+
+export function gridAutoFlow(...args: any[]): any;
+
+export interface GridAutoRowsProps {
+    gridAutoRows?: GridAutoValue;
+}
+
+export function gridAutoRows(...args: any[]): any;
+
+export interface GridAutoColumnsProps {
+    gridAutoColumns?: GridAutoValue;
+}
+
+export function gridAutoColumns(...args: any[]): any;
+
+export type GridTemplateValue = string;
+export type ResponsiveGridTemplateValue = ResponsiveValue<GridTemplateValue>;
+
+export interface GridTemplatesRowsProps {
+    gridTemplateRows?: ResponsiveGridTemplateValue;
+}
+
+export function gridTemplateRows(...args: any[]): any;
+
+export interface GridTemplatesColumnsProps {
+    gridTemplateColumns?: ResponsiveGridTemplateValue;
+}
+
+export function gridTemplateColumns(...args: any[]): any;
 
 /**
  * Background

types/styled-system/styled-system-tests.tsx

@@ -92,7 +92,27 @@ import {
     active,
     ActiveProps,
     disabled,
-    DisabledProps
+    DisabledProps,
+    GridGapProps,
+    GridRowGapProps,
+    GridColumnGapProps,
+    GridRowProps,
+    GridColumnProps,
+    gridGap,
+    gridRowGap,
+    gridColumnGap,
+    gridRow,
+    gridColumn,
+    GridAutoFlowProps,
+    GridAutoColumnsProps,
+    GridAutoRowsProps,
+    GridTemplatesRowsProps,
+    GridTemplatesColumnsProps,
+    gridAutoFlow,
+    gridAutoRows,
+    gridAutoColumns,
+    gridTemplateColumns,
+    gridTemplateRows
 } from "styled-system";
 
 interface BoxProps
@@ -201,6 +221,30 @@ const Flex = styled.div.attrs<FlexComponentProps>({})`
     ${flexDirection};
 `;
 
+interface GridComponentProps
+    extends GridGapProps,
+        GridRowGapProps,
+        GridColumnGapProps,
+        GridRowProps,
+        GridColumnProps,
+        GridAutoFlowProps,
+        GridAutoColumnsProps,
+        GridAutoRowsProps,
+        GridTemplatesRowsProps,
+        GridTemplatesColumnsProps {}
+const Grid = styled.div.attrs<GridComponentProps>({})`
+    ${gridGap};
+    ${gridRowGap};
+    ${gridColumnGap};
+    ${gridRow};
+    ${gridColumn};
+    ${gridAutoFlow};
+    ${gridAutoRows};
+    ${gridAutoColumns};
+    ${gridTemplateRows};
+    ${gridTemplateColumns};
+`;
+
 const test = () => (
     <div>
         // width: 50%
@@ -309,6 +353,34 @@ const test = () => (
         <Flex flexBasis="auto" />
         // flexDirection (responsive)
         <Flex flexDirection="column" />
+        // gridGap
+        <Grid gridGap="1px" />
+        <Grid gridGap={["1", "2"]} />
+        // gridRowGap
+        <Grid gridRowGap="1px" />
+        <Grid gridRowGap={["1", "2"]} />
+        // gridColumnGap
+        <Grid gridColumnGap="1px" />
+        <Grid gridColumnGap={["1", "2"]} />
+        // gridRow
+        <Grid gridRow="auto" />
+        // gridColumn
+        <Grid gridColumn="auto" />
+        // gridAutoFlow
+        <Grid gridAutoFlow="auto" />
+        <Grid gridAutoFlow={["auto", "1fr"]} />
+        // gridAutoRows
+        <Grid gridAutoRows="auto" />
+        <Grid gridAutoRows={["auto", "1fr"]} />
+        // gridAutoColumns
+        <Grid gridAutoColumns="auto" />
+        <Grid gridAutoColumns={["auto", "1fr"]} />
+        // gridTemplateRows
+        <Grid gridTemplateRows="auto" />
+        <Grid gridTemplateRows={["auto", "1fr"]} />
+        // gridTemplateColumns
+        <Grid gridTemplateColumns="auto" />
+        <Grid gridTemplateColumns={["auto", "1fr"]} />
         // flex (responsive)
         <Box flex="1 1 auto" />
         // justifySelf (responsive)