refactor(catalog): remove obsolete gridSizes prop from AboutField

Remove the unused `gridSizes` prop from AboutField. Grid layout is
now owned by the parent Grid.Root in AboutContent, making this prop
unnecessary.

Update changeset with breaking change and migration guide.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/thirty-kiwis-trade.md

@@ -5,13 +5,18 @@
 
 Migrated `EntityAboutCard`, `EntityLinksCard`, `EntityLabelsCard`, `GroupProfileCard`, and `UserProfileCard` from MUI/InfoCard to use the new BUI card layout and BUI components where possible.
 
-**BREAKING**: Removed `variant` prop from EntityAboutCard, EntityUserProfileCard, EntityGroupProfileCard, EntityLabelsCard, EntityLinksCard
+**BREAKING**: Removed `variant` prop from EntityAboutCard, EntityUserProfileCard, EntityGroupProfileCard, EntityLabelsCard, EntityLinksCard. Removed `gridSizes` prop from `AboutField`.
 
 **Migration:**
 
-Simply delete the obsolete `variant` prop, e.g:
+Simply delete the obsolete `variant` and `gridSizes` props, e.g:
 
 ```diff
 -      <EntityAboutCard variant="gridItem" />
 +      <EntityAboutCard />
 ```
+
+```diff
+-      <AboutField label="Owner" gridSizes={{ xs: 12, sm: 6, lg: 4 }} />
++      <AboutField label="Owner" />
+```

plugins/catalog/report.api.md

@@ -8,7 +8,6 @@ import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { CatalogApi } from '@backstage/plugin-catalog-react';
 import { ComponentEntity } from '@backstage/catalog-model';
 import { CompoundEntityRef } from '@backstage/catalog-model';
-import { CSSProperties } from 'react';
 import { DomainEntity } from '@backstage/catalog-model';
 import { ElementType } from 'react';
 import { Entity } from '@backstage/catalog-model';
@@ -60,12 +59,8 @@ export interface AboutFieldProps {
   // (undocumented)
   className?: string;
   // (undocumented)
-  gridSizes?: Record<string, number>;
-  // (undocumented)
   label: string;
   // (undocumented)
-  style?: CSSProperties;
-  // (undocumented)
   value?: string;
 }
 

plugins/catalog/src/components/AboutCard/AboutContent.tsx

@@ -133,7 +133,6 @@ export function AboutContent(props: AboutContentProps) {
         label={t('aboutCard.ownerField.label')}
         value={t('aboutCard.ownerField.value')}
         className={classes.description}
-        gridSizes={{ xs: 12, sm: 6, lg: 4 }}
       >
         {ownedByRelations.length > 0 && (
           <EntityRefLinks entityRefs={ownedByRelations} defaultKind="group" />
@@ -143,7 +142,6 @@ export function AboutContent(props: AboutContentProps) {
         <AboutField
           label={t('aboutCard.domainField.label')}
           value={t('aboutCard.domainField.value')}
-          gridSizes={{ xs: 12, sm: 6, lg: 4 }}
         >
           {partOfDomainRelations.length > 0 && (
             <EntityRefLinks
@@ -160,7 +158,6 @@ export function AboutContent(props: AboutContentProps) {
         <AboutField
           label={t('aboutCard.systemField.label')}
           value={t('aboutCard.systemField.value')}
-          gridSizes={{ xs: 12, sm: 6, lg: 4 }}
         >
           {partOfSystemRelations.length > 0 && (
             <EntityRefLinks
@@ -174,7 +171,6 @@ export function AboutContent(props: AboutContentProps) {
         <AboutField
           label={t('aboutCard.parentComponentField.label')}
           value={t('aboutCard.parentComponentField.value')}
-          gridSizes={{ xs: 12, sm: 6, lg: 4 }}
         >
           <EntityRefLinks
             entityRefs={partOfComponentRelations}
@@ -192,7 +188,6 @@ export function AboutContent(props: AboutContentProps) {
         <AboutField
           label={t('aboutCard.typeField.label')}
           value={entity?.spec?.type as string}
-          gridSizes={{ xs: 12, sm: 6, lg: 4 }}
         />
       )}
       {(isAPI ||
@@ -201,13 +196,11 @@ export function AboutContent(props: AboutContentProps) {
         <AboutField
           label={t('aboutCard.lifecycleField.label')}
           value={entity?.spec?.lifecycle as string}
-          gridSizes={{ xs: 12, sm: 6, lg: 4 }}
         />
       )}
       <AboutField
         label={t('aboutCard.tagsField.label')}
         value={t('aboutCard.tagsField.value')}
-        gridSizes={{ xs: 12, sm: 6, lg: 4 }}
       >
         {(entity?.metadata?.tags || []).map(tag => (
           <Chip key={tag} size="small" label={tag} />

plugins/catalog/src/components/AboutCard/AboutField.tsx

@@ -47,14 +47,13 @@ const useStyles = makeStyles(theme => ({
 export interface AboutFieldProps {
   label: string;
   value?: string;
-  gridSizes?: Record<string, number>;
   children?: ReactNode;
   className?: string;
 }
 
 /** @public */
 export function AboutField(props: AboutFieldProps) {
-  const { label, value, gridSizes: _gridSizes, children, className } = props;
+  const { label, value, children, className } = props;
   const classes = useStyles();
   const { t } = useTranslationRef(catalogTranslationRef);
 

plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx

@@ -93,9 +93,6 @@ const CardTitle = (props: { title: string; pictureSrc?: string }) =>
 
 /** @public */
 export const UserProfileCard = (props: {
-  // Accepted for API compatibility but not applied.
-  // The new entity page layout handles card sizing.
-  // TODO: Discuss removal in code review.
   showLinks?: boolean;
   maxRelations?: number;
   hideIcons?: boolean;