From 19639a0aafaa514627032fa011c1d824242a7272 Mon Sep 17 00:00:00 2001
From: Dhalton <39279144+Dhalton@users.noreply.github.com>
Date: Tue, 21 May 2019 02:49:29 -0700
Subject: [PATCH] [styled-system] Make N a generic on style and add typedef for
 scale (#35556)

* Add generic for N and typedef for scale

* Make style scale generic with a default
---
 types/styled-system/index.d.ts              | 21 ++++++++++++---------
 types/styled-system/styled-system-tests.tsx | 18 ++++++++++++++++++
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index a7f0fc8f06..98c4e625a1 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -36,17 +36,20 @@ export interface styleFn {
     propTypes?: string[];
 }
 
-export interface LowLevelStylefunctionArguments {
-    prop: string;
-    cssProperty?: string;
-    alias?: string;
-    key?: string;
-    transformValue?: (n: string | number, scale: Array<string | number>) => any;
-    scale?: Array<string | number>;
+export type Scale = object | Array<string | number>;
+
+export interface LowLevelStylefunctionArguments<N, S> {
+  prop: string;
+  cssProperty?: string;
+  alias?: string;
+  key?: string;
+  transformValue?: (n: N, scale?: S) => any;
+  scale?: S;
 }
 
-export function style(
-    args: LowLevelStylefunctionArguments
+export function style<N = string | number, S = Scale>(
+  // tslint:disable-next-line no-unnecessary-generics
+  args: LowLevelStylefunctionArguments<N, S>
 ): { [cssProp: string]: string };
 
 export function compose(
diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx
index 0dd95ffe1e..a68fe31e27 100644
--- a/types/styled-system/styled-system-tests.tsx
+++ b/types/styled-system/styled-system-tests.tsx
@@ -694,6 +694,24 @@ const customFontSize = style({
     scale: [8, 16, 32]
 });
 
+const centerWithGenerics = style<boolean>({
+    prop: 'center',
+    cssProperty: 'justify-content',
+    transformValue: shouldCenter => shouldCenter ? 'center' : 'flex-start'
+});
+
+const buttonSizes = {
+    sm: '8px',
+    md: '12px',
+    lg: '24px',
+};
+
+const buttonSizeWithGeneric = style<keyof typeof buttonSizes, typeof buttonSizes>({
+    prop: 'size',
+    cssProperty: 'font-size',
+    transformValue: (size, sizes) => sizes && sizes[size]
+});
+
 // All Style Functions contain `propTypes`
 export const alignContentPropTypes = alignContent.propTypes;
 export const alignItemsPropTypes = alignItems.propTypes;