From a2ee4df20a6884d00328556948c81448d1487dd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustaf=20R=C3=A4ntil=C3=A4?= <g.rantila@gmail.com>
Date: Fri, 22 Mar 2024 08:46:49 +0100
Subject: [PATCH 1/5] feat: Allow GaugeCard to handle multi-line titles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

By adding a fullHeightFixedContent variant.
Also, add support for a small version.

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>
---
 .changeset/selfish-walls-visit.md             |  5 ++
 packages/core-components/api-report.md        |  7 +-
 .../src/components/ProgressBars/Gauge.tsx     | 14 +++-
 .../ProgressBars/GaugeCard.stories.tsx        | 76 +++++++++++++++++++
 .../src/components/ProgressBars/GaugeCard.tsx | 17 ++++-
 .../src/layout/InfoCard/InfoCard.tsx          | 25 +++++-
 6 files changed, 137 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/selfish-walls-visit.md

diff --git a/.changeset/selfish-walls-visit.md b/.changeset/selfish-walls-visit.md
new file mode 100644
index 0000000000..8748b3717e
--- /dev/null
+++ b/.changeset/selfish-walls-visit.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Add a fullHeightFixedContent variant of the GaugeCard, and a small size version. Fixed content will vertically align the gauge in the cards, even when the card titles span across multiple lines.
diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index 7fd706db43..1e5c1b892f 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -448,6 +448,7 @@ export type GaugeProps = {
   inverse?: boolean;
   unit?: string;
   max?: number;
+  size?: 'normal' | 'small';
   description?: ReactNode;
   getColor?: GaugePropsGetColor;
 };
@@ -609,7 +610,11 @@ export type InfoCardClassKey =
   | 'headerContent';
 
 // @public (undocumented)
-export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
+export type InfoCardVariants =
+  | 'flex'
+  | 'fullHeight'
+  | 'fullHeightFixedContent'
+  | 'gridItem';
 
 // Warning: (ae-forgotten-export) The symbol "ItemCardProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "ItemCard" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 088e369e62..87d2bf4f58 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -19,6 +19,7 @@ import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Circle } from 'rc-progress';
 import React, { ReactNode, useEffect, useState } from 'react';
 import Box from '@material-ui/core/Box';
+import classNames from 'classnames';
 
 /** @public */
 export type GaugeClassKey =
@@ -43,6 +44,9 @@ const useStyles = makeStyles(
       fontWeight: theme.typography.fontWeightBold,
       color: theme.palette.textContrast,
     },
+    overlaySmall: {
+      fontSize: theme.typography.pxToRem(25),
+    },
     description: {
       fontSize: '100%',
       top: '50%',
@@ -68,6 +72,7 @@ export type GaugeProps = {
   inverse?: boolean;
   unit?: string;
   max?: number;
+  size?: 'normal' | 'small';
   description?: ReactNode;
   getColor?: GaugePropsGetColor;
 };
@@ -121,7 +126,7 @@ export const getProgressColor: GaugePropsGetColor = ({
 
 export function Gauge(props: GaugeProps) {
   const [hoverRef, setHoverRef] = useState<HTMLDivElement | null>(null);
-  const { getColor = getProgressColor } = props;
+  const { getColor = getProgressColor, size = 'normal' } = props;
   const classes = useStyles(props);
   const { palette } = useTheme();
   const { value, fractional, inverse, unit, max, description } = {
@@ -165,7 +170,12 @@ export function Gauge(props: GaugeProps) {
       {description && isHovering ? (
         <Box className={classes.description}>{description}</Box>
       ) : (
-        <Box className={classes.overlay}>
+        <Box
+          className={classNames(
+            classes.overlay,
+            size === 'small' ? classes.overlaySmall : undefined,
+          )}
+        >
           {isNaN(value) ? 'N/A' : `${asActual}${unit}`}
         </Box>
       )}
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
index a0b6faea60..21d023999e 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
@@ -175,6 +175,82 @@ export const InfoMessage = () => (
   </Wrapper>
 );
 
+export const AlignedBottom = () => (
+  <Wrapper>
+    <Grid item>
+      <GaugeCard
+        variant="fullHeightFixedContent"
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.3}
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        variant="fullHeightFixedContent"
+        title="Progress"
+        subheader="With a subheader"
+        progress={0.57}
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        variant="fullHeightFixedContent"
+        title="Progress with longer title"
+        subheader="With a subheader"
+        progress={0.89}
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        variant="fullHeightFixedContent"
+        title="Progress"
+        subheader="With a subheader"
+        inverse
+        progress={0.2}
+      />
+    </Grid>
+  </Wrapper>
+);
+
+export const Small = () => (
+  <Wrapper>
+    <Grid item>
+      <GaugeCard
+        variant="fullHeightFixedContent"
+        size="small"
+        title="Progress"
+        progress={0.3}
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        variant="fullHeightFixedContent"
+        size="small"
+        title="Progress"
+        progress={0.57}
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        variant="fullHeightFixedContent"
+        size="small"
+        title="Progress, longer title"
+        progress={0.89}
+      />
+    </Grid>
+    <Grid item>
+      <GaugeCard
+        variant="fullHeightFixedContent"
+        size="small"
+        title="Progress"
+        inverse
+        progress={0.2}
+      />
+    </Grid>
+  </Wrapper>
+);
+
 export const HoverMessage = () => (
   <Wrapper>
     <Grid item>
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
index 3442395380..bbb870141b 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
@@ -27,6 +27,7 @@ type Props = {
   variant?: InfoCardVariants;
   /** Progress in % specified as decimal, e.g. "0.23" */
   progress: number;
+  size?: 'normal' | 'small';
   description?: ReactNode;
   icon?: ReactNode;
   inverse?: boolean;
@@ -43,6 +44,10 @@ const useStyles = makeStyles(
       height: '100%',
       width: 250,
     },
+    rootSmall: {
+      height: '100%',
+      width: 160,
+    },
   },
   { name: 'BackstageGaugeCard' },
 );
@@ -64,6 +69,7 @@ export function GaugeCard(props: Props) {
     description,
     icon,
     variant,
+    size = 'normal',
     getColor,
   } = props;
 
@@ -75,15 +81,22 @@ export function GaugeCard(props: Props) {
   };
 
   return (
-    <Box className={classes.root}>
+    <Box className={size === 'small' ? classes.rootSmall : classes.root}>
       <InfoCard
         title={title}
         subheader={subheader}
         deepLink={deepLink}
         variant={variant}
         icon={icon}
+        titleTypographyProps={
+          size === 'small'
+            ? {
+                variant: 'h6',
+              }
+            : undefined
+        }
       >
-        <Gauge {...gaugeProps} />
+        <Gauge {...gaugeProps} size={size} />
       </InfoCard>
     </Box>
   );
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index c80e71b609..9fd72e50b6 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -46,6 +46,10 @@ const useStyles = makeStyles(
     header: {
       padding: theme.spacing(2, 2, 2, 2.5),
     },
+    headerFixedContent: {
+      flexGrow: 1,
+      alignItems: 'flex-start',
+    },
     headerTitle: {
       fontWeight: theme.typography.fontWeightBold,
     },
@@ -87,6 +91,11 @@ const VARIANT_STYLES = {
       flexDirection: 'column',
       height: '100%',
     },
+    fullHeightFixedContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+    },
     gridItem: {
       display: 'flex',
       flexDirection: 'column',
@@ -102,6 +111,9 @@ const VARIANT_STYLES = {
     fullHeight: {
       flex: 1,
     },
+    fullHeightFixedContent: {
+      flex: '0 1 0%',
+    },
     gridItem: {
       flex: 1,
     },
@@ -109,7 +121,11 @@ const VARIANT_STYLES = {
 };
 
 /** @public */
-export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
+export type InfoCardVariants =
+  | 'flex'
+  | 'fullHeight'
+  | 'fullHeightFixedContent'
+  | 'gridItem';
 
 /**
  * InfoCard is used to display a paper-styled block on the screen, similar to a panel.
@@ -228,7 +244,12 @@ export function InfoCard(props: Props): JSX.Element {
         {title && (
           <CardHeader
             classes={{
-              root: classes.header,
+              root: classNames(
+                classes.header,
+                variant === 'fullHeightFixedContent'
+                  ? classes.headerFixedContent
+                  : undefined,
+              ),
               title: classes.headerTitle,
               subheader: classes.headerSubheader,
               avatar: classes.headerAvatar,

From 1705be1db29be62badee6a532511166ad94f6154 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustaf=20R=C3=A4ntil=C3=A4?= <g.rantila@gmail.com>
Date: Fri, 22 Mar 2024 16:09:05 +0100
Subject: [PATCH 2/5] Changed to not having a fixed/full sized header, but
 allow the content to grow, with an option to align the content to the bottom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>
---
 .changeset/selfish-walls-visit.md             |  3 +-
 packages/core-components/api-report.md        |  6 +---
 .../ProgressBars/GaugeCard.stories.tsx        | 24 +++++++++-----
 .../src/components/ProgressBars/GaugeCard.tsx |  3 ++
 .../src/layout/InfoCard/InfoCard.tsx          | 32 ++++++-------------
 5 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/.changeset/selfish-walls-visit.md b/.changeset/selfish-walls-visit.md
index 8748b3717e..64c87a64f5 100644
--- a/.changeset/selfish-walls-visit.md
+++ b/.changeset/selfish-walls-visit.md
@@ -2,4 +2,5 @@
 '@backstage/core-components': patch
 ---
 
-Add a fullHeightFixedContent variant of the GaugeCard, and a small size version. Fixed content will vertically align the gauge in the cards, even when the card titles span across multiple lines.
+Add `alignGauge` prop to the `GaugeCard`, and a small size version. When `alignGauge` is `'bottom'` the gauge will vertically align the gauge in the cards, even when the card titles span across multiple lines.
+Add `alignContent` prop to the `InfoCard`, defaulting to `'normal'` with the option of `'bottom'` which vertically aligns the content to the bottom of the card.
diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index 1e5c1b892f..293695db0c 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -610,11 +610,7 @@ export type InfoCardClassKey =
   | 'headerContent';
 
 // @public (undocumented)
-export type InfoCardVariants =
-  | 'flex'
-  | 'fullHeight'
-  | 'fullHeightFixedContent'
-  | 'gridItem';
+export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
 
 // Warning: (ae-forgotten-export) The symbol "ItemCardProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "ItemCard" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
index 21d023999e..12cdef52cb 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
@@ -179,7 +179,8 @@ export const AlignedBottom = () => (
   <Wrapper>
     <Grid item>
       <GaugeCard
-        variant="fullHeightFixedContent"
+        variant="fullHeight"
+        alignGauge="bottom"
         title="Progress"
         subheader="With a subheader"
         progress={0.3}
@@ -187,7 +188,8 @@ export const AlignedBottom = () => (
     </Grid>
     <Grid item>
       <GaugeCard
-        variant="fullHeightFixedContent"
+        variant="fullHeight"
+        alignGauge="bottom"
         title="Progress"
         subheader="With a subheader"
         progress={0.57}
@@ -195,7 +197,8 @@ export const AlignedBottom = () => (
     </Grid>
     <Grid item>
       <GaugeCard
-        variant="fullHeightFixedContent"
+        variant="fullHeight"
+        alignGauge="bottom"
         title="Progress with longer title"
         subheader="With a subheader"
         progress={0.89}
@@ -203,7 +206,8 @@ export const AlignedBottom = () => (
     </Grid>
     <Grid item>
       <GaugeCard
-        variant="fullHeightFixedContent"
+        variant="fullHeight"
+        alignGauge="bottom"
         title="Progress"
         subheader="With a subheader"
         inverse
@@ -217,7 +221,8 @@ export const Small = () => (
   <Wrapper>
     <Grid item>
       <GaugeCard
-        variant="fullHeightFixedContent"
+        variant="fullHeight"
+        alignGauge="bottom"
         size="small"
         title="Progress"
         progress={0.3}
@@ -225,7 +230,8 @@ export const Small = () => (
     </Grid>
     <Grid item>
       <GaugeCard
-        variant="fullHeightFixedContent"
+        variant="fullHeight"
+        alignGauge="bottom"
         size="small"
         title="Progress"
         progress={0.57}
@@ -233,7 +239,8 @@ export const Small = () => (
     </Grid>
     <Grid item>
       <GaugeCard
-        variant="fullHeightFixedContent"
+        variant="fullHeight"
+        alignGauge="bottom"
         size="small"
         title="Progress, longer title"
         progress={0.89}
@@ -241,7 +248,8 @@ export const Small = () => (
     </Grid>
     <Grid item>
       <GaugeCard
-        variant="fullHeightFixedContent"
+        variant="fullHeight"
+        alignGauge="bottom"
         size="small"
         title="Progress"
         inverse
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
index bbb870141b..4e73487983 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
@@ -27,6 +27,7 @@ type Props = {
   variant?: InfoCardVariants;
   /** Progress in % specified as decimal, e.g. "0.23" */
   progress: number;
+  alignGauge?: 'normal' | 'bottom';
   size?: 'normal' | 'small';
   description?: ReactNode;
   icon?: ReactNode;
@@ -69,6 +70,7 @@ export function GaugeCard(props: Props) {
     description,
     icon,
     variant,
+    alignGauge = 'normal',
     size = 'normal',
     getColor,
   } = props;
@@ -87,6 +89,7 @@ export function GaugeCard(props: Props) {
         subheader={subheader}
         deepLink={deepLink}
         variant={variant}
+        alignContent={alignGauge}
         icon={icon}
         titleTypographyProps={
           size === 'small'
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index 9fd72e50b6..1f41a315b8 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -43,13 +43,13 @@ const useStyles = makeStyles(
         paddingBottom: 0,
       },
     },
+    contentAlignBottom: {
+      display: 'flex',
+      alignItems: 'self-end',
+    },
     header: {
       padding: theme.spacing(2, 2, 2, 2.5),
     },
-    headerFixedContent: {
-      flexGrow: 1,
-      alignItems: 'flex-start',
-    },
     headerTitle: {
       fontWeight: theme.typography.fontWeightBold,
     },
@@ -91,11 +91,6 @@ const VARIANT_STYLES = {
       flexDirection: 'column',
       height: '100%',
     },
-    fullHeightFixedContent: {
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-    },
     gridItem: {
       display: 'flex',
       flexDirection: 'column',
@@ -111,9 +106,6 @@ const VARIANT_STYLES = {
     fullHeight: {
       flex: 1,
     },
-    fullHeightFixedContent: {
-      flex: '0 1 0%',
-    },
     gridItem: {
       flex: 1,
     },
@@ -121,11 +113,7 @@ const VARIANT_STYLES = {
 };
 
 /** @public */
-export type InfoCardVariants =
-  | 'flex'
-  | 'fullHeight'
-  | 'fullHeightFixedContent'
-  | 'gridItem';
+export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
 
 /**
  * InfoCard is used to display a paper-styled block on the screen, similar to a panel.
@@ -154,6 +142,7 @@ export type Props = {
   slackChannel?: string;
   errorBoundaryProps?: ErrorBoundaryProps;
   variant?: InfoCardVariants;
+  alignContent?: 'normal' | 'bottom';
   children?: ReactNode;
   headerStyle?: object;
   headerProps?: CardHeaderProps;
@@ -183,6 +172,7 @@ export function InfoCard(props: Props): JSX.Element {
     slackChannel,
     errorBoundaryProps,
     variant,
+    alignContent = 'normal',
     children,
     headerStyle,
     headerProps,
@@ -244,12 +234,7 @@ export function InfoCard(props: Props): JSX.Element {
         {title && (
           <CardHeader
             classes={{
-              root: classNames(
-                classes.header,
-                variant === 'fullHeightFixedContent'
-                  ? classes.headerFixedContent
-                  : undefined,
-              ),
+              root: classNames(classes.header),
               title: classes.headerTitle,
               subheader: classes.headerSubheader,
               avatar: classes.headerAvatar,
@@ -271,6 +256,7 @@ export function InfoCard(props: Props): JSX.Element {
         <CardContent
           className={classNames(cardClassName, {
             [classes.noPadding]: noPadding,
+            [classes.contentAlignBottom]: alignContent === 'bottom',
           })}
           style={calculatedCardStyle}
         >

From 0b9d63a02519628a5a3546376451b6dc3ff33966 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustaf=20R=C3=A4ntil=C3=A4?= <g.rantila@gmail.com>
Date: Sat, 6 Apr 2024 08:55:14 +0200
Subject: [PATCH 3/5] fix: Minor refactoring of styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>
---
 .../core-components/src/components/ProgressBars/Gauge.tsx  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 87d2bf4f58..e72172fd59 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -171,10 +171,9 @@ export function Gauge(props: GaugeProps) {
         <Box className={classes.description}>{description}</Box>
       ) : (
         <Box
-          className={classNames(
-            classes.overlay,
-            size === 'small' ? classes.overlaySmall : undefined,
-          )}
+          className={classNames(classes.overlay, {
+            [classes.overlaySmall]: size === 'small',
+          })}
         >
           {isNaN(value) ? 'N/A' : `${asActual}${unit}`}
         </Box>

From a7648561962ac8d80c1145aa3b4e488e3063d427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustaf=20R=C3=A4ntil=C3=A4?= <g.rantila@gmail.com>
Date: Sat, 6 Apr 2024 09:28:13 +0200
Subject: [PATCH 4/5] feat: Added subheaderTypographyProps prop to InfoCard,
 allowing it to be used from GaugeCard. Also made GaugeCard 'small' variant to
 have smaller text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>
---
 .../components/ProgressBars/GaugeCard.stories.tsx   |  1 +
 .../src/components/ProgressBars/GaugeCard.tsx       | 13 ++++++-------
 .../src/layout/InfoCard/InfoCard.tsx                |  3 +++
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
index 12cdef52cb..f7e2eb69c6 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
@@ -234,6 +234,7 @@ export const Small = () => (
         alignGauge="bottom"
         size="small"
         title="Progress"
+        subheader="With a subheader"
         progress={0.57}
       />
     </Grid>
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
index 4e73487983..9f6de8eafe 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
@@ -91,13 +91,12 @@ export function GaugeCard(props: Props) {
         variant={variant}
         alignContent={alignGauge}
         icon={icon}
-        titleTypographyProps={
-          size === 'small'
-            ? {
-                variant: 'h6',
-              }
-            : undefined
-        }
+        titleTypographyProps={{
+          ...(size === 'small' ? { variant: 'subtitle2' } : undefined),
+        }}
+        subheaderTypographyProps={{
+          ...(size === 'small' ? { variant: 'body2' } : undefined),
+        }}
       >
         <Gauge {...gaugeProps} size={size} />
       </InfoCard>
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index 1f41a315b8..e80c0d3384 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -155,6 +155,7 @@ export type Props = {
   className?: string;
   noPadding?: boolean;
   titleTypographyProps?: object;
+  subheaderTypographyProps?: object;
 };
 
 /**
@@ -185,6 +186,7 @@ export function InfoCard(props: Props): JSX.Element {
     className,
     noPadding,
     titleTypographyProps,
+    subheaderTypographyProps,
   } = props;
   const classes = useStyles();
   /**
@@ -246,6 +248,7 @@ export function InfoCard(props: Props): JSX.Element {
             action={action}
             style={{ ...headerStyle }}
             titleTypographyProps={titleTypographyProps}
+            subheaderTypographyProps={subheaderTypographyProps}
             {...headerProps}
           />
         )}

From f72f3a076dd911a2f836b5a8b534e6e0fbe0c885 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustaf=20R=C3=A4ntil=C3=A4?= <g.rantila@gmail.com>
Date: Sat, 6 Apr 2024 09:32:23 +0200
Subject: [PATCH 5/5] fix: Made the subhead in InfoCard not duplicate top
 padding props twice
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>
---
 packages/core-components/src/layout/InfoCard/InfoCard.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index e80c0d3384..a08a816c2e 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -217,10 +217,7 @@ export function InfoCard(props: Props): JSX.Element {
     }
 
     return (
-      <div
-        className={classes.headerSubheader}
-        data-testid="info-card-subheader"
-      >
+      <div data-testid="info-card-subheader">
         {subheader && <div className={classes.subheader}>{subheader}</div>}
         {icon}
       </div>