Merge pull request #10957 from oodamien/dvitrac/gh-10951

Use InfoCardVariants on custom cards variant attribute

.changeset/moody-laws-boil.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-catalog': minor
+'@backstage/plugin-catalog-react': minor
+---
+
+Use InfoCardVariants on custom cards variant attribute

plugins/api-docs/api-report.md

@@ -10,6 +10,7 @@ import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { CatalogTableRow } from '@backstage/plugin-catalog';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
+import { InfoCardVariants } from '@backstage/core-components';
 import { default as React_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { TableColumn } from '@backstage/core-components';
@@ -128,7 +129,7 @@ export const EntityApiDefinitionCard: () => JSX.Element;
 export const EntityConsumedApisCard: ({
   variant,
 }: {
-  variant?: 'gridItem' | undefined;
+  variant?: InfoCardVariants | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EntityConsumingComponentsCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -137,7 +138,7 @@ export const EntityConsumedApisCard: ({
 export const EntityConsumingComponentsCard: ({
   variant,
 }: {
-  variant?: 'gridItem' | undefined;
+  variant?: InfoCardVariants | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EntityHasApisCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -146,7 +147,7 @@ export const EntityConsumingComponentsCard: ({
 export const EntityHasApisCard: ({
   variant,
 }: {
-  variant?: 'gridItem' | undefined;
+  variant?: InfoCardVariants | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EntityProvidedApisCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -155,7 +156,7 @@ export const EntityHasApisCard: ({
 export const EntityProvidedApisCard: ({
   variant,
 }: {
-  variant?: 'gridItem' | undefined;
+  variant?: InfoCardVariants | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EntityProvidingComponentsCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -164,7 +165,7 @@ export const EntityProvidedApisCard: ({
 export const EntityProvidingComponentsCard: ({
   variant,
 }: {
-  variant?: 'gridItem' | undefined;
+  variant?: InfoCardVariants | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "GraphQlDefinitionWidget" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx

@@ -26,13 +26,14 @@ import { apiEntityColumns } from './presets';
 import {
   CodeSnippet,
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   WarningPanel,
 } from '@backstage/core-components';
 
 type Props = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 export const ConsumedApisCard = ({ variant = 'gridItem' }: Props) => {

plugins/api-docs/src/components/ApisCards/HasApisCard.tsx

@@ -26,6 +26,7 @@ import { createSpecApiTypeColumn } from './presets';
 import {
   CodeSnippet,
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   TableColumn,
@@ -33,7 +34,7 @@ import {
 } from '@backstage/core-components';
 
 type Props = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 const columns: TableColumn<ApiEntity>[] = [

plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx

@@ -26,13 +26,14 @@ import { apiEntityColumns } from './presets';
 import {
   CodeSnippet,
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   WarningPanel,
 } from '@backstage/core-components';
 
 type Props = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 export const ProvidedApisCard = ({ variant = 'gridItem' }: Props) => {

plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx

@@ -28,13 +28,14 @@ import React from 'react';
 import {
   CodeSnippet,
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   WarningPanel,
 } from '@backstage/core-components';
 
 type Props = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 export const ConsumingComponentsCard = ({ variant = 'gridItem' }: Props) => {

plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx

@@ -28,13 +28,14 @@ import React from 'react';
 import {
   CodeSnippet,
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   WarningPanel,
 } from '@backstage/core-components';
 
 type Props = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 export const ProvidingComponentsCard = ({ variant = 'gridItem' }: Props) => {

plugins/catalog-react/api-report.md

@@ -13,6 +13,7 @@ import { ComponentProps } from 'react';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import { Entity } from '@backstage/catalog-model';
 import { IconButton } from '@material-ui/core';
+import { InfoCardVariants } from '@backstage/core-components';
 import { LinkProps } from '@backstage/core-components';
 import { Observable } from '@backstage/types';
 import { Overrides } from '@material-ui/core/styles/overrides';
@@ -333,7 +334,7 @@ export interface EntityTableProps<T extends Entity> {
   // (undocumented)
   title: string;
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public

plugins/catalog-react/src/components/EntityTable/EntityTable.tsx

@@ -19,7 +19,11 @@ import { makeStyles } from '@material-ui/core';
 import React, { ReactNode } from 'react';
 import { columnFactories } from './columns';
 import { componentEntityColumns, systemEntityColumns } from './presets';
-import { Table, TableColumn } from '@backstage/core-components';
+import {
+  InfoCardVariants,
+  Table,
+  TableColumn,
+} from '@backstage/core-components';
 
 /**
  * Props for {@link EntityTable}.
@@ -28,7 +32,7 @@ import { Table, TableColumn } from '@backstage/core-components';
  */
 export interface EntityTableProps<T extends Entity> {
   title: string;
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
   entities: T[];
   emptyContent?: ReactNode;
   columns: TableColumn<T>[];

plugins/catalog/api-report.md

@@ -184,7 +184,7 @@ export interface DependencyOfComponentsCardProps {
   // (undocumented)
   title?: string;
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
@@ -192,13 +192,13 @@ export interface DependsOnComponentsCardProps {
   // (undocumented)
   title?: string;
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
 export interface DependsOnResourcesCardProps {
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
@@ -285,7 +285,7 @@ export interface EntityLinksCardProps {
   // (undocumented)
   cols?: ColumnBreakpoints | number;
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
@@ -346,25 +346,25 @@ export function hasCatalogProcessingErrors(
 // @public (undocumented)
 export interface HasComponentsCardProps {
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
 export interface HasResourcesCardProps {
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
 export interface HasSubcomponentsCardProps {
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public (undocumented)
 export interface HasSystemsCardProps {
   // (undocumented)
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 // @public
@@ -392,7 +392,7 @@ export const RelatedEntitiesCard: <T extends Entity>(
 
 // @public (undocumented)
 export type RelatedEntitiesCardProps<T extends Entity> = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
   title: string;
   columns: TableColumn<T>[];
   entityKind?: string;

plugins/catalog/src/components/DependencyOfComponentsCard/DependencyOfComponentsCard.tsx

@@ -15,6 +15,7 @@
  */
 
 import { RELATION_DEPENDENCY_OF } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface DependencyOfComponentsCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
   title?: string;
 }
 

plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx

@@ -15,6 +15,7 @@
  */
 
 import { RELATION_DEPENDS_ON } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface DependsOnComponentsCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
   title?: string;
 }
 

plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx

@@ -15,6 +15,7 @@
  */
 
 import { RELATION_DEPENDS_ON } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asResourceEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface DependsOnResourcesCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) {

plugins/catalog/src/components/EntityLinksCard/EntityLinksCard.tsx

@@ -21,12 +21,12 @@ import { EntityLinksEmptyState } from './EntityLinksEmptyState';
 import { LinksGridList } from './LinksGridList';
 import { ColumnBreakpoints } from './types';
 import { IconComponent, useApp } from '@backstage/core-plugin-api';
-import { InfoCard } from '@backstage/core-components';
+import { InfoCard, InfoCardVariants } from '@backstage/core-components';
 
 /** @public */
 export interface EntityLinksCardProps {
   cols?: ColumnBreakpoints | number;
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function EntityLinksCard(props: EntityLinksCardProps) {

plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx

@@ -15,6 +15,7 @@
  */
 
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface HasComponentsCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function HasComponentsCard(props: HasComponentsCardProps) {

plugins/catalog/src/components/HasResourcesCard/HasResourcesCard.tsx

@@ -15,6 +15,7 @@
  */
 
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asResourceEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface HasResourcesCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function HasResourcesCard(props: HasResourcesCardProps) {

plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx

@@ -15,6 +15,7 @@
  */
 
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -24,7 +25,7 @@ import {
 
 /** @public */
 export interface HasSubcomponentsCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function HasSubcomponentsCard(props: HasSubcomponentsCardProps) {

plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx

@@ -15,6 +15,7 @@
  */
 
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
+import { InfoCardVariants } from '@backstage/core-components';
 import React from 'react';
 import {
   asSystemEntities,
@@ -25,7 +26,7 @@ import {
 
 /** @public */
 export interface HasSystemsCardProps {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 }
 
 export function HasSystemsCard(props: HasSystemsCardProps) {

plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx

@@ -24,6 +24,7 @@ import {
 import React from 'react';
 import {
   InfoCard,
+  InfoCardVariants,
   Link,
   Progress,
   ResponseErrorPanel,
@@ -32,7 +33,7 @@ import {
 
 /** @public */
 export type RelatedEntitiesCardProps<T extends Entity> = {
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
   title: string;
   columns: TableColumn<T>[];
   entityKind?: string;