From 0bebd2fe6133dc260ec03af75963fb90ae118190 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Sat, 8 Jun 2019 20:44:00 +0200
Subject: [PATCH 1/6] [styles] Fix styled types not including properties

---
 packages/material-ui-styles/src/styled/styled.d.ts | 8 +++++++-
 packages/material-ui-styles/test/index.spec.tsx    | 5 ++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui-styles/src/styled/styled.d.ts b/packages/material-ui-styles/src/styled/styled.d.ts
index c0be94321bc2e0..c72ea8f26236e2 100644
--- a/packages/material-ui-styles/src/styled/styled.d.ts
+++ b/packages/material-ui-styles/src/styled/styled.d.ts
@@ -6,6 +6,12 @@ import {
 } from '@material-ui/styles/withStyles';
 import * as React from 'react';
 
+/**
+ * If props is any, returns empty object, otherwise T
+ * @internal
+ */
+export type GetProps<T> = 0 extends 1 & T ? {} : T;
+
 /**
  * @internal
  */
@@ -19,7 +25,7 @@ export type ComponentCreator<Component extends React.ElementType> = <Theme, Prop
     JSX.LibraryManagedAttributes<Component, React.ComponentProps<Component>>,
     'classes' | 'className'
   > &
-    StyledComponentProps<'root'> & { className?: string }
+    StyledComponentProps<'root'> & { className?: string } & GetProps<Props>
 >;
 
 export interface StyledProps {
diff --git a/packages/material-ui-styles/test/index.spec.tsx b/packages/material-ui-styles/test/index.spec.tsx
index ea8da26240aa04..45b9084b3a9bc1 100644
--- a/packages/material-ui-styles/test/index.spec.tsx
+++ b/packages/material-ui-styles/test/index.spec.tsx
@@ -155,6 +155,9 @@ import styled, { StyledProps } from '@material-ui/styles/styled';
   interface MyTheme {
     fontFamily: string;
   }
+  const MyThemeInstance: MyTheme = {
+    fontFamily: 'monospace',
+  };
   // tslint:disable-next-line: no-empty-interface
   interface MyComponentProps extends StyledProps {
     defaulted: string;
@@ -176,7 +179,7 @@ import styled, { StyledProps } from '@material-ui/styles/styled';
   const renderedMyComponent = (
     <>
       <MyComponent className="test" />
-      <StyledMyComponent />
+      <StyledMyComponent theme={MyThemeInstance} />
     </>
   );
 }

From adcca3d64686c722a7cd04282c213850d5464e2e Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Sat, 8 Jun 2019 20:44:10 +0200
Subject: [PATCH 2/6] Restore JSS.tsx demo

---
 docs/src/pages/system/basics/JSS.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 docs/src/pages/system/basics/JSS.tsx

diff --git a/docs/src/pages/system/basics/JSS.tsx b/docs/src/pages/system/basics/JSS.tsx
new file mode 100644
index 00000000000000..3b73efdba2c754
--- /dev/null
+++ b/docs/src/pages/system/basics/JSS.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { styled } from '@material-ui/styles';
+import { compose, spacing, palette } from '@material-ui/system';
+
+const Box = styled('div')(
+  compose(
+    spacing,
+    palette,
+  ),
+);
+
+function JSS() {
+  return (
+    <Box color="white" bgcolor="palevioletred" p={1}>
+      JSS
+    </Box>
+  );
+}
+
+export default JSS;

From 06ea15d5a76a822f4ef5228b0542b089716aef93 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Sat, 8 Jun 2019 21:36:01 +0200
Subject: [PATCH 3/6] Rename and move to types

---
 .../material-ui-styles/src/makeStyles/makeStyles.d.ts |  4 +---
 packages/material-ui-styles/src/styled/styled.d.ts    | 10 ++--------
 packages/material-ui-types/index.d.ts                 | 11 +++++++++++
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts b/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts
index bb09fc8137be27..9c41b2e46e4d8c 100644
--- a/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts
+++ b/packages/material-ui-styles/src/makeStyles/makeStyles.d.ts
@@ -5,9 +5,7 @@ import {
   Styles,
   WithStylesOptions,
 } from '@material-ui/styles/withStyles';
-
-// https://stackoverflow.com/a/49928360/3406963 without generic branch types
-export type IsAny<T> = 0 extends (1 & T) ? true : false;
+import { IsAny } from '@material-ui/types';
 
 export type Or<A, B, C = false> = A extends true
   ? true
diff --git a/packages/material-ui-styles/src/styled/styled.d.ts b/packages/material-ui-styles/src/styled/styled.d.ts
index c72ea8f26236e2..5fa17194ea4cf3 100644
--- a/packages/material-ui-styles/src/styled/styled.d.ts
+++ b/packages/material-ui-styles/src/styled/styled.d.ts
@@ -1,4 +1,4 @@
-import { Omit } from '@material-ui/types';
+import { Omit, IsAny, CoerceEmptyInterface } from '@material-ui/types';
 import {
   CreateCSSProperties,
   StyledComponentProps,
@@ -6,12 +6,6 @@ import {
 } from '@material-ui/styles/withStyles';
 import * as React from 'react';
 
-/**
- * If props is any, returns empty object, otherwise T
- * @internal
- */
-export type GetProps<T> = 0 extends 1 & T ? {} : T;
-
 /**
  * @internal
  */
@@ -25,7 +19,7 @@ export type ComponentCreator<Component extends React.ElementType> = <Theme, Prop
     JSX.LibraryManagedAttributes<Component, React.ComponentProps<Component>>,
     'classes' | 'className'
   > &
-    StyledComponentProps<'root'> & { className?: string } & GetProps<Props>
+    StyledComponentProps<'root'> & { className?: string } & CoerceEmptyInterface<Props>
 >;
 
 export interface StyledProps {
diff --git a/packages/material-ui-types/index.d.ts b/packages/material-ui-types/index.d.ts
index c71ea641e217bb..aa08d4950d769a 100644
--- a/packages/material-ui-types/index.d.ts
+++ b/packages/material-ui-types/index.d.ts
@@ -42,3 +42,14 @@ export type Omit<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof
  * @internal
  */
 export type Overwrite<T, U> = Omit<T, keyof U> & U;
+
+/**
+ * Returns true if T is any, otherwise false
+ */
+// https://stackoverflow.com/a/49928360/3406963 without generic branch types
+export type IsAny<T> = 0 extends (1 & T) ? true : false;
+
+/**
+ * Returns an empty object type if T is any, otherwise returns T
+ */
+export type CoerceEmptyInterface<T> = IsAny<T> extends true ? {} : T;

From 75d089e783b8cd42891b54ac2a8857afc41b55de Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Mon, 10 Jun 2019 02:14:32 +0200
Subject: [PATCH 4/6] [docs] Add typescript version of AdaptingStyledComponents

---
 .../styles/basics/AdaptingStyledComponents.js |  4 +-
 .../basics/AdaptingStyledComponents.tsx       | 38 +++++++++++++++++++
 docs/src/pages/system/basics/JSS.js           |  4 +-
 docs/src/pages/system/basics/JSS.tsx          |  4 +-
 4 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 docs/src/pages/styles/basics/AdaptingStyledComponents.tsx

diff --git a/docs/src/pages/styles/basics/AdaptingStyledComponents.js b/docs/src/pages/styles/basics/AdaptingStyledComponents.js
index cd0985e45e1c00..caa43738563562 100644
--- a/docs/src/pages/styles/basics/AdaptingStyledComponents.js
+++ b/docs/src/pages/styles/basics/AdaptingStyledComponents.js
@@ -19,7 +19,7 @@ const MyButton = styled(({ color, ...other }) => <Button {...other} />)({
   margin: 8,
 });
 
-function AdaptingStyledComponents() {
+export default function AdaptingStyledComponents() {
   return (
     <React.Fragment>
       <MyButton color="red">Red</MyButton>
@@ -27,5 +27,3 @@ function AdaptingStyledComponents() {
     </React.Fragment>
   );
 }
-
-export default AdaptingStyledComponents;
diff --git a/docs/src/pages/styles/basics/AdaptingStyledComponents.tsx b/docs/src/pages/styles/basics/AdaptingStyledComponents.tsx
new file mode 100644
index 00000000000000..fdfb2f513a47b3
--- /dev/null
+++ b/docs/src/pages/styles/basics/AdaptingStyledComponents.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { styled } from '@material-ui/styles';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import { Omit } from '@material-ui/types';
+
+interface MyButtonProps {
+  color: 'red' | 'blue';
+}
+
+const MyButton = styled(
+  ({ color, ...other }: MyButtonProps & Omit<ButtonProps, keyof MyButtonProps>) => (
+    <Button {...other} />
+  ),
+)({
+  background: (props: MyButtonProps) =>
+    props.color === 'red'
+      ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
+      : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
+  border: 0,
+  borderRadius: 3,
+  boxShadow: (props: MyButtonProps) =>
+    props.color === 'red'
+      ? '0 3px 5px 2px rgba(255, 105, 135, .3)'
+      : '0 3px 5px 2px rgba(33, 203, 243, .3)',
+  color: 'white',
+  height: 48,
+  padding: '0 30px',
+  margin: 8,
+});
+
+export default function AdaptingStyledComponents() {
+  return (
+    <React.Fragment>
+      <MyButton color="red">Red</MyButton>
+      <MyButton color="blue">Blue</MyButton>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/pages/system/basics/JSS.js b/docs/src/pages/system/basics/JSS.js
index 3b73efdba2c754..42b0194b5c54f5 100644
--- a/docs/src/pages/system/basics/JSS.js
+++ b/docs/src/pages/system/basics/JSS.js
@@ -9,12 +9,10 @@ const Box = styled('div')(
   ),
 );
 
-function JSS() {
+export default function JSS() {
   return (
     <Box color="white" bgcolor="palevioletred" p={1}>
       JSS
     </Box>
   );
 }
-
-export default JSS;
diff --git a/docs/src/pages/system/basics/JSS.tsx b/docs/src/pages/system/basics/JSS.tsx
index 3b73efdba2c754..42b0194b5c54f5 100644
--- a/docs/src/pages/system/basics/JSS.tsx
+++ b/docs/src/pages/system/basics/JSS.tsx
@@ -9,12 +9,10 @@ const Box = styled('div')(
   ),
 );
 
-function JSS() {
+export default function JSS() {
   return (
     <Box color="white" bgcolor="palevioletred" p={1}>
       JSS
     </Box>
   );
 }
-
-export default JSS;

From f7bf6876fb16927c53d9f48a51c86c6da8949689 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Mon, 10 Jun 2019 02:18:36 +0200
Subject: [PATCH 5/6] [docs] Update duplicate demo

---
 .../basics/AdaptingStyledComponents.tsx       | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx
index 9c29f84aed83fe..fdfb2f513a47b3 100644
--- a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx
+++ b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx
@@ -1,23 +1,24 @@
 import React from 'react';
 import { styled } from '@material-ui/styles';
-import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import { Omit } from '@material-ui/types';
 
-type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
-
-interface Props {
+interface MyButtonProps {
   color: 'red' | 'blue';
 }
 
-type MyButtonProps = Props & Omit<MuiButtonProps, keyof Props>;
-
-const MyButton = styled(({ color, ...other }: MyButtonProps) => <Button {...other} />)({
-  background: (props: Props) =>
+const MyButton = styled(
+  ({ color, ...other }: MyButtonProps & Omit<ButtonProps, keyof MyButtonProps>) => (
+    <Button {...other} />
+  ),
+)({
+  background: (props: MyButtonProps) =>
     props.color === 'red'
       ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
       : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
   border: 0,
   borderRadius: 3,
-  boxShadow: (props: Props) =>
+  boxShadow: (props: MyButtonProps) =>
     props.color === 'red'
       ? '0 3px 5px 2px rgba(255, 105, 135, .3)'
       : '0 3px 5px 2px rgba(33, 203, 243, .3)',

From de1eba5122a46d9b26a703e60a3d2a3a98f3e20e Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Mon, 10 Jun 2019 02:38:25 +0200
Subject: [PATCH 6/6] [docs] Added typescript version of StyledComponents

---
 .../pages/styles/basics/StyledComponents.tsx    | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 docs/src/pages/styles/basics/StyledComponents.tsx

diff --git a/docs/src/pages/styles/basics/StyledComponents.tsx b/docs/src/pages/styles/basics/StyledComponents.tsx
new file mode 100644
index 00000000000000..ba03a78eed3597
--- /dev/null
+++ b/docs/src/pages/styles/basics/StyledComponents.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { styled } from '@material-ui/styles';
+import Button from '@material-ui/core/Button';
+
+const MyButton = styled(Button)({
+  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+  border: 0,
+  borderRadius: 3,
+  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+  color: 'white',
+  height: 48,
+  padding: '0 30px',
+});
+
+export default function StyledComponents() {
+  return <MyButton>Styled Components</MyButton>;
+}