diff --git a/.changeset/popular-nails-agree.md b/.changeset/popular-nails-agree.md new file mode 100644 index 0000000000..361ff4745d --- /dev/null +++ b/.changeset/popular-nails-agree.md @@ -0,0 +1,6 @@ +--- +'@backstage/core': patch +--- + +Deprecate `type` of `ItemCard` and introduce new `subtitle` which allows passing +react nodes. diff --git a/packages/core/src/layout/ItemCard/ItemCard.stories.tsx b/packages/core/src/layout/ItemCard/ItemCard.stories.tsx index b53fa9eb7a..eea78562e8 100644 --- a/packages/core/src/layout/ItemCard/ItemCard.stories.tsx +++ b/packages/core/src/layout/ItemCard/ItemCard.stories.tsx @@ -30,7 +30,7 @@ export const Default = () => ( title="Item Card" description="This is the description of an Item Card" label="Button" - type="Pretitle" + subtitle="Pretitle" onClick={() => {}} /> @@ -39,7 +39,7 @@ export const Default = () => ( title="Item Card" description="This is the description of an Item Card" label="Button" - type="Pretitle" + subtitle="Pretitle" onClick={() => {}} /> diff --git a/packages/core/src/layout/ItemCard/ItemCard.test.tsx b/packages/core/src/layout/ItemCard/ItemCard.test.tsx index 6afeb16c5b..30cf95fd85 100644 --- a/packages/core/src/layout/ItemCard/ItemCard.test.tsx +++ b/packages/core/src/layout/ItemCard/ItemCard.test.tsx @@ -14,25 +14,35 @@ * limitations under the License. */ -import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; +import React from 'react'; import { ItemCard } from './ItemCard'; const minProps = { description: 'This is the description of an Item Card', label: 'Button', title: 'Item Card', - type: 'Pretitle', }; describe('', () => { it('renders default without exploding', async () => { - const { description, label, title, type } = minProps; + const { description, label, title } = minProps; const { getByText } = await renderInTestApp(); expect(getByText(description)).toBeInTheDocument(); expect(getByText(title)).toBeInTheDocument(); expect(getByText(label)).toBeInTheDocument(); - expect(getByText(type)).toBeInTheDocument(); + }); + + it('renders with subtitle without exploding', async () => { + const { description, label, title } = minProps; + const subtitle = 'Pretitle'; + const { getByText } = await renderInTestApp( + , + ); + expect(getByText(description)).toBeInTheDocument(); + expect(getByText(title)).toBeInTheDocument(); + expect(getByText(label)).toBeInTheDocument(); + expect(getByText(subtitle)).toBeInTheDocument(); }); it('renders with tags without exploding', async () => { diff --git a/packages/core/src/layout/ItemCard/ItemCard.tsx b/packages/core/src/layout/ItemCard/ItemCard.tsx index 4242cd6381..9e16def5d3 100644 --- a/packages/core/src/layout/ItemCard/ItemCard.tsx +++ b/packages/core/src/layout/ItemCard/ItemCard.tsx @@ -15,7 +15,7 @@ */ import { Button, Card, Chip, makeStyles, Typography } from '@material-ui/core'; import clsx from 'clsx'; -import React from 'react'; +import React, { ReactNode } from 'react'; import { Link } from '../../components'; const useStyles = makeStyles(theme => ({ @@ -45,7 +45,9 @@ type ItemCardProps = { description?: string; tags?: string[]; title: string; + /** @deprecated Use subtitle instead */ type?: string; + subtitle?: ReactNode; label: string; onClick?: () => void; href?: string; @@ -56,6 +58,7 @@ export const ItemCard = ({ tags, title, type, + subtitle, label, onClick, href, @@ -65,7 +68,9 @@ export const ItemCard = ({ return (
- {type ?? {type}} + {(subtitle || type) && ( + {subtitle ?? type} + )} {title}