diff --git a/.changeset/tidy-garlics-decide.md b/.changeset/tidy-garlics-decide.md new file mode 100644 index 0000000000..c011bf84cf --- /dev/null +++ b/.changeset/tidy-garlics-decide.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Add support for fullHeight variant to the AboutCard diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx index e0cd0c2160..2bcf2a5453 100644 --- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx @@ -23,6 +23,7 @@ import { import { HeaderIconLinkRow, IconLinkVerticalProps, + InfoCardVariants, useApi, } from '@backstage/core'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; @@ -50,15 +51,23 @@ const useStyles = makeStyles({ height: 'calc(100% - 10px)', // for pages without content header marginBottom: '10px', }, + fullHeightCard: { + display: 'flex', + flexDirection: 'column', + height: '100%', + }, gridItemCardContent: { flex: 1, }, + fullHeightCardContent: { + flex: 1, + }, }); type AboutCardProps = { /** @deprecated The entity is now grabbed from context instead */ entity?: Entity; - variant?: 'gridItem'; + variant?: InfoCardVariants; }; export function AboutCard({ variant }: AboutCardProps) { @@ -103,8 +112,22 @@ export function AboutCard({ variant }: AboutCardProps) { href: 'api', }; + let cardClass = ''; + if (variant === 'gridItem') { + cardClass = classes.gridItemCard; + } else if (variant === 'fullHeight') { + cardClass = classes.fullHeightCard; + } + + let cardContentClass = ''; + if (variant === 'gridItem') { + cardContentClass = classes.gridItemCardContent; + } else if (variant === 'fullHeight') { + cardContentClass = classes.fullHeightCardContent; + } + return ( - + - +