From 78fa27c542ef305c17fc15150f0b51837a337485 Mon Sep 17 00:00:00 2001
From: Ryan Vazquez <ryanv@spotify.com>
Date: Wed, 2 Sep 2020 11:37:33 -0400
Subject: [PATCH 1/2] forward classes prop to cardheader

---
 .../core/src/layout/InfoCard/InfoCard.tsx     | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/layout/InfoCard/InfoCard.tsx b/packages/core/src/layout/InfoCard/InfoCard.tsx
index 86e9c79ced..983356dd4a 100644
--- a/packages/core/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core/src/layout/InfoCard/InfoCard.tsx
@@ -20,8 +20,10 @@ import {
   CardActions,
   CardContent,
   CardHeader,
+  CardHeaderProps,
   Divider,
   withStyles,
+  createStyles,
   makeStyles,
 } from '@material-ui/core';
 import classNames from 'classnames';
@@ -40,10 +42,25 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const BoldHeader = withStyles(theme => ({
-  title: { fontWeight: 700 },
-  subheader: { paddingTop: theme.spacing(1) },
-}))(CardHeader);
+const useBoldHeaderStyles = makeStyles(theme =>
+  createStyles({
+    title: {
+      fontWeight: 700,
+    },
+    subheader: {
+      paddingTop: theme.spacing(1),
+    },
+    root: {},
+    avatar: {},
+    action: {},
+    content: {},
+  }),
+);
+
+const BoldHeader = ({ classes, ...props }: CardHeaderProps) => {
+  const styles = useBoldHeaderStyles({ classes });
+  return <CardHeader classes={styles} {...props} />;
+};
 
 const CardActionsTopRight = withStyles(theme => ({
   root: {
@@ -120,8 +137,6 @@ const VARIANT_STYLES = {
  *   <InfoCard variant="noShrink">...</InfoCard>
  */
 type Props = {
-  title?: ReactNode;
-  subheader?: ReactNode;
   divider?: boolean;
   deepLink?: BottomLinkProps;
   slackChannel?: string;
@@ -130,14 +145,14 @@ type Props = {
   cardStyle?: object;
   children?: ReactNode;
   headerStyle?: object;
-  headerProps?: object;
+  headerProps?: CardHeaderProps;
   actionsClassName?: string;
   actions?: ReactNode;
   cardClassName?: string;
   actionsTopRight?: ReactNode;
   className?: string;
   noPadding?: boolean;
-};
+} & Pick<CardHeaderProps, 'title' | 'subheader'>;
 
 export const InfoCard: FC<Props> = ({
   title,

From 6cdad09d3b9fb6dc2e94d0281a8af4e3f8bcdd73 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 8 Sep 2020 16:34:15 +0200
Subject: [PATCH 2/2] core: fix InfoCard type troubles

---
 .../core/src/layout/InfoCard/InfoCard.tsx     | 57 +++++++++----------
 1 file changed, 27 insertions(+), 30 deletions(-)

diff --git a/packages/core/src/layout/InfoCard/InfoCard.tsx b/packages/core/src/layout/InfoCard/InfoCard.tsx
index 983356dd4a..6914d396b1 100644
--- a/packages/core/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core/src/layout/InfoCard/InfoCard.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import {
   Card,
   CardActions,
@@ -23,7 +23,6 @@ import {
   CardHeaderProps,
   Divider,
   withStyles,
-  createStyles,
   makeStyles,
 } from '@material-ui/core';
 import classNames from 'classnames';
@@ -31,37 +30,26 @@ import { ErrorBoundary } from '../ErrorBoundary';
 import { BottomLink, BottomLinkProps } from '../BottomLink';
 
 const useStyles = makeStyles(theme => ({
-  header: {
-    padding: theme.spacing(2, 2, 2, 2.5),
-  },
   noPadding: {
     padding: 0,
     '&:last-child': {
       paddingBottom: 0,
     },
   },
+  header: {
+    padding: theme.spacing(2, 2, 2, 2.5),
+  },
+  headerTitle: {
+    fontWeight: 700,
+  },
+  headerSubheader: {
+    paddingTop: theme.spacing(1),
+  },
+  headerAvatar: {},
+  headerAction: {},
+  headerContent: {},
 }));
 
-const useBoldHeaderStyles = makeStyles(theme =>
-  createStyles({
-    title: {
-      fontWeight: 700,
-    },
-    subheader: {
-      paddingTop: theme.spacing(1),
-    },
-    root: {},
-    avatar: {},
-    action: {},
-    content: {},
-  }),
-);
-
-const BoldHeader = ({ classes, ...props }: CardHeaderProps) => {
-  const styles = useBoldHeaderStyles({ classes });
-  return <CardHeader classes={styles} {...props} />;
-};
-
 const CardActionsTopRight = withStyles(theme => ({
   root: {
     display: 'inline-block',
@@ -137,6 +125,8 @@ const VARIANT_STYLES = {
  *   <InfoCard variant="noShrink">...</InfoCard>
  */
 type Props = {
+  title?: ReactNode;
+  subheader?: ReactNode;
   divider?: boolean;
   deepLink?: BottomLinkProps;
   slackChannel?: string;
@@ -152,9 +142,9 @@ type Props = {
   actionsTopRight?: ReactNode;
   className?: string;
   noPadding?: boolean;
-} & Pick<CardHeaderProps, 'title' | 'subheader'>;
+};
 
-export const InfoCard: FC<Props> = ({
+export const InfoCard = ({
   title,
   subheader,
   divider,
@@ -170,7 +160,7 @@ export const InfoCard: FC<Props> = ({
   actionsTopRight,
   className,
   noPadding,
-}) => {
+}: Props): JSX.Element => {
   const classes = useStyles();
 
   /**
@@ -201,8 +191,15 @@ export const InfoCard: FC<Props> = ({
       <ErrorBoundary slackChannel={slackChannel}>
         {title && (
           <>
-            <BoldHeader
-              className={classes.header}
+            <CardHeader
+              classes={{
+                root: classes.header,
+                title: classes.headerTitle,
+                subheader: classes.headerSubheader,
+                avatar: classes.headerAvatar,
+                action: classes.headerAction,
+                content: classes.headerContent,
+              }}
               title={title}
               subheader={subheader}
               style={{ display: 'inline-block', ...headerStyle }}