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

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>

.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.

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)

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

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'

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}
         >