diff --git a/.changeset/sweet-pandas-relax.md b/.changeset/sweet-pandas-relax.md
new file mode 100644
index 0000000000..97cff5a89d
--- /dev/null
+++ b/.changeset/sweet-pandas-relax.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+InfoCard - Remove subheader container when there is not a subheader or icon
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx
index 479efe4fd4..0db7c24c96 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx
@@ -16,6 +16,7 @@
import React from 'react';
import { renderInTestApp } from '@backstage/test-utils';
+import { within } from '@testing-library/react';
import { InfoCard } from './InfoCard';
const minProps = {
@@ -36,4 +37,38 @@ describe('', () => {
const rendered = await renderInTestApp();
expect(rendered.getByText('A deepLink title')).toBeInTheDocument();
});
+
+ describe('Subheader', () => {
+ it('shows the subheader passed in via the subheader prop', async () => {
+ const { getByTestId } = await renderInTestApp(
+ ,
+ );
+
+ const subheaderContainer = getByTestId('info-card-subheader');
+
+ expect(
+ within(subheaderContainer).getByText('example subheader'),
+ ).toBeInTheDocument();
+ });
+
+ it('shows the icon passed in via the icon prop', async () => {
+ const { getByTestId } = await renderInTestApp(
+ } />,
+ );
+
+ const subheaderContainer = getByTestId('info-card-subheader');
+
+ expect(
+ within(subheaderContainer).getByTestId('mock-icon'),
+ ).toBeInTheDocument();
+ });
+
+ it('is not rendered where there is not an icon or subheading', async () => {
+ const { queryByTestId } = await renderInTestApp(
+ ,
+ );
+
+ expect(queryByTestId('info-card-subheader')).not.toBeInTheDocument();
+ });
+ });
});
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index 2026a7eced..95d474aae4 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -200,8 +200,15 @@ export function InfoCard(props: Props): JSX.Element {
}
const cardSubTitle = () => {
+ if (!subheader && !icon) {
+ return null;
+ }
+
return (
-
+
{subheader &&
{subheader}
}
{icon}