fix: prevent console errors for read only badges in card actions

patternfly · Jan 9, 2025 · 19b47a2 · 19b47a2
1 parent ebd8588
commit 19b47a2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/packages/module/patternfly-docs/content/examples/catalogTile.css b/packages/module/patternfly-docs/content/examples/catalogTile.css
@@ -2,6 +2,9 @@
   color: var(--pf-t--global--text--color--regular);
   text-decoration: none;
 }
+.ws-react-e-catalog-tile .pf-v6-c-card__header-main {
+  display: flex;
+}
 .ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle {
   color: var(--pf-t--global--text--color--subtle);
   font-size: var(--pf-t--global--font--size--body--sm);

diff --git a/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss b/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss
@@ -11,6 +11,10 @@
     text-decoration: none;
   }
 
+  .pf-v6-c-card__header-main {
+    display: flex;
+  }
+
   .pf-v6-c-card__actions {
     padding-left: 5px;
   }

diff --git a/packages/module/src/components/CatalogTile/CatalogTile.tsx b/packages/module/src/components/CatalogTile/CatalogTile.tsx
@@ -119,7 +119,6 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
       >
         {(badges.length > 0 || iconImg || iconClass || icon || onClick || href) && (
           <CardHeader
-            actions={{ actions: badges.length > 0 && this.renderBadges(badges), hasNoOffset: true }}
             selectableActions={ (onClick || href) && {
                 selectableActionId: id + '-input',
                 onClickAction: (e) => this.handleClick(e),
@@ -129,6 +128,7 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
           >
             {iconImg && <img className="catalog-tile-pf-icon" src={iconImg} alt={iconAlt} />}
             {!iconImg && (iconClass || icon) && <span className={`catalog-tile-pf-icon ${iconClass}`}>{icon}</span>}
+            {badges.length > 0 && this.renderBadges(badges)}
           </CardHeader>
         )}
         <CardTitle className="catalog-tile-pf-header">